From 60c12c06f32e4cfb73fcc3fa3b76ca4c582f98b3 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Mon, 20 Sep 2021 19:28:43 +0200
Subject: [PATCH] docs: update composition api imports, closes #1136

---
 packages/docs/src/guide-composable/mutation.md         |  2 +-
 packages/docs/src/guide-composable/query.md            | 10 +++++-----
 packages/docs/src/guide-composable/setup.md            |  8 +++++---
 packages/docs/src/guide-composable/subscription.md     |  4 ++--
 packages/docs/src/zh-cn/guide-composable/mutation.md   |  2 +-
 packages/docs/src/zh-cn/guide-composable/query.md      | 10 +++++-----
 packages/docs/src/zh-cn/guide-composable/setup.md      |  4 ++--
 .../docs/src/zh-cn/guide-composable/subscription.md    |  4 ++--
 8 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/packages/docs/src/guide-composable/mutation.md b/packages/docs/src/guide-composable/mutation.md
index a8f6ed5..5f04452 100644
--- a/packages/docs/src/guide-composable/mutation.md
+++ b/packages/docs/src/guide-composable/mutation.md
@@ -213,7 +213,7 @@ Our component now looks like:
 
 ```vue{2,8,16-20,23,32,34}
 <script>
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 import { useMutation } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
diff --git a/packages/docs/src/guide-composable/query.md b/packages/docs/src/guide-composable/query.md
index 0903b99..91e3360 100644
--- a/packages/docs/src/guide-composable/query.md
+++ b/packages/docs/src/guide-composable/query.md
@@ -129,7 +129,7 @@ If you want to directly access the data object, use `result.value`:
 
 ```vue{2,19-21}
 <script>
-import { watch } from '@vue/composition-api'
+import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -158,7 +158,7 @@ In this example, you could also watch the `Ref` directly:
 
 ```vue{19-20}
 <script>
-import { watch } from '@vue/composition-api'
+import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -450,7 +450,7 @@ Let's say we want to sort our users on their last names:
 
 ```vue{2,19-21,24,34,35}
 <script>
-import { computed } from '@vue/composition-api'
+import { computed } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -569,7 +569,7 @@ This will re-fetch the query each time a property from the `variables` object ch
 Alternatively, you can pass a `Ref` directly:
 
 ```js
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 ```
 
 ```js{1-3,12}
@@ -598,7 +598,7 @@ function selectUser (id) {
 You can also pass a reactive object:
 
 ```js
-import { reactive } from '@vue/composition-api'
+import { reactive } from 'vue'
 ```
 
 ```js{1,15}
diff --git a/packages/docs/src/guide-composable/setup.md b/packages/docs/src/guide-composable/setup.md
index d92183c..87bc376 100644
--- a/packages/docs/src/guide-composable/setup.md
+++ b/packages/docs/src/guide-composable/setup.md
@@ -14,8 +14,6 @@ Or:
 yarn add @vue/apollo-composable
 ```
 
-Note: `@vue/apollo-composable` supports Vue 2 thanks to [Vue Demi](https://github.com/vueuse/vue-demi).
-
 ## 2. Connect Apollo Client to Vue
 
 ### Vue 2
@@ -35,6 +33,10 @@ const app = new Vue({
 })
 ```
 
+::: warning
+In the rest of the guide, we will show code examples with Vue 3. If you need Vue 2, you might want to import the Composition API functions from `'@vue/composition-api'` instead of `'vue'`.
+:::
+
 ### Vue 3
 
 ```js
@@ -55,7 +57,7 @@ const app = createApp({
 You can also provide multiple Apollo Client instances to be used in your application. In this case, it's recommended to provide a `default` one:
 
 ```js
-import { provide } from '@vue/composition-api'
+import { provide } from 'vue'
 import { ApolloClients } from '@vue/apollo-composable'
 
 const app = new Vue({
diff --git a/packages/docs/src/guide-composable/subscription.md b/packages/docs/src/guide-composable/subscription.md
index c3d56c6..d49e690 100644
--- a/packages/docs/src/guide-composable/subscription.md
+++ b/packages/docs/src/guide-composable/subscription.md
@@ -151,7 +151,7 @@ We can then `watch` the result as new data is received:
 
 ```vue{2,16-20}
 <script>
-import { watch } from "@vue/composition-api";
+import { watch } from "vue";
 import { useSubscription } from "@vue/apollo-composable";
 
 export default {
@@ -183,7 +183,7 @@ For example, we could display the list of messages as we receive them:
 
 ```vue{2,7,19,24-26,31-39}
 <script>
-import { watch, ref } from "@vue/composition-api";
+import { watch, ref } from "vue";
 import { useSubscription } from "@vue/apollo-composable";
 
 export default {
diff --git a/packages/docs/src/zh-cn/guide-composable/mutation.md b/packages/docs/src/zh-cn/guide-composable/mutation.md
index fa879f4..165c811 100644
--- a/packages/docs/src/zh-cn/guide-composable/mutation.md
+++ b/packages/docs/src/zh-cn/guide-composable/mutation.md
@@ -213,7 +213,7 @@ sendMessage()
 
 ```vue{2,8,16-20,23,32,34}
 <script>
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 import { useMutation } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
diff --git a/packages/docs/src/zh-cn/guide-composable/query.md b/packages/docs/src/zh-cn/guide-composable/query.md
index dce7ee9..d632cab 100644
--- a/packages/docs/src/zh-cn/guide-composable/query.md
+++ b/packages/docs/src/zh-cn/guide-composable/query.md
@@ -129,7 +129,7 @@ export default {
 
 ```vue{2,19-21}
 <script>
-import { watch } from '@vue/composition-api'
+import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -158,7 +158,7 @@ export default {
 
 ```vue{19-20}
 <script>
-import { watch } from '@vue/composition-api'
+import { watch } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -450,7 +450,7 @@ const users = useResult(result)
 
 ```vue{2,19-21,24,34,35}
 <script>
-import { computed } from '@vue/composition-api'
+import { computed } from 'vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 
@@ -569,7 +569,7 @@ function selectUser (id) {
 另外，你可以直接传递 `Ref`：
 
 ```js
-import { ref } from '@vue/composition-api'
+import { ref } from 'vue'
 ```
 
 ```js{1-3,12}
@@ -598,7 +598,7 @@ function selectUser (id) {
 你也可以传递一个响应式对象：
 
 ```js
-import { reactive } from '@vue/composition-api'
+import { reactive } from 'vue'
 ```
 
 ```js{1,15}
diff --git a/packages/docs/src/zh-cn/guide-composable/setup.md b/packages/docs/src/zh-cn/guide-composable/setup.md
index d49b911..6d376ae 100644
--- a/packages/docs/src/zh-cn/guide-composable/setup.md
+++ b/packages/docs/src/zh-cn/guide-composable/setup.md
@@ -19,7 +19,7 @@ yarn add @vue/apollo-composable
 你需要在根实例中提供一个默认的 Apollo Client 实例：
 
 ```js
-import { provide } from '@vue/composition-api'
+import { provide } from 'vue'
 import { DefaultApolloClient } from '@vue/apollo-composable'
 
 const app = new Vue({
@@ -36,7 +36,7 @@ const app = new Vue({
 你也可以提供为应用提供多个可用的 Apollo Client 实例。在这种情况下，建议提供一个 `default` 值：
 
 ```js
-import { provide } from '@vue/composition-api'
+import { provide } from 'vue'
 import { ApolloClients } from '@vue/apollo-composable'
 
 const app = new Vue({
diff --git a/packages/docs/src/zh-cn/guide-composable/subscription.md b/packages/docs/src/zh-cn/guide-composable/subscription.md
index 8801041..589d760 100644
--- a/packages/docs/src/zh-cn/guide-composable/subscription.md
+++ b/packages/docs/src/zh-cn/guide-composable/subscription.md
@@ -150,7 +150,7 @@ export default {
 
 ```vue{2,16-20}
 <script>
-import { watch } from "@vue/composition-api";
+import { watch } from "vue";
 import { useSubscription } from "@vue/apollo-composable";
 
 export default {
@@ -182,7 +182,7 @@ export default {
 
 ```vue{2,7,19,24-26,31-39}
 <script>
-import { watch, ref } from "@vue/composition-api";
+import { watch, ref } from "vue";
 import { useSubscription } from "@vue/apollo-composable";
 
 export default {