From fabd27ebe7b8ebac313ded8086cf4d4376b63d3b Mon Sep 17 00:00:00 2001
From: Guillaume <guillaume.b.chau@gmail.com>
Date: Sun, 4 Jul 2021 22:31:42 +0200
Subject: [PATCH] docs: update setup to Vue 3

---
 packages/docs/src/guide-components/setup.md | 46 +++++++++++++++------
 packages/docs/src/guide-option/setup.md     | 34 ++++++++++-----
 packages/test-e2e/src/main.js               |  2 +-
 3 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/packages/docs/src/guide-components/setup.md b/packages/docs/src/guide-components/setup.md
index 67d4655..d39883a 100644
--- a/packages/docs/src/guide-components/setup.md
+++ b/packages/docs/src/guide-components/setup.md
@@ -14,18 +14,25 @@ Or:
 yarn add @vue/apollo-option @vue/apollo-components
 ```
 
-## 2. Install the plugin into Vue
+## 2. Create the Apollo client
 
 ```js
-import Vue from 'vue'
-import VueApollo from '@vue/apollo-option'
-import VueApolloComponents from '@vue/apollo-components'
+import { ApolloClient, InMemoryCache } from '@apollo/client/core'
+
+const cache = new InMemoryCache()
+
+const apolloClient = new ApolloClient({
+  cache,
+  uri: 'http://localhost:4042/graphql',
+})
 
-Vue.use(VueApollo)
-Vue.use(VueApolloComponents)
 ```
 
-## 3. Inject the Apollo provider
+::: warning
+Use the `@apollo/client/core` import path otherwise you will also import React.
+:::
+
+## 3. Create the Apollo provider
 
 The provider holds the Apollo client instances that can then be used by all the child components.
 
@@ -35,15 +42,28 @@ const apolloProvider = new VueApollo({
 })
 ```
 
-Add it to your app with the `apolloProvider` option:
+## 4. Add the provider to your app
+
+Add it to your app with the `app.use` function:
 
 ```js
-new Vue({
-  el: '#app',
-  // inject apolloProvider here like vue-router or vuex
-  apolloProvider,
-  render: h => h(App),
+import { createApp, h } from 'vue'
+
+const app = createApp({
+  render: () => h(App),
 })
+
+app.use(apolloProvider)
+```
+
+## 5. Add the components to your app
+
+```js
+import VueApolloComponents from '@vue/apollo-components'
+
+// ...
+
+app.use(VueApolloComponents)
 ```
 
 You are now ready to use Apollo in your components!
diff --git a/packages/docs/src/guide-option/setup.md b/packages/docs/src/guide-option/setup.md
index 1eae69d..3e013b1 100644
--- a/packages/docs/src/guide-option/setup.md
+++ b/packages/docs/src/guide-option/setup.md
@@ -14,16 +14,25 @@ Or:
 yarn add @vue/apollo-option
 ```
 
-## 2. Install the plugin into Vue
+## 2. Create the Apollo client
 
 ```js
-import Vue from 'vue'
-import VueApollo from '@vue/apollo-option'
+import { ApolloClient, InMemoryCache } from '@apollo/client/core'
+
+const cache = new InMemoryCache()
+
+const apolloClient = new ApolloClient({
+  cache,
+  uri: 'http://localhost:4042/graphql',
+})
 
-Vue.use(VueApollo)
 ```
 
-## 3. Inject the Apollo provider
+::: warning
+Use the `@apollo/client/core` import path otherwise you will also import React.
+:::
+
+## 3. Create the Apollo provider
 
 The provider holds the Apollo client instances that can then be used by all the child components.
 
@@ -33,15 +42,18 @@ const apolloProvider = new VueApollo({
 })
 ```
 
-Add it to your app with the `apolloProvider` option:
+## 4. Add the provider to your app
+
+Add it to your app with the `app.use` function:
 
 ```js
-new Vue({
-  el: '#app',
-  // inject apolloProvider here like vue-router or vuex
-  apolloProvider,
-  render: h => h(App),
+import { createApp, h } from 'vue'
+
+const app = createApp({
+  render: () => h(App),
 })
+
+app.use(apolloProvider)
 ```
 
 You are now ready to use Apollo in your components!
diff --git a/packages/test-e2e/src/main.js b/packages/test-e2e/src/main.js
index 0278a9a..302b3e3 100644
--- a/packages/test-e2e/src/main.js
+++ b/packages/test-e2e/src/main.js
@@ -8,6 +8,6 @@ import { apolloProvider } from './vue-apollo'
 const app = createApp(App)
 app.use(router)
 app.use(store)
-app.use(VueApolloComponents)
 app.use(apolloProvider)
+app.use(VueApolloComponents)
 app.mount('#app')