Revert "[Apollo] Update packages to latest (#413)" (#414)

This reverts commit ea0d95c.

packages/apollo/README.md

@@ -6,6 +6,12 @@ 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

packages/apollo/package.json

@@ -19,18 +19,29 @@
   },
   "peerDependencies": {
     "@airbnb/lunar": "^3.0.0",
-    "graphql": "^15.5.0",
-    "react": "^16.8.0"
+    "graphql": "^14.1.0",
+    "graphql-tag": "^2.10.0",
+    "react": "^16.8.0",
+    "react-apollo": "^3.0.0"
   },
   "devDependencies": {
     "@airbnb/lunar-test-utils": "^3.0.2",
-    "graphql": "^15.5.0",
+    "@apollo/react-testing": "^3.1.3",
+    "graphql": "^14.6.0",
+    "graphql-tag": "^2.10.3",
     "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"
   }
 }

packages/apollo/src/components/Mutation/index.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import { MutationResult, MutationFunction, OperationVariables, ApolloError } from '@apollo/client';
 import {
   Mutation as BaseMutation,
   MutationComponentOptions,
-} from '@apollo/client/react/components';
+  MutationResult,
+  MutationFunction,
+  OperationVariables,
+} from 'react-apollo';
+import { ApolloError } from 'apollo-client';
 import ErrorMessage from '@airbnb/lunar/lib/components/ErrorMessage';
 import Loader from '@airbnb/lunar/lib/components/Loader';
 import renderElementOrFunction, {

packages/apollo/src/components/Mutation/story.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { gql, MutationFunction } from '@apollo/client';
+import gql from 'graphql-tag';
 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 { MockedProvider } from '@apollo/client/testing';
+import { MutationFunction } from 'react-apollo';
+import { MockedProvider } from '@apollo/react-testing';
 import Mutation from '.';
 
 const MUTATION = gql`
@@ -108,11 +109,7 @@ customLoadingComponent.story = {
 export function customErrorComponent() {
   return (
     <MockedProvider mocks={[errorMock]} addTypename={false}>
-      <Mutation
-        mutation={MUTATION}
-        variables={variables}
-        error={(error) => <ErrorMessage error={error} />}
-      >
+      <Mutation mutation={MUTATION} error={(error) => <ErrorMessage error={error} />}>
         {(updateUser) => <UpdateButton onUpdate={updateUser} />}
       </Mutation>
     </MockedProvider>

packages/apollo/src/components/Provider/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ApolloProvider } from '@apollo/client';
+import { ApolloProvider } from 'react-apollo';
 import Apollo from '../..';
 
 export type ProviderProps = {

packages/apollo/src/components/Query/index.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
-import { QueryResult, OperationVariables, ApolloError } from '@apollo/client';
-import { Query as BaseQuery, QueryComponentOptions } from '@apollo/client/react/components';
+import {
+  Query as BaseQuery,
+  QueryComponentOptions,
+  QueryResult,
+  OperationVariables,
+} from 'react-apollo';
+import { ApolloError } from 'apollo-client';
 import ErrorMessage from '@airbnb/lunar/lib/components/ErrorMessage';
 import Loader from '@airbnb/lunar/lib/components/Loader';
 import renderElementOrFunction, {

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/client/testing';
-import { gql } from '@apollo/client';
+import { MockedProvider } from '@apollo/react-testing';
+import gql from 'graphql-tag';
 import Query from '.';
 
 const QUERY = gql`

packages/apollo/src/hooks/useMutation.ts

@@ -1,3 +1,3 @@
-import { useMutation } from '@apollo/client';
+import { useMutation } from 'react-apollo';
 
 export default useMutation;

packages/apollo/src/hooks/useQuery.ts

@@ -1,3 +1,3 @@
-import { useQuery } from '@apollo/client';
+import { useQuery } from 'react-apollo';
 
 export default useQuery;

packages/apollo/src/hooks/useSubscription.ts

@@ -1,3 +1,3 @@
-import { useSubscription } from '@apollo/client';
+import { useSubscription } from 'react-apollo';
 
 export default useSubscription;

packages/apollo/src/index.ts

@@ -1,20 +1,17 @@
 import Core from '@airbnb/lunar';
-import {
-  ApolloClient,
-  ApolloClientOptions,
-  InMemoryCache,
-  InMemoryCacheConfig,
-  ApolloLink,
-  HttpLink,
-} from '@apollo/client';
-import { onError } from '@apollo/client/link/error';
+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 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-client';
+export * from 'apollo-cache-inmemory';
 
 export { onError, HttpLink, Mutation, Query, Provider };
 

packages/apollo/src/updaters/addToList.ts

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

packages/apollo/src/updaters/removeFromList.ts

@@ -1,20 +1,22 @@
 import { DocumentNode } from 'graphql';
-import { get, set } from 'lodash/fp';
-import { DataProxy, ApolloCache, StoreObject } from '@apollo/client';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import { DataProxy } from 'apollo-cache';
 import prepareQuery from '../utils/prepareQuery';
 import getQueryName from '../utils/getQueryName';
 
 export default function removeFromList<Result, Vars = {}>(
-  docOrQuery: DocumentNode | DataProxy.Query<Vars, Result>,
+  docOrQuery: DocumentNode | DataProxy.Query<Vars>,
   listPath: string,
   id: string | number,
   idName: string = 'id',
 ) {
-  const query = prepareQuery<Result, Vars>(docOrQuery);
+  const query = prepareQuery<Vars>(docOrQuery);
 
-  return (cache: ApolloCache<Result>) => {
+  return (cache: DataProxy) => {
     const queryResult = cache.readQuery<Result>(query);
-    const list = get(listPath, queryResult);
+    const nextResult = { ...queryResult };
+    const list = get(queryResult, listPath);
 
     if (typeof list === 'undefined' || !Array.isArray(list)) {
       if (__DEV__) {
@@ -24,19 +26,10 @@ export default function removeFromList<Result, Vars = {}>(
       }
     }
 
-    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(
+    set(
+      nextResult,
       listPath,
       list.filter((item) => (item as { [key: string]: unknown })[idName] !== id),
-      { ...queryResult },
     );
 
     cache.writeQuery({

packages/apollo/src/utils/prepareQuery.ts

@@ -1,14 +1,14 @@
 import { DocumentNode } from 'graphql';
-import { DataProxy } from '@apollo/client';
+import { DataProxy } from 'apollo-cache';
 
-export default function prepareQuery<Result, Vars = {}>(
-  docOrQuery: DocumentNode | DataProxy.Query<Vars, Result>,
-): DataProxy.Query<Vars, Result> {
+export default function prepareQuery<Vars = {}>(
+  docOrQuery: DocumentNode | DataProxy.Query<Vars>,
+): DataProxy.Query<Vars> {
   const query = docOrQuery;
 
   if ((query as DocumentNode).kind) {
-    return { query } as DataProxy.Query<Vars, Result>;
+    return { query } as DataProxy.Query<Vars>;
   }
 
-  return query as DataProxy.Query<Vars, Result>;
+  return query as DataProxy.Query<Vars>;
 }

packages/apollo/test/components/Mutation.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { gql, MutationResult, MutationFunction } from '@apollo/client';
+import { MutationResult, MutationFunction } from 'react-apollo';
 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 } from '@apollo/client/testing';
+import { MockedProvider, MockedResponse, wait } from '@apollo/react-testing';
 import Mutation from '../../src/components/Mutation';
-import { wait } from '../utils';
 
 const MUTATION = gql`
   mutation updateSomething($id: Int!, $name: String!) {
@@ -31,13 +31,8 @@ function ApolloComponent({
   );
 }
 
-type Variables = {
-  id: number;
-  name: string;
-};
-
 describe('Mutation', () => {
-  const childHandler = (mutate: MutationFunction<unknown, Variables>) => (
+  const childHandler = (mutate: MutationFunction<unknown, {}>) => (
     <button type="button" onClick={() => mutate({ variables: { id: 123, name: 'Something' } })}>
       Submit
     </button>

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 '@apollo/client';
+import { ApolloProvider } from 'react-apollo';
 import Apollo from '../../src';
 import Provider from '../../src/components/Provider';
 

packages/apollo/test/components/Query.test.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { gql } from '@apollo/client';
+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 } from '@apollo/client/testing';
+import { MockedProvider, MockedResponse, wait } from '@apollo/react-testing';
 import Query from '../../src/components/Query';
-import { wait } from '../utils';
 
 const QUERY = gql`
   query getSomething {

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', () => {

packages/apollo/test/updaters/__snapshots__/addToList.test.ts.snap

@@ -4,4 +4,13 @@ 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`] = `"\\"otherQuery\\" list \\"something.things\\" 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\\"
+  }
+}."
+`;

packages/apollo/test/updaters/__snapshots__/removeFromList.test.ts.snap

@@ -2,4 +2,13 @@
 
 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`] = `"\\"otherQuery\\" list \\"things\\" 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\\"
+  }
+}."
+`;