Apollo Client 3 updates

.github/ISSUE_TEMPLATE/bug_report.md

@@ -23,7 +23,7 @@ A clear and concise description of what you expected to happen.
 **Versions**
 vue:
 vue-apollo:
-apollo-client:
+@apollo/client:
 
 **Additional context**
 Add any other context about the problem here.

build/rollup.config.base.js

@@ -23,5 +23,5 @@ export default {
       VERSION: JSON.stringify(config.version),
     }),
   ],
-  external: ['apollo-client', 'apollo-link', 'graphql-tag'],
+  external: ['@apollo/client'],
 }

docs/guide/apollo/README.md

@@ -48,7 +48,7 @@ In the `apollo` object, add an attribute for each property you want to feed with
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   apollo: {

docs/guide/apollo/pagination.md

@@ -31,7 +31,7 @@ Example:
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 const pageSize = 10
 

docs/guide/apollo/queries.md

@@ -15,7 +15,7 @@ In the `apollo` object, add an attribute for each property you want to feed with
 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:

docs/guide/apollo/subscriptions.md

@@ -7,18 +7,19 @@
 To enable the websocket-based subscription, a bit of additional setup is required:
 
 ```
-npm install --save apollo-link-ws apollo-utilities
+npm install --save apollo-link-ws
 ```
 
 ```js
 import Vue from 'vue'
-import { ApolloClient } from 'apollo-client'
-import { HttpLink } from 'apollo-link-http'
-import { InMemoryCache } from 'apollo-cache-inmemory'
-// New Imports
-import { split } from 'apollo-link'
+import {
+  ApolloClient,
+  HttpLink,
+  InMemoryCache,
+  split,
+  getMainDefinition
+} from '@apollo/client'
 import { WebSocketLink } from 'apollo-link-ws'
-import { getMainDefinition } from 'apollo-utilities'
 
 import VueApollo from 'vue-apollo'
 

docs/guide/components/query.md

@@ -1,6 +1,6 @@
 # ApolloQuery
 
-You can use the `ApolloQuery` (or `apollo-query`) component to have watched Apollo queries directly in your template. 
+You can use the `ApolloQuery` (or `apollo-query`) component to have watched Apollo queries directly in your template.
 After reading this page, see the [API Reference](../../api/apollo-query.md) for all the possible options.
 
 ## Query gql tag
@@ -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 {

docs/guide/installation.md

@@ -18,72 +18,27 @@ Then you can skip to next section: [Basic Usage](./apollo/).
 
 ### 1. Apollo Client
 
-You can either use [Apollo Boost](#apollo-boost) or [Apollo Client directly](#apollo-client-full-configuration) (more configuration work).
-
-#### Apollo Boost
-
-Apollo Boost is a zero-config way to start using Apollo Client. It includes some sensible defaults, such as our recommended `InMemoryCache` and `HttpLink`, which come configured for you with our recommended settings and it's perfect for starting to develop fast.
-
-Install it alongside `vue-apollo` and `graphql`: 
-
 ```
-npm install --save vue-apollo graphql apollo-boost
+npm install --save vue-apollo graphql @apollo/client
 ```
 
 Or:
 
 ```
-yarn add vue-apollo graphql apollo-boost
+yarn add vue-apollo graphql @apollo/client
 ```
 
 In your app, create an `ApolloClient` instance:
 
 ```js
-import ApolloClient from 'apollo-boost'
+import { ApolloClient } from '@apollo/client';
 
 const apolloClient = new ApolloClient({
   // You should use an absolute URL here
   uri: 'https://api.graphcms.com/simple/v1/awesomeTalksClone'
 })
 ```
 
-#### Apollo client full configuration
-
-If you want some more fine grained control install these packages instead of apollo-boost:
-
-```
-npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
-```
-
-Or:
-
-```
-yarn add vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
-```
-
-In your app, create an `ApolloClient` instance:
-
-```js
-import { ApolloClient } from 'apollo-client'
-import { createHttpLink } from 'apollo-link-http'
-import { InMemoryCache } from 'apollo-cache-inmemory'
-
-// HTTP connection to the API
-const httpLink = createHttpLink({
-  // You should use an absolute URL here
-  uri: 'http://localhost:3020/graphql',
-})
-
-// Cache implementation
-const cache = new InMemoryCache()
-
-// Create the apollo client
-const apolloClient = new ApolloClient({
-  link: httpLink,
-  cache,
-})
-```
-
 ### 2. Install the plugin into Vue
 
 ```js

docs/guide/local-state.md

@@ -25,7 +25,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 {
@@ -92,11 +92,10 @@ const userQuery = gql`
 
 To initialize an Apollo cache in your application, you will need to use an `InMemoryCache` constructor. First, let's import it to your main file:
 
-```js{4,6}
+```js{4,5}
 // main.js
 
-import ApolloClient from 'apollo-boost';
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
 
 const cache = new InMemoryCache();
 ```
@@ -147,7 +146,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`
   {

docs/guide/ssr.md

@@ -121,13 +121,11 @@ If `ssr` is false, we try to restore the state of the Apollo cache with `cache.r
 
 Here is an example:
 
-```js{21-30}
+```js
 // apollo.js
 
 import Vue from 'vue'
-import { ApolloClient } from 'apollo-client'
-import { HttpLink } from 'apollo-link-http'
-import { InMemoryCache } from 'apollo-cache-inmemory'
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 import VueApollo from 'vue-apollo'
 
 // Install the vue plugin

docs/zh-cn/guide/apollo/README.md

@@ -48,7 +48,7 @@ export default {
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 export default {
   apollo: {

docs/zh-cn/guide/apollo/pagination.md

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 
 const pageSize = 10
 

docs/zh-cn/guide/apollo/queries.md

@@ -15,7 +15,7 @@ query myHelloQueryName {
 使用 `gql` 编写你的 GraphQL 查询：
 
 ```js
-import gql from 'graphql-tag'
+import { gql } from '@apollo/client'
 ```
 
 直接将 [gql](https://github.com/apollographql/graphql-tag) 查询作为值：

docs/zh-cn/guide/apollo/subscriptions.md

@@ -7,18 +7,19 @@
 要启用基于 websocket 的订阅，需要做一些额外的设置：
 
 ```
-npm install --save apollo-link-ws apollo-utilities
+npm install --save apollo-link-ws
 ```
 
 ```js
 import Vue from 'vue'
-import { ApolloClient } from 'apollo-client'
-import { HttpLink } from 'apollo-link-http'
-import { InMemoryCache } from 'apollo-cache-inmemory'
-// 新的引入文件
-import { split } from 'apollo-link'
+import {
+  ApolloClient,
+  HttpLink,
+  InMemoryCache,
+  split,
+  getMainDefinition
+} from '@apollo/client'
 import { WebSocketLink } from 'apollo-link-ws'
-import { getMainDefinition } from 'apollo-utilities'
 
 import VueApollo from 'vue-apollo'
 

docs/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 {

docs/zh-cn/guide/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 {
@@ -92,11 +92,10 @@ const userQuery = gql`
 
 要在应用中初始化 Apollo 缓存，需要使用 `InMemoryCache` 构造函数。首先，将它导入你的主文件：
 
-```js{4,6}
+```js{4,5}
 // main.js
 
-import ApolloClient from 'apollo-boost';
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
 
 const cache = new InMemoryCache();
 ```
@@ -147,7 +146,7 @@ cache.writeData({
 ```js
 // App.vue
 
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client'
 
 const todoItemsQuery = gql`
   {

docs/zh-cn/guide/ssr.md

@@ -121,13 +121,11 @@ export default {
 
 这里是一个示例：
 
-```js{21-30}
+```js
 // apollo.js
 
 import Vue from 'vue'
-import { ApolloClient } from 'apollo-client'
-import { HttpLink } from 'apollo-link-http'
-import { InMemoryCache } from 'apollo-cache-inmemory'
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 import VueApollo from 'vue-apollo'
 
 // 安装 vue 插件

package.json

@@ -38,26 +38,21 @@
   },
   "homepage": "https://github.com/Akryum/vue-apollo#readme",
   "peerDependencies": {
-    "apollo-client": "^2.0.0",
-    "apollo-link": "^1.0.0",
-    "graphql-tag": "^2.10.1"
+    "@apollo/client": "^3.0.0-beta.7"
   },
   "dependencies": {
     "chalk": "^2.4.2",
     "serialize-javascript": "^2.1.0",
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
+    "@apollo/client": "^3.0.0-beta.7",
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-transform-for-of": "^7.4.4",
     "@babel/preset-env": "^7.1.0",
     "@types/graphql": "^14.0.1",
     "@vue/test-utils": "^1.0.0-beta.25",
-    "apollo-cache-inmemory": "^1.2.9",
-    "apollo-client": "^2.4.1",
-    "apollo-link": "^1.0.3",
-    "apollo-link-http": "^1.2.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "cross-env": "^6.0.0",
@@ -68,7 +63,6 @@
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-standard": "^4.0.0",
     "graphql": "^14.0.2",
-    "graphql-tag": "^2.5.0",
     "jest": "^24.8.0",
     "nodemon": "^1.18.4",
     "rimraf": "^3.0.0",