diff --git a/packages/docs/src/api/apollo-mutation.md b/packages/docs/src/api/apollo-mutation.md
index 525d94ca..fae0ce86 100644
--- a/packages/docs/src/api/apollo-mutation.md
+++ b/packages/docs/src/api/apollo-mutation.md
@@ -139,7 +139,7 @@ See [refetching queries after mutation](https://www.apollographql.com/docs/react
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   computed: {
diff --git a/packages/docs/src/guide-advanced/local-state.md b/packages/docs/src/guide-advanced/local-state.md
index 2e8769e2..2aeca1f8 100644
--- a/packages/docs/src/guide-advanced/local-state.md
+++ b/packages/docs/src/guide-advanced/local-state.md
@@ -29,7 +29,7 @@ Now we're ready to add an `Item` type to our local GraphQL schema.
 ```js
 //main.js
 
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 
 export const typeDefs = gql`
   type Item {
@@ -151,7 +151,7 @@ Querying local cache is very similar to [sending GraphQL queries to remote serve
 ```js
 // App.vue
 
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 
 const todoItemsQuery = gql`
   {
diff --git a/packages/docs/src/guide-components/query.md b/packages/docs/src/guide-components/query.md
index 722fa9e9..06b93899 100644
--- a/packages/docs/src/guide-components/query.md
+++ b/packages/docs/src/guide-components/query.md
@@ -245,7 +245,7 @@ We want to extract all the fields in `messages` of the `Message` type into a fra
 First import the `gql` tag in the component:
 
 ```js
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 ```
 
 Then, inside the component definition, declare a new `fragments` object:
@@ -356,7 +356,7 @@ Here is the full example component:
 ```vue
 <!-- MessageList.vue -->
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   fragments: {
@@ -398,7 +398,7 @@ Now we can retrieve the `message` fragment in another component:
 ```vue
 <!-- MessageForm.vue -->
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 import MessageList from './MessageList.vue'
 
 export default {
diff --git a/packages/docs/src/guide-composable/fragments.md b/packages/docs/src/guide-composable/fragments.md
index 2e24df0f..f8581818 100644
--- a/packages/docs/src/guide-composable/fragments.md
+++ b/packages/docs/src/guide-composable/fragments.md
@@ -32,7 +32,7 @@ The most straightforward use of fragments is to reuse parts of queries (or mutat
 To do so, we can simply share a fragment describing the fields we need for a comment:
 
 ```js
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export const commentFragment = {
   comment: gql`
diff --git a/packages/docs/src/guide-composable/mutation.md b/packages/docs/src/guide-composable/mutation.md
index d0828172..c67a63b1 100644
--- a/packages/docs/src/guide-composable/mutation.md
+++ b/packages/docs/src/guide-composable/mutation.md
@@ -25,7 +25,7 @@ You can use `useMutation` in your `setup` option by passing it a GraphQL documen
 ```vue{3,7-13}
 <script>
 import { useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -46,7 +46,7 @@ It's generally a good idea to rename the `mutate` function into something more e
 ```vue{7}
 <script>
 import { useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -67,7 +67,7 @@ We can now use it in our template by passing variables to `mutate` (now called `
 ```vue{15-17,22-28}
 <script>
 import { useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -216,7 +216,7 @@ Our component now looks like:
 <script>
 import { ref } from 'vue'
 import { useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -314,7 +314,7 @@ For example, our `sendMessage` mutation should add the new message to our cache:
 ```vue{33-43}
 <script>
 import { useQuery, useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 const MESSAGES = gql`
   query getMessages {
@@ -499,7 +499,7 @@ In our example, this is very useful for resetting the message input:
 ```vue{22,46-48}
 <script>
 import { useQuery, useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 const MESSAGES = gql`
   query getMessages {
diff --git a/packages/docs/src/guide-composable/pagination.md b/packages/docs/src/guide-composable/pagination.md
index 7214ca52..f6815d9e 100644
--- a/packages/docs/src/guide-composable/pagination.md
+++ b/packages/docs/src/guide-composable/pagination.md
@@ -25,7 +25,7 @@ Let's take this example query loading a feed of potentially infinite number of p
 ```vue
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 const FEED_QUERY = gql`
   query getFeed ($type: FeedType!, $offset: Int, $limit: Int) {
diff --git a/packages/docs/src/guide-composable/query.md b/packages/docs/src/guide-composable/query.md
index 56c95b2b..0e0738c4 100644
--- a/packages/docs/src/guide-composable/query.md
+++ b/packages/docs/src/guide-composable/query.md
@@ -104,7 +104,7 @@ You can use `useQuery` in your `setup` option and pass it a GraphQL document as
 ```vue{3,7-16}
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -131,7 +131,7 @@ If you want to directly access the data object, use `result.value`:
 <script>
 import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -160,7 +160,7 @@ In this example, you could also watch the `Ref` directly:
 <script>
 import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -188,7 +188,7 @@ Let's expose our result in the template:
 ```vue{18-20,25-31}
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -237,7 +237,7 @@ We can use a `computed` prop to simplify access to part of the result and to pro
 <script>
 import { computed } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -279,7 +279,7 @@ Alongside `result`, `useQuery` returns `loading`, a boolean `Ref` tracking the l
 ```vue{7,20,27,29}
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -320,7 +320,7 @@ There is also an `error` `Ref` that holds any error that may occur during the re
 ```vue{7,21,30}
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -658,7 +658,7 @@ This is done using the `refetch` function:
 ```vue{7,24,40}
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -783,7 +783,7 @@ Example:
 ```vue{4,8,16,27}
 <script>
 import { computed } from 'vue'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 import { useLazyQuery } from '@vue/apollo-composable'
 
 export default {
diff --git a/packages/docs/src/guide-option/pagination.md b/packages/docs/src/guide-option/pagination.md
index ff101473..6e6cbbb2 100644
--- a/packages/docs/src/guide-option/pagination.md
+++ b/packages/docs/src/guide-option/pagination.md
@@ -31,7 +31,7 @@ Example:
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 const pageSize = 10
 
diff --git a/packages/docs/src/guide-option/queries.md b/packages/docs/src/guide-option/queries.md
index 7e2163a2..f7424814 100644
--- a/packages/docs/src/guide-option/queries.md
+++ b/packages/docs/src/guide-option/queries.md
@@ -17,7 +17,7 @@ Smart Queries are wrappers around GraphQL queries with additional features like
 Use `gql` to write your GraphQL queries:
 
 ```js
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 ```
 
 Put the [gql](https://github.com/apollographql/graphql-tag) query directly as the value:
diff --git a/packages/docs/src/guide/installation.md b/packages/docs/src/guide/installation.md
index 8688bbd3..c145ab93 100644
--- a/packages/docs/src/guide/installation.md
+++ b/packages/docs/src/guide/installation.md
@@ -30,13 +30,13 @@ Then you can skip to next section: [Basic Usage](../guide-option/usage.md).
 ## Manual installation
 
 ```shell
-npm install --save graphql graphql-tag @apollo/client
+npm install --save graphql @apollo/client
 ```
 
 Or:
 
 ```shell
-yarn add graphql graphql-tag @apollo/client
+yarn add graphql @apollo/client
 ```
 
 In your app, create an `ApolloClient` instance:
diff --git a/packages/docs/src/zh-cn/api/apollo-mutation.md b/packages/docs/src/zh-cn/api/apollo-mutation.md
index a1629a43..32651356 100644
--- a/packages/docs/src/zh-cn/api/apollo-mutation.md
+++ b/packages/docs/src/zh-cn/api/apollo-mutation.md
@@ -139,7 +139,7 @@ export default {
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   computed: {
diff --git a/packages/docs/src/zh-cn/guide-advanced/local-state.md b/packages/docs/src/zh-cn/guide-advanced/local-state.md
index 1e9e964f..5515e202 100644
--- a/packages/docs/src/zh-cn/guide-advanced/local-state.md
+++ b/packages/docs/src/zh-cn/guide-advanced/local-state.md
@@ -25,7 +25,7 @@
 ```js
 //main.js
 
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 
 export const typeDefs = gql`
   type Item {
@@ -147,7 +147,7 @@ cache.writeData({
 ```js
 // App.vue
 
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 
 const todoItemsQuery = gql`
   {
diff --git a/packages/docs/src/zh-cn/guide-components/query.md b/packages/docs/src/zh-cn/guide-components/query.md
index bae8063c..e6f1c035 100644
--- a/packages/docs/src/zh-cn/guide-components/query.md
+++ b/packages/docs/src/zh-cn/guide-components/query.md
@@ -246,7 +246,7 @@ query GetMessages {
 首先将 `gql` 标签导入组件：
 
 ```js
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 ```
 
 然后，在组件定义中，声明一个新的 `fragments` 对象：
@@ -357,7 +357,7 @@ fragment message on Message {
 ```vue
 <!-- MessageList.vue -->
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   fragments: {
@@ -399,7 +399,7 @@ export default {
 ```vue
 <!-- MessageForm.vue -->
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 import MessageList from './MessageList.vue'
 
 export default {
diff --git a/packages/docs/src/zh-cn/guide-composable/fragments.md b/packages/docs/src/zh-cn/guide-composable/fragments.md
index 83a3fe30..9eba761b 100644
--- a/packages/docs/src/zh-cn/guide-composable/fragments.md
+++ b/packages/docs/src/zh-cn/guide-composable/fragments.md
@@ -32,7 +32,7 @@ query GetPerson {
 为此，我们可以简单地共享一个片段，来描述我们在评论中需要的字段：
 
 ```js
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export const commentFragment = {
   comment: gql`
diff --git a/packages/docs/src/zh-cn/guide-composable/mutation.md b/packages/docs/src/zh-cn/guide-composable/mutation.md
index 6bf1d960..c0a1b6c5 100644
--- a/packages/docs/src/zh-cn/guide-composable/mutation.md
+++ b/packages/docs/src/zh-cn/guide-composable/mutation.md
@@ -25,7 +25,7 @@ export default {
 ```vue{3,7-13}
 <script>
 import { useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -46,7 +46,7 @@ export default {
 ```vue{7}
 <script>
 import { useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -67,7 +67,7 @@ export default {
 ```vue{15-17,22-28}
 <script>
 import { useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -215,7 +215,7 @@ sendMessage()
 <script>
 import { ref } from 'vue'
 import { useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -313,7 +313,7 @@ editMessage()
 ```vue{33-37}
 <script>
 import { useQuery, useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 const MESSAGES = gql`
   query getMessages {
@@ -482,7 +482,7 @@ onDone(result => {
 ```vue{22,40-42,55}
 <script>
 import { useQuery, useMutation } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 const MESSAGES = gql`
   query getMessages {
diff --git a/packages/docs/src/zh-cn/guide-composable/pagination.md b/packages/docs/src/zh-cn/guide-composable/pagination.md
index 7465e74c..7144028c 100644
--- a/packages/docs/src/zh-cn/guide-composable/pagination.md
+++ b/packages/docs/src/zh-cn/guide-composable/pagination.md
@@ -25,7 +25,7 @@ const { fetchMore } = useQuery(...)
 ```vue
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 const FEED_QUERY = gql`
   query getFeed ($type: FeedType!, $offset: Int, $limit: Int) {
diff --git a/packages/docs/src/zh-cn/guide-composable/query.md b/packages/docs/src/zh-cn/guide-composable/query.md
index 1d5d3959..a855e3f3 100644
--- a/packages/docs/src/zh-cn/guide-composable/query.md
+++ b/packages/docs/src/zh-cn/guide-composable/query.md
@@ -104,7 +104,7 @@ export default {
 ```vue{3,7-16}
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -131,7 +131,7 @@ export default {
 <script>
 import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -160,7 +160,7 @@ export default {
 <script>
 import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -188,7 +188,7 @@ export default {
 ```vue{18-20,25-31}
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -240,7 +240,7 @@ export default {
 ```vue{7,20,27,29}
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -281,7 +281,7 @@ export default {
 ```vue{7,21,30}
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
@@ -619,7 +619,7 @@ const { result } = useQuery(gql`
 ```vue{7,24,40}
 <script>
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   setup () {
diff --git a/packages/docs/src/zh-cn/guide-option/pagination.md b/packages/docs/src/zh-cn/guide-option/pagination.md
index 7e3fc4e3..2afa3d42 100644
--- a/packages/docs/src/zh-cn/guide-option/pagination.md
+++ b/packages/docs/src/zh-cn/guide-option/pagination.md
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 const pageSize = 10
 
diff --git a/packages/docs/src/zh-cn/guide-option/queries.md b/packages/docs/src/zh-cn/guide-option/queries.md
index 24dca732..de497b04 100644
--- a/packages/docs/src/zh-cn/guide-option/queries.md
+++ b/packages/docs/src/zh-cn/guide-option/queries.md
@@ -17,7 +17,7 @@ query myHelloQueryName {
 使用 `gql` 编写你的 GraphQL 查询：
 
 ```js
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 ```
 
 直接将 [gql](https://github.com/apollographql/graphql-tag) 查询作为值：
diff --git a/packages/docs/src/zh-cn/guide/installation.md b/packages/docs/src/zh-cn/guide/installation.md
index 4405e733..cae456d5 100644
--- a/packages/docs/src/zh-cn/guide/installation.md
+++ b/packages/docs/src/zh-cn/guide/installation.md
@@ -17,13 +17,13 @@ vue add apollo
 ## 手动安装
 
 ```
-npm install --save graphql graphql-tag @apollo/client
+npm install --save graphql @apollo/client
 ```
 
 或：
 
 ```
-yarn add graphql graphql-tag @apollo/client
+yarn add graphql @apollo/client
 ```
 
 在你的应用中创建一个 `ApolloClient` 实例：