feat: strict tsconfig and @apollo/client v3

Author: javiertury

.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.

packages/docs/src/guide-advanced/ssr.md

@@ -137,9 +137,7 @@ Here is an example:
 // 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/core'
 import VueApollo from '@vue/apollo-option'
 
 // Install the vue plugin

packages/docs/src/guide-composable/error-handling.md

@@ -55,10 +55,10 @@ export default {
 
 ## Network Errors
 
-When using Apollo Link, the ability to handle network errors is way more powerful. The best way to do this is to use the `apollo-link-error` to catch and handle server errors, network errors, and GraphQL errors. If you would like to combine with other links, see [composing links](https://www.apollographql.com/docs/link/composition).
+When using Apollo Link, the ability to handle network errors is way more powerful. The best way to do this is to use the `@apollo/client/link/error` to catch and handle server errors, network errors, and GraphQL errors. If you would like to combine with other links, see [composing links](https://www.apollographql.com/docs/link/composition).
 
 ```js
-import { onError } from 'apollo-link-error'
+import { onError } from '@apollo/client/link/error'
 
 const link = onError(({ graphQLErrors, networkError }) => {
   if (graphQLErrors)
@@ -75,7 +75,7 @@ const link = onError(({ graphQLErrors, networkError }) => {
 You can also use the `logErrorMessages` function from the `@vue/apollo-util` package to format the error in the browser console:
 
 ```js
-import { onError } from 'apollo-link-error'
+import { onError } from '@apollo/client/link/error'
 import { logErrorMessages } from '@vue/apollo-util'
 
 const link = onError(error => {
@@ -90,7 +90,7 @@ Example error:
 If you are using Webpack or Vue CLI, it's a good idea to only use it in development:
 
 ```js
-import { onError } from 'apollo-link-error'
+import { onError } from '@apollo/client/link/error'
 import { logErrorMessages } from '@vue/apollo-util'
 
 const link = onError(error => {
@@ -121,4 +121,4 @@ onError(({ response, operation }) => {
     response.errors = null
   }
 })
-```
+```

packages/docs/src/guide-composable/fragments.md

@@ -203,105 +203,27 @@ query {
 }
 ```
 
-In the query above, `allPeople` returns a result of type `Character[]`. Both `Jedi` and `Droid` are possible concrete types of `Character`, but on the client there is no way to know that without having some information about the schema. By default, Apollo Client's cache will use a heuristic fragment matcher, which assumes that a fragment matched if the result included all the fields in its selection set, and didn't match when any field was missing. This works in most cases, but it also means that Apollo Client cannot check the server response for you, and it cannot tell you when you're manually writing invalid data into the store using `update`, `updateQuery`, `writeQuery`, etc. Also, the heuristic fragment matcher will not work accurately when using fragments with unions or interfaces. Apollo Client will let you know this with a console warning (in development), if it attempts to use the default heuristic fragment matcher with unions/interfaces. The `IntrospectionFragmentMatcher` is the solution for working with unions/interfaces, and is explained in more detail below.
+In the query above, `allPeople` returns a result of type `Character[]`. Both `Jedi` and `Droid` are possible concrete types of `Character`, but on the client there is no way to know that without having some information about the schema. By default, Apollo Client's cache will use a heuristic fragment matcher, which assumes that a fragment matched if the result included all the fields in its selection set, and didn't match when any field was missing. This works in most cases, but it also means that Apollo Client cannot check the server response for you, and it cannot tell you when you're manually writing invalid data into the store using `update`, `updateQuery`, `writeQuery`, etc. To inform the cache store about these polymorphic relationships, you need to pass `possibleTypes` option to `InMemoryCache` below.
 
 The section below explains how to pass the necessary schema knowledge to the Apollo Client cache so unions and interfaces can be accurately matched and results validated before writing them into the store.
 
-To support result validation and accurate fragment matching on unions and interfaces, a special fragment matcher called the `IntrospectionFragmentMatcher` can be used. If there are any changes related to union or interface types in your schema, you will have to update the fragment matcher accordingly.
-
-We recommend setting up a build step that extracts the necessary information from the schema into a JSON file, where it can be imported from when constructing the fragment matcher. To set it up, follow the three steps below:
+We recommend setting up a build step that extracts the necessary information from the schema into a JSON file, where it can be imported from when constructing the cache. To set it up, follow the steps below:
 
 1. Query your server / schema to obtain the necessary information about unions and interfaces and write it to a file.
 
-You can automate this or set this as a script to run at build time.
-
-If you want to auto-generate the introspection result, there's a tool called [GraphQL Code Generator](https://graphql-code-generator.com) that does it. Define where your GraphQL Schema is available and where to write the file:
-
-```yaml
-# codegen.yml
-schema: YOUR_API
-overwrite: true
-generates:
-  ./fragmentTypes.json:
-    plugins:
-      - fragment-matcher
-```
-
-With all of that, you simply run:
-
-```shell
-gql-gen
-```
-
-> To learn more, you can read the ["Fragment Matcher" chapter](https://graphql-code-generator.com/docs/plugins/fragment-matcher).
-
-In order to introspect the server manually, set this as a script to run at build time.
-
-```js
-const fetch = require('node-fetch')
-const fs = require('fs')
-
-fetch(`${YOUR_API_HOST}/graphql`, {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({
-    variables: {},
-    query: `
-      {
-        __schema {
-          types {
-            kind
-            name
-            possibleTypes {
-              name
-            }
-          }
-        }
-      }
-    `,
-  }),
-})
-  .then(result => result.json())
-  .then(result => {
-    // here we're filtering out any type information unrelated to unions or interfaces
-    const filteredData = result.data.__schema.types.filter(
-      type => type.possibleTypes !== null,
-    )
-    result.data.__schema.types = filteredData
-    fs.writeFile('./fragmentTypes.json', JSON.stringify(result.data), err => {
-      if (err) {
-        console.error('Error writing fragmentTypes file', err)
-      } else {
-        console.log('Fragment types successfully extracted!')
-      }
-    })
-  })
-```
-
-2. Create a new IntrospectionFragment matcher by passing in the `fragmentTypes.json` file you just created. You'll want to do this in the same file where you initialize the cache for Apollo Client.
+Read the documentation about how to [extract possibleTypes automatically](https://www.apollographql.com/docs/react/data/fragments/#generating-possibletypes-automatically) using an introspection query. Or use the plugin [fragment-matcher](https://graphql-code-generator.com/docs/plugins/fragment-matcher) for graphql-codegen and configure it for [apollo client 3](https://graphql-code-generator.com/docs/plugins/fragment-matcher#usage-with-apollo-client-3).
 
-```js
-import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
-import introspectionQueryResultData from './fragmentTypes.json'
-
-const fragmentMatcher = new IntrospectionFragmentMatcher({
-  introspectionQueryResultData
-})
-```
-
-3. Pass in the newly created `IntrospectionFragmentMatcher` to configure your cache during construction. Then, you pass your newly configured cache to `ApolloClient` to complete the process.
+2. Use `possibleTypes.json` to configure your cache during construction. Then, you pass your newly configured cache to `ApolloClient` to complete the process.
 
 ```js
-import ApolloClient from 'apollo-client'
-import { InMemoryCache } from 'apollo-cache-inmemory'
-import { HttpLink } from 'apollo-link-http'
-
-// add fragmentMatcher code from step 2 here
+import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client/core'
+import possibleTypes from './possibleTypes.json'
 
-const cache = new InMemoryCache({ fragmentMatcher })
+const cache = new InMemoryCache({ possibleTypes })
+const httpLink = createHttpLink({ uri });
 
 const client = new ApolloClient({
   cache,
-  link: new HttpLink(),
+  link: httpLink,
 })
 ```

packages/docs/src/guide-composable/subscription.md

@@ -53,26 +53,14 @@ A future version of Apollo or GraphQL might include support for live queries, wh
 
 ## Client setup
 
-The most popular transport for GraphQL subscriptions today is [`subscriptions-transport-ws`](https://github.com/apollographql/subscriptions-transport-ws). This package is maintained by the Apollo community, but can be used with any client or server GraphQL implementation. In this article, we'll explain how to set it up on the client, but you'll also need a server implementation. You can [read about how to use subscriptions with a JavaScript server](https://www.apollographql.com/docs/graphql-subscriptions/setup), or enjoy subscriptions set up out of the box if you are using a GraphQL backend as a service like [Graphcool](https://www.graph.cool/docs/tutorials/worldchat-subscriptions-example-ui0eizishe/).
+In this article, we'll explain how to set it up on the client, but you'll also need a server implementation. You can [read about how to use subscriptions with a JavaScript server](https://www.apollographql.com/docs/graphql-subscriptions/setup), or enjoy subscriptions set up out of the box if you are using a GraphQL backend as a service like [Graphcool](https://www.graph.cool/docs/tutorials/worldchat-subscriptions-example-ui0eizishe/).
 
 Let's look at how to add support for this transport to Apollo Client.
 
-First, install the WebSocket Apollo Link (`apollo-link-ws`) from npm:
-
-```shell
-npm install --save apollo-link-ws subscriptions-transport-ws
-```
-
-Or:
-
-```shell
-yarn add apollo-link-ws subscriptions-transport-ws
-```
-
-Then, initialize a GraphQL subscriptions transport link:
+First, initialize a GraphQL web socket link:
 
 ```js
-import { WebSocketLink } from "apollo-link-ws";
+import { WebSocketLink } from "@apollo/client/link/ws";
 
 const wsLink = new WebSocketLink({
   uri: `ws://localhost:5000/`,
@@ -85,10 +73,9 @@ const wsLink = new WebSocketLink({
 We need to either use the `WebSocketLink` or the `HttpLink` depending on the operation type:
 
 ```js
-import { split } from "apollo-link";
-import { HttpLink } from "apollo-link-http";
-import { WebSocketLink } from "apollo-link-ws";
-import { getMainDefinition } from "apollo-utilities";
+import { HttpLink, split } from "@apollo/client/core";
+import { WebSocketLink } from "@apollo/client/link/ws";
+import { getMainDefinition } from "@apollo/client/utilities";
 
 // Create an http link:
 const httpLink = new HttpLink({
@@ -569,7 +556,7 @@ subscribeToMore(() => ({
 In many cases it is necessary to authenticate clients before allowing them to receive subscription results. To do this, the `SubscriptionClient` constructor accepts a `connectionParams` field, which passes a custom object that the server can use to validate the connection before setting up any subscriptions.
 
 ```js
-import { WebSocketLink } from 'apollo-link-ws';
+import { WebSocketLink } from "@apollo/client/link/ws";
 
 const wsLink = new WebSocketLink({
   uri: `ws://localhost:5000/`,

packages/docs/src/guide-option/subscriptions.md

@@ -4,21 +4,11 @@
 
 *For the server implementation, you can take a look at [this simple example](https://github.com/Akryum/apollo-server-example).*
 
-To enable the websocket-based subscription, a bit of additional setup is required:
-
-```
-npm install --save apollo-link-ws apollo-utilities
-```
-
 ```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 { WebSocketLink } from 'apollo-link-ws'
-import { getMainDefinition } from 'apollo-utilities'
+import { ApolloClient, HttpLink, InMemoryCache, split } from '@apollo/client/core'
+import { WebSocketLink } from '@apollo/client/link/ws'
+import { getMainDefinition } from '@apollo/client/utilities'
 
 import VueApollo from '@vue/apollo-option'
 

packages/docs/src/guide/installation.md

@@ -16,55 +16,20 @@ Then you can skip to next section: [Basic Usage](./apollo/).
 
 ## Manual installation
 
-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`: 
-
-```shell
-npm install --save graphql apollo-boost
-```
-
-Or:
-
-```shell
-yarn add graphql apollo-boost
-```
-
-In your app, create an `ApolloClient` instance:
-
-```js
-import ApolloClient from 'apollo-boost'
-
-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:
-
 ```shell
-npm install --save graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
+npm install --save graphql graphql-tag @apollo/client
 ```
 
 Or:
 
 ```shell
-yarn add graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
+yarn add graphql graphql-tag @apollo/client
 ```
 
 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'
+import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
 
 // HTTP connection to the API
 const httpLink = createHttpLink({

packages/docs/src/migration/README.md

@@ -1,4 +1,4 @@
-# From vue-apollo 2 and Apollo 1
+# From vue-apollo 3
 
 The main changes are related to the apollo client setup. Your components code shouldn't be affected. Apollo now uses a more flexible [apollo-link](https://github.com/apollographql/apollo-link) system that allows compositing multiple links together to add more features (like batching, offline support and more).
 
@@ -9,13 +9,13 @@ The main changes are related to the apollo client setup. Your components code sh
 Before:
 
 ```
-npm install --save vue-apollo apollo-client
+npm install --save vue-apollo@next graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
 ```
 
 After:
 
 ```
-npm install --save vue-apollo@next graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
+npm install --save vue-apollo@next @apollo/client
 ```
 
 ### Imports
@@ -24,17 +24,17 @@ Before:
 
 ```js
 import Vue from 'vue'
-import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client'
+import { ApolloClient } from 'apollo-client'
+import { HttpLink } from 'apollo-link-http'
+import { InMemoryCache } from 'apollo-cache-inmemory'
 import VueApollo from '@vue/apollo-option'
 ```
 
 After:
 
 ```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/core'
 import VueApollo from '@vue/apollo-option'
 ```
 
@@ -168,29 +168,31 @@ Query reducers have been removed. Use the `update` API to update the cache now.
 Before:
 
 ```
-npm install --save subscriptions-transport-ws
+npm install --save apollo-link-ws apollo-utilities
 ```
 
 After:
 
 ```
-npm install --save apollo-link-ws apollo-utilities
+npm install --save @apollo/client
 ```
 
 ### Imports
 
 Before:
 
 ```js
-import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'
+import { split } from 'apollo-link'
+import { WebSocketLink } from 'apollo-link-ws'
+import { getMainDefinition } from 'apollo-utilities'
 ```
 
 After:
 
 ```js
-import { split } from 'apollo-link'
-import { WebSocketLink } from 'apollo-link-ws'
-import { getMainDefinition } from 'apollo-utilities'
+import { split } from '@apollo/client/core'
+import { WebSocketLink } from '@apollo/client/link/ws'
+import { getMainDefinition } from '@apollo/client/utilities'
 ```
 
-Learn more at the [official apollo documentation](https://www.apollographql.com/docs/react/2.0-migration.html).
+Learn more at the [official apollo documentation](https://www.apollographql.com/docs/react/2.0-migration.html).