breaking: Update Apollo v3 and Graphql v15

Update Apollo client v3, consolidating packages to @apollo/client and taking care of breaking changes. Update GraphQL to v15. Migrate to lodash/fp.
airbnb · May 12, 2021 · 4b1066e · 4b1066e
1 parent 3d1dfb4
commit 4b1066e
Show file tree

Hide file tree

Showing 26 changed files with 203 additions and 314 deletions.
diff --git a/packages/apollo/README.md b/packages/apollo/README.md
@@ -6,12 +6,6 @@ Provides out of the box support for GraphQL, powered by [Apollo](https://www.apo
 yarn add @airbnb/lunar-apollo
 ```
 
-This package relies on GraphQL related packages to also be installed.
-
-```bash static
-yarn add graphql graphql-tag
-```
-
 ## Setup
 
 Initialize the package to create an Apollo client. The following option settings may be passed to

diff --git a/packages/apollo/package.json b/packages/apollo/package.json
@@ -19,29 +19,18 @@
   },
   "peerDependencies": {
     "@airbnb/lunar": "^3.0.0",
-    "graphql": "^14.1.0",
-    "graphql-tag": "^2.10.0",
-    "react": "^16.8.0",
-    "react-apollo": "^3.0.0"
+    "graphql": "^15.5.0",
+    "react": "^16.8.0"
   },
   "devDependencies": {
     "@airbnb/lunar-test-utils": "^3.0.2",
-    "@apollo/react-testing": "^3.1.3",
-    "graphql": "^14.6.0",
-    "graphql-tag": "^2.10.3",
+    "graphql": "^15.5.0",
     "react": "^16.13.0",
-    "react-apollo": "^3.1.3",
     "react-test-renderer": "^16.13.1"
   },
   "dependencies": {
+    "@apollo/client": "^3.3.12",
     "@types/lodash": "*",
-    "apollo-cache": "^1.3.4",
-    "apollo-cache-inmemory": "^1.6.5",
-    "apollo-client": "^2.6.8",
-    "apollo-link": "^1.2.13",
-    "apollo-link-error": "^1.1.12",
-    "apollo-link-http": "^1.5.16",
-    "apollo-utilities": "^1.3.3",
-    "lodash": "^4.17.15"
+    "lodash": "^4.17.21"
   }
 }
diff --git a/packages/apollo/src/components/Mutation/index.tsx b/packages/apollo/src/components/Mutation/index.tsx
@@ -1,12 +1,9 @@
 import React from 'react';
+import { MutationResult, MutationFunction, OperationVariables, ApolloError } from '@apollo/client';
 import {
   Mutation as BaseMutation,
   MutationComponentOptions,
-  MutationResult,
-  MutationFunction,
-  OperationVariables,
-} from 'react-apollo';
-import { ApolloError } from 'apollo-client';
+} from '@apollo/client/react/components';
 import ErrorMessage from '@airbnb/lunar/lib/components/ErrorMessage';
 import Loader from '@airbnb/lunar/lib/components/Loader';
 import renderElementOrFunction, {

diff --git a/packages/apollo/src/components/Mutation/story.tsx b/packages/apollo/src/components/Mutation/story.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import gql from 'graphql-tag';
+import { gql, MutationFunction } from '@apollo/client';
 import Button from '@airbnb/lunar/lib/components/Button';
 import Shimmer from '@airbnb/lunar/lib/components/Shimmer';
 import ErrorMessage from '@airbnb/lunar/lib/components/ErrorMessage';
-import { MutationFunction } from 'react-apollo';
-import { MockedProvider } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/client/testing';
 import Mutation from '.';
 
 const MUTATION = gql`
@@ -109,7 +108,11 @@ customLoadingComponent.story = {
 export function customErrorComponent() {
   return (
     <MockedProvider mocks={[errorMock]} addTypename={false}>
-      <Mutation mutation={MUTATION} error={(error) => <ErrorMessage error={error} />}>
+      <Mutation
+        mutation={MUTATION}
+        variables={variables}
+        error={(error) => <ErrorMessage error={error} />}
+      >
         {(updateUser) => <UpdateButton onUpdate={updateUser} />}
       </Mutation>
     </MockedProvider>

diff --git a/packages/apollo/src/components/Provider/index.tsx b/packages/apollo/src/components/Provider/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ApolloProvider } from 'react-apollo';
+import { ApolloProvider } from '@apollo/client';
 import Apollo from '../..';
 
 export type ProviderProps = {

diff --git a/packages/apollo/src/components/Query/index.tsx b/packages/apollo/src/components/Query/index.tsx
@@ -1,11 +1,6 @@
 import React from 'react';
-import {
-  Query as BaseQuery,
-  QueryComponentOptions,
-  QueryResult,
-  OperationVariables,
-} from 'react-apollo';
-import { ApolloError } from 'apollo-client';
+import { QueryResult, OperationVariables, ApolloError } from '@apollo/client';
+import { Query as BaseQuery, QueryComponentOptions } from '@apollo/client/react/components';
 import ErrorMessage from '@airbnb/lunar/lib/components/ErrorMessage';
 import Loader from '@airbnb/lunar/lib/components/Loader';
 import renderElementOrFunction, {

diff --git a/packages/apollo/src/components/Query/story.tsx b/packages/apollo/src/components/Query/story.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import Shimmer from '@airbnb/lunar/lib/components/Shimmer';
 import ErrorMessage from '@airbnb/lunar/lib/components/ErrorMessage';
-import { MockedProvider } from '@apollo/react-testing';
-import gql from 'graphql-tag';
+import { MockedProvider } from '@apollo/client/testing';
+import { gql } from '@apollo/client';
 import Query from '.';
 
 const QUERY = gql`

diff --git a/packages/apollo/src/hooks/useMutation.ts b/packages/apollo/src/hooks/useMutation.ts
@@ -1,3 +1,3 @@
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 
 export default useMutation;
diff --git a/packages/apollo/src/hooks/useQuery.ts b/packages/apollo/src/hooks/useQuery.ts
@@ -1,3 +1,3 @@
-import { useQuery } from 'react-apollo';
+import { useQuery } from '@apollo/client';
 
 export default useQuery;
diff --git a/packages/apollo/src/hooks/useSubscription.ts b/packages/apollo/src/hooks/useSubscription.ts
@@ -1,3 +1,3 @@
-import { useSubscription } from 'react-apollo';
+import { useSubscription } from '@apollo/client';
 
 export default useSubscription;
diff --git a/packages/apollo/src/index.ts b/packages/apollo/src/index.ts
@@ -1,17 +1,20 @@
 import Core from '@airbnb/lunar';
-import { ApolloClient, ApolloClientOptions } from 'apollo-client';
-import { InMemoryCache, InMemoryCacheConfig } from 'apollo-cache-inmemory';
-import { ApolloLink } from 'apollo-link';
-import { onError } from 'apollo-link-error';
-import { HttpLink } from 'apollo-link-http';
+import {
+  ApolloClient,
+  ApolloClientOptions,
+  InMemoryCache,
+  InMemoryCacheConfig,
+  ApolloLink,
+  HttpLink,
+} from '@apollo/client';
+import { onError } from '@apollo/client/link/error';
 import Mutation from './components/Mutation';
 import Query from './components/Query';
 import Provider from './components/Provider';
 // @ts-ignore
 import pkg from '../package.json';
 
-export * from 'apollo-client';
-export * from 'apollo-cache-inmemory';
+export * from '@apollo/client';
 
 export { onError, HttpLink, Mutation, Query, Provider };
 

diff --git a/packages/apollo/src/updaters/addToList.ts b/packages/apollo/src/updaters/addToList.ts
@@ -1,22 +1,19 @@
 import { DocumentNode } from 'graphql';
-import get from 'lodash/get';
-import set from 'lodash/set';
-import { DataProxy } from 'apollo-cache';
-import { MutationFetchResult } from 'react-apollo';
+import { get, set } from 'lodash/fp';
+import { DataProxy, MutationResult } from '@apollo/client';
 import prepareQuery from '../utils/prepareQuery';
 import getQueryName from '../utils/getQueryName';
 
 export default function addToList<Result, Vars = {}>(
-  docOrQuery: DocumentNode | DataProxy.Query<Vars>,
+  docOrQuery: DocumentNode | DataProxy.Query<Vars, Result>,
   listPath: string,
   mutationPath: string,
 ) {
-  const query = prepareQuery<Vars>(docOrQuery);
+  const query = prepareQuery<Result, Vars>(docOrQuery);
 
-  return (cache: DataProxy, mutationResult: MutationFetchResult<Result>) => {
+  return (cache: DataProxy, mutationResult: MutationResult<Result>) => {
     const queryResult = cache.readQuery<Result>(query);
-    const nextResult = { ...queryResult };
-    const list = get(queryResult, listPath);
+    const list = get(listPath, queryResult);
 
     if (typeof list === 'undefined' || !Array.isArray(list)) {
       if (__DEV__) {
@@ -26,7 +23,7 @@ export default function addToList<Result, Vars = {}>(
       }
     }
 
-    const data = get(mutationResult.data, mutationPath);
+    const data = get(mutationPath, mutationResult);
 
     if (typeof data === 'undefined') {
       if (__DEV__) {
@@ -36,7 +33,7 @@ export default function addToList<Result, Vars = {}>(
       }
     }
 
-    set(nextResult, listPath, [...list, data]);
+    const nextResult = set(listPath, [...list, data], { ...queryResult });
 
     cache.writeQuery({
       ...query,

diff --git a/packages/apollo/src/updaters/removeFromList.ts b/packages/apollo/src/updaters/removeFromList.ts
@@ -1,22 +1,20 @@
 import { DocumentNode } from 'graphql';
-import get from 'lodash/get';
-import set from 'lodash/set';
-import { DataProxy } from 'apollo-cache';
+import { get, set } from 'lodash/fp';
+import { DataProxy, ApolloCache, StoreObject } from '@apollo/client';
 import prepareQuery from '../utils/prepareQuery';
 import getQueryName from '../utils/getQueryName';
 
 export default function removeFromList<Result, Vars = {}>(
-  docOrQuery: DocumentNode | DataProxy.Query<Vars>,
+  docOrQuery: DocumentNode | DataProxy.Query<Vars, Result>,
   listPath: string,
   id: string | number,
   idName: string = 'id',
 ) {
-  const query = prepareQuery<Vars>(docOrQuery);
+  const query = prepareQuery<Result, Vars>(docOrQuery);
 
-  return (cache: DataProxy) => {
+  return (cache: ApolloCache<Result>) => {
     const queryResult = cache.readQuery<Result>(query);
-    const nextResult = { ...queryResult };
-    const list = get(queryResult, listPath);
+    const list = get(listPath, queryResult);
 
     if (typeof list === 'undefined' || !Array.isArray(list)) {
       if (__DEV__) {
@@ -26,10 +24,19 @@ export default function removeFromList<Result, Vars = {}>(
       }
     }
 
-    set(
-      nextResult,
+    const rootItem = listPath.split('.')[0];
+    // @ts-ignore
+    const resultRoot = queryResult[rootItem] as StoreObject;
+    // Evict cache before writeQuery: https://github.com/apollographql/apollo-client/issues/6451
+    cache.evict({
+      id: cache.identify(resultRoot),
+      broadcast: false,
+    });
+
+    const nextResult = set(
       listPath,
       list.filter((item) => (item as { [key: string]: unknown })[idName] !== id),
+      { ...queryResult },
     );
 
     cache.writeQuery({

diff --git a/packages/apollo/src/utils/prepareQuery.ts b/packages/apollo/src/utils/prepareQuery.ts
@@ -1,14 +1,14 @@
 import { DocumentNode } from 'graphql';
-import { DataProxy } from 'apollo-cache';
+import { DataProxy } from '@apollo/client';
 
-export default function prepareQuery<Vars = {}>(
-  docOrQuery: DocumentNode | DataProxy.Query<Vars>,
-): DataProxy.Query<Vars> {
+export default function prepareQuery<Result, Vars = {}>(
+  docOrQuery: DocumentNode | DataProxy.Query<Vars, Result>,
+): DataProxy.Query<Vars, Result> {
   const query = docOrQuery;
 
   if ((query as DocumentNode).kind) {
-    return { query } as DataProxy.Query<Vars>;
+    return { query } as DataProxy.Query<Vars, Result>;
   }
 
-  return query as DataProxy.Query<Vars>;
+  return query as DataProxy.Query<Vars, Result>;
 }
diff --git a/packages/apollo/test/components/Mutation.test.tsx b/packages/apollo/test/components/Mutation.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { MutationResult, MutationFunction } from 'react-apollo';
+import { gql, MutationResult, MutationFunction } from '@apollo/client';
 import { mount } from 'enzyme';
-import gql from 'graphql-tag';
 import { WrappingComponent } from '@airbnb/lunar-test-utils';
 import Loader from '@airbnb/lunar/lib/components/Loader';
 import ErrorMessage from '@airbnb/lunar/lib/components/ErrorMessage';
-import { MockedProvider, MockedResponse, wait } from '@apollo/react-testing';
+import { MockedProvider, MockedResponse } from '@apollo/client/testing';
 import Mutation from '../../src/components/Mutation';
+import { wait } from '../utils';
 
 const MUTATION = gql`
   mutation updateSomething($id: Int!, $name: String!) {
@@ -31,8 +31,13 @@ function ApolloComponent({
   );
 }
 
+type Variables = {
+  id: number;
+  name: string;
+};
+
 describe('Mutation', () => {
-  const childHandler = (mutate: MutationFunction<unknown, {}>) => (
+  const childHandler = (mutate: MutationFunction<unknown, Variables>) => (
     <button type="button" onClick={() => mutate({ variables: { id: 123, name: 'Something' } })}>
       Submit
     </button>

diff --git a/packages/apollo/test/components/Provider.test.tsx b/packages/apollo/test/components/Provider.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { mountWithStyles, WrappingComponent } from '@airbnb/lunar-test-utils';
-import { ApolloProvider } from 'react-apollo';
+import { ApolloProvider } from '@apollo/client';
 import Apollo from '../../src';
 import Provider from '../../src/components/Provider';
 

diff --git a/packages/apollo/test/components/Query.test.tsx b/packages/apollo/test/components/Query.test.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 import { WrappingComponent } from '@airbnb/lunar-test-utils';
 import Loader from '@airbnb/lunar/lib/components/Loader';
 import ErrorMessage from '@airbnb/lunar/lib/components/ErrorMessage';
-import { MockedProvider, MockedResponse, wait } from '@apollo/react-testing';
+import { MockedProvider, MockedResponse } from '@apollo/client/testing';
 import Query from '../../src/components/Query';
+import { wait } from '../utils';
 
 const QUERY = gql`
   query getSomething {

diff --git a/packages/apollo/test/index.test.ts b/packages/apollo/test/index.test.ts
@@ -1,4 +1,4 @@
-import ApolloClient from 'apollo-client';
+import { ApolloClient } from '@apollo/client';
 import Apollo, { Settings, HttpLink } from '../src';
 
 describe('Apollo', () => {

diff --git a/packages/apollo/test/updaters/__snapshots__/addToList.test.ts.snap b/packages/apollo/test/updaters/__snapshots__/addToList.test.ts.snap
@@ -4,13 +4,4 @@ exports[`addToList() errors if mutation data does not exist 1`] = `"Cannot find
 
 exports[`addToList() errors if property name is not an array 1`] = `"\\"getSomething\\" list \\"something.name\\" is not an array."`;
 
-exports[`addToList() errors if query does not exist in cache 1`] = `
-"Can't find field things on object {
-  \\"something\\": {
-    \\"type\\": \\"id\\",
-    \\"generated\\": false,
-    \\"id\\": \\"something:123\\",
-    \\"typename\\": \\"something\\"
-  }
-}."
-`;
+exports[`addToList() errors if query does not exist in cache 1`] = `"\\"otherQuery\\" list \\"something.things\\" is not an array."`;
diff --git a/packages/apollo/test/updaters/__snapshots__/removeFromList.test.ts.snap b/packages/apollo/test/updaters/__snapshots__/removeFromList.test.ts.snap
@@ -2,13 +2,4 @@
 
 exports[`removeFromList() errors if property name is not an array 1`] = `"\\"getSomething\\" list \\"something.name\\" is not an array."`;
 
-exports[`removeFromList() errors if query does not exist in cache 1`] = `
-"Can't find field things on object {
-  \\"something\\": {
-    \\"type\\": \\"id\\",
-    \\"generated\\": false,
-    \\"id\\": \\"something:123\\",
-    \\"typename\\": \\"something\\"
-  }
-}."
-`;
+exports[`removeFromList() errors if query does not exist in cache 1`] = `"\\"otherQuery\\" list \\"things\\" is not an array."`;