Upgrade GraphQL to 16

package.json

@@ -62,7 +62,7 @@
     "npm": "^7.20.3 || ^8.0.0"
   },
   "peerDependencies": {
-    "graphql": "^14.0.0 || ^15.0.0",
+    "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "subscriptions-transport-ws": "^0.9.0"
   },
@@ -81,6 +81,7 @@
     "@wry/trie": "^0.3.0",
     "graphql-tag": "^2.12.3",
     "hoist-non-react-statics": "^3.3.2",
+    "npm": "^7.24.2",
     "optimism": "^0.16.1",
     "prop-types": "^15.7.2",
     "symbol-observable": "^4.0.0",
@@ -108,7 +109,7 @@
     "crypto-hash": "1.3.0",
     "fetch-mock": "9.11.0",
     "glob": "7.2.0",
-    "graphql": "15.7.2",
+    "graphql": "^16.0.0",
     "jest": "27.3.1",
     "jest-fetch-mock": "3.0.3",
     "jest-junit": "13.0.0",

src/__tests__/ApolloClient.ts

@@ -7,6 +7,7 @@ import {
   QueryOptions,
   makeReference,
 } from '../core';
+import { Kind } from "graphql";
 
 import { Observable } from '../utilities';
 import { ApolloLink } from '../link/core';
@@ -2241,7 +2242,7 @@ describe('ApolloClient', () => {
         cache: new InMemoryCache(),
         defaultOptions: {
           query: {
-            query: {kind: 'Document', definitions: []},
+            query: {kind: Kind.DOCUMENT, definitions: []},
             variables: {foo: 'bar'},
             errorPolicy: 'none',
             context: null,

src/core/QueryManager.ts

@@ -1,6 +1,8 @@
 import { invariant, InvariantError } from '../utilities/globals';
 
 import { DocumentNode } from 'graphql';
+// TODO(brian): A hack until this issue is resolved (https://github.com/graphql/graphql-js/issues/3356)
+type OperationTypeNode = any;
 import { equal } from '@wry/equality';
 
 import { ApolloLink, execute, FetchResult } from '../link/core';
@@ -572,7 +574,7 @@ export class QueryManager<TStore> {
           definitions: transformed.definitions.map(def => {
             if (def.kind === "OperationDefinition" &&
                 def.operation !== "query") {
-              return { ...def, operation: "query" };
+              return { ...def, operation: "query" as OperationTypeNode };
             }
             return def;
           }),

src/link/core/types.ts

@@ -21,13 +21,13 @@ export interface Operation {
 }
 
 export interface FetchResult<
-  TData = { [key: string]: any },
-  C = Record<string, any>,
-  E = Record<string, any>
-> extends ExecutionResult {
-  data?: TData | null;
-  extensions?: E;
-  context?: C;
+  TData = Record<string, any>,
+  TContext = Record<string, any>,
+  TExtensions = Record<string, any>
+> extends ExecutionResult<TData, TExtensions> {
+  data?: TData | null | undefined;
+  extensions?: TExtensions;
+  context?: TContext;
 };
 
 export type NextLink = (operation: Operation) => Observable<FetchResult>;

src/link/http/__tests__/HttpLink.ts

@@ -130,7 +130,7 @@ describe('HttpLink', () => {
           expect(body).toBeUndefined();
           expect(method).toBe('GET');
           expect(uri).toBe(
-            '/data?query=query%20SampleQuery%20%7B%0A%20%20stub%20%7B%0A%20%20%20%20id%0A%20%20%7D%0A%7D%0A&operationName=SampleQuery&variables=%7B%22params%22%3A%22stub%22%7D&extensions=%7B%22myExtension%22%3A%22foo%22%7D',
+            '/data?query=query%20SampleQuery%20%7B%0A%20%20stub%20%7B%0A%20%20%20%20id%0A%20%20%7D%0A%7D&operationName=SampleQuery&variables=%7B%22params%22%3A%22stub%22%7D&extensions=%7B%22myExtension%22%3A%22foo%22%7D',
           );
         }),
         error: error => reject(error),
@@ -152,7 +152,7 @@ describe('HttpLink', () => {
           expect(body).toBeUndefined();
           expect(method).toBe('GET');
           expect(uri).toBe(
-            '/data?foo=bar&query=query%20SampleQuery%20%7B%0A%20%20stub%20%7B%0A%20%20%20%20id%0A%20%20%7D%0A%7D%0A&operationName=SampleQuery&variables=%7B%7D',
+            '/data?foo=bar&query=query%20SampleQuery%20%7B%0A%20%20stub%20%7B%0A%20%20%20%20id%0A%20%20%7D%0A%7D&operationName=SampleQuery&variables=%7B%7D',
           );
         }),
         error: error => reject(error),
@@ -178,7 +178,7 @@ describe('HttpLink', () => {
           expect(body).toBeUndefined();
           expect(method).toBe('GET');
           expect(uri).toBe(
-            '/data?query=query%20SampleQuery%20%7B%0A%20%20stub%20%7B%0A%20%20%20%20id%0A%20%20%7D%0A%7D%0A&operationName=SampleQuery&variables=%7B%7D',
+            '/data?query=query%20SampleQuery%20%7B%0A%20%20stub%20%7B%0A%20%20%20%20id%0A%20%20%7D%0A%7D&operationName=SampleQuery&variables=%7B%7D',
           );
         }),
       );
@@ -201,7 +201,7 @@ describe('HttpLink', () => {
           expect(body).toBeUndefined();
           expect(method).toBe('GET');
           expect(uri).toBe(
-            '/data?query=query%20SampleQuery%20%7B%0A%20%20stub%20%7B%0A%20%20%20%20id%0A%20%20%7D%0A%7D%0A&operationName=SampleQuery&variables=%7B%7D',
+            '/data?query=query%20SampleQuery%20%7B%0A%20%20stub%20%7B%0A%20%20%20%20id%0A%20%20%7D%0A%7D&operationName=SampleQuery&variables=%7B%7D',
           );
         }),
       );

src/link/schema/index.ts

@@ -63,14 +63,14 @@ export class SchemaLink extends ApolloLink {
           }
         }
 
-        return execute(
-          this.schema,
-          operation.query,
-          this.rootValue,
-          context,
-          operation.variables,
-          operation.operationName,
-        )
+        return execute({
+          schema: this.schema,
+          document: operation.query,
+          rootValue: this.rootValue,
+          contextValue: context,
+          variableValues: operation.variables,
+          operationName: operation.operationName,
+        });
       }).then(data => {
         if (!observer.closed) {
           observer.next(data);

src/react/components/__tests__/ssr/server.test.tsx

@@ -158,14 +158,12 @@ describe('SSR', () => {
     const apolloClient = new ApolloClient({
       link: new ApolloLink(config => {
         return new Observable(observer => {
-          execute(
-            Schema,
-            print(config.query),
-            null,
-            null,
-            config.variables,
-            config.operationName
-          )
+          execute({
+            schema: Schema,
+            source: print(config.query),
+            variableValues: config.variables,
+            operationName: config.operationName,
+          })
             .then(result => {
               observer.next(result);
               observer.complete();

src/react/hoc/__tests__/queries/errors.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, wait } from '@testing-library/react';
 import gql from 'graphql-tag';
+// @ts-ignore
 import { withState } from './recomposeWithState.js';
 import { DocumentNode } from 'graphql';
 

src/react/hoc/__tests__/ssr/server.test.tsx

@@ -110,14 +110,12 @@ describe('SSR', () => {
       const apolloClient = new ApolloClient({
         link: new ApolloLink(config => {
           return new Observable(observer => {
-            execute(
-              Schema,
-              print(config.query),
-              null,
-              null,
-              config.variables,
-              config.operationName
-            )
+            execute({
+              schema: Schema,
+              source: print(config.query),
+              variableValues: config.variables,
+              operationName: config.operationName
+            })
               .then(result => {
                 observer.next(result);
                 observer.complete();

src/testing/react/__tests__/__snapshots__/MockedProvider.test.tsx.snap

@@ -14,7 +14,6 @@ exports[`General use should error if the query in the mock and component do not
     __typename
   }
 }
-
 Expected variables: {"username":"mock_username"}
 ]
 `;
@@ -26,7 +25,6 @@ exports[`General use should error if the variables do not deep equal 1`] = `
     __typename
   }
 }
-
 Expected variables: {"username":"some_user","age":42}
 
 Failed to match 1 mock for this query, which had the following variables:
@@ -41,7 +39,6 @@ exports[`General use should error if the variables in the mock and component do
     __typename
   }
 }
-
 Expected variables: {"username":"other_user","age":<undefined>}
 
 Failed to match 1 mock for this query, which had the following variables:
@@ -67,7 +64,7 @@ Object {
 
 exports[`General use should pipe exceptions thrown in custom onError functions through the link chain 1`] = `[Error: oh no!]`;
 
-exports[`General use should return "Mocked response should contain" errors in response 1`] = `[Error: Mocked response should contain either result or error: {"query":"query GetUser($username: String!) {\\n  user(username: $username) {\\n    id\\n    __typename\\n  }\\n}\\n"}]`;
+exports[`General use should return "Mocked response should contain" errors in response 1`] = `[Error: Mocked response should contain either result or error: {"query":"query GetUser($username: String!) {\\n  user(username: $username) {\\n    id\\n    __typename\\n  }\\n}"}]`;
 
 exports[`General use should return "No more mocked responses" errors in response 1`] = `
 [Error: No more mocked responses for the query: query GetUser($username: String!) {
@@ -76,7 +73,6 @@ exports[`General use should return "No more mocked responses" errors in response
     __typename
   }
 }
-
 Expected variables: {}
 ]
 `;
@@ -88,7 +84,6 @@ exports[`General use should support custom error handling using setOnError 1`] =
     __typename
   }
 }
-
 Expected variables: {"username":"mock_username"}
 ]
 `;

src/utilities/common/errorHandling.ts

@@ -1,5 +1,5 @@
 import { ExecutionResult } from 'graphql';
 
-export function graphQLResultHasError(result: ExecutionResult): boolean {
+export function graphQLResultHasError(result: ExecutionResult<unknown>): boolean {
   return (result.errors && result.errors.length > 0) || false;
 }

src/utilities/graphql/fragments.ts

@@ -4,9 +4,12 @@ import {
   DocumentNode,
   FragmentDefinitionNode,
   InlineFragmentNode,
-  SelectionNode
+  SelectionNode,
+  OperationTypeNode,
 } from 'graphql';
 
+// TODO(brian): A hack until this issue is resolved (https://github.com/graphql/graphql-js/issues/3356)
+type Kind = any;
 /**
  * Returns a query document which adds a single query operation that only
  * spreads the target fragment inside of it.
@@ -75,15 +78,16 @@ export function getFragmentQueryDocument(
     ...document,
     definitions: [
       {
-        kind: 'OperationDefinition',
-        operation: 'query',
+        kind: 'OperationDefinition' as Kind,
+        // OperationTypeNode is an enum
+        operation: 'query' as OperationTypeNode,
         selectionSet: {
-          kind: 'SelectionSet',
+          kind: 'SelectionSet' as Kind,
           selections: [
             {
-              kind: 'FragmentSpread',
+              kind: 'FragmentSpread' as Kind,
               name: {
-                kind: 'Name',
+                kind: 'Name' as Kind,
                 value: actualFragmentName,
               },
             },

src/utilities/graphql/transform.ts

@@ -15,6 +15,9 @@ import {
   visit,
 } from 'graphql';
 
+// TODO(brian): A hack until this issue is resolved (https://github.com/graphql/graphql-js/issues/3356)
+type Kind = any;
+
 import {
   checkDocument,
   getOperationDefinition,
@@ -53,9 +56,9 @@ export type RemoveVariableDefinitionConfig = RemoveNodeConfig<
 >;
 
 const TYPENAME_FIELD: FieldNode = {
-  kind: 'Field',
+  kind: 'Field' as Kind,
   name: {
-    kind: 'Name',
+    kind: 'Name' as Kind,
     value: '__typename',
   },
 };