Merge pull request apollographql#118 from apollographql/apollo-client-3

Upgrade to Apollo Client 3.0 (@apollo/client)

Author: hwillson

final/client/__generated__/globalTypes.ts

@@ -3,21 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/react-hooks": "3.0.0",
+    "@apollo/client": "^3.0.2",
     "@reach/router": "^1.2.1",
     "@types/node": "^12.12.14",
     "@types/reach__router": "^1.2.6",
     "@types/react": "^16.9.15",
     "@types/react-dom": "^16.9.4",
-    "apollo-cache-inmemory": "^1.6.2",
-    "apollo-client": "^2.6.3",
-    "apollo-link-http": "^1.5.15",
     "emotion": "^9.2.12",
     "graphql": "^14.4.2",
-    "graphql-tag": "^2.10.1",
     "polished": "^3.4.1",
-    "react": "^16.9.0-alpha.0",
-    "react-dom": "^16.9.0-alpha.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-emotion": "^9.2.12",
     "react-scripts": "^3.4.1",
     "typescript": "^3.7.3"
@@ -40,7 +36,6 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@apollo/react-testing": "3.0.0",
     "@testing-library/jest-dom": "^4.0.0",
     "@testing-library/react": "^8.0.7",
     "@types/jest": "^24.0.23",

final/client/package-lock.json

@@ -0,0 +1,35 @@
+import { InMemoryCache, Reference } from '@apollo/client';
+
+export const cache: InMemoryCache = new InMemoryCache({
+  typePolicies: {
+    Query: {
+      fields: {
+        isLoggedIn() {
+          return isLoggedInVar();
+        },
+        cartItems() {
+          return cartItemsVar();
+        },
+        launches: {
+          merge(existing, incoming) {
+            let launches: Reference[] = [];
+            if (existing && existing.launches) {
+              launches = launches.concat(existing.launches);
+            }
+            if (incoming && incoming.launches) {
+              launches = launches.concat(incoming.launches);
+            }
+            return {
+              ...incoming,
+              launches,
+            };
+          }
+        }
+      }
+    }
+  }
+});
+
+export const isLoggedInVar =
+  cache.makeVar<boolean>(!!localStorage.getItem('token'));
+export const cartItemsVar = cache.makeVar<string[]>([]);

final/client/package.json

@@ -11,7 +11,7 @@ import { colors, unit } from '../styles';
 import * as LoginTypes from '../pages/__generated__/login';
 
 interface LoginFormProps {
-  login: (a: { variables: LoginTypes.loginVariables }) => void;
+  login: (a: { variables: LoginTypes.LoginVariables }) => void;
 }
 
 interface LoginFormState {

final/client/src/cache.ts

@@ -1,37 +1,8 @@
 import React from 'react';
-import { InMemoryCache } from 'apollo-cache-inmemory';
 
-import {
-  renderApollo,
-  cleanup,
-  fireEvent,
-  waitForElement,
-} from '../../test-utils';
-import ActionButton, {
-  GET_LAUNCH_DETAILS,
-  TOGGLE_CART,
-} from '../action-button';
-import { GET_CART_ITEMS } from '../../pages/cart';
-
-const mockLaunch = {
-  __typename: 'Launch',
-  id: 1,
-  isBooked: true,
-  rocket: {
-    __typename: 'Rocket',
-    id: 1,
-    name: 'tester',
-    type: 'test',
-  },
-  mission: {
-    __typename: 'Mission',
-    id: 1,
-    name: 'test mission',
-    missionPatch: '/',
-  },
-  site: 'earth',
-  isInCart: false,
-};
+import { renderApollo, cleanup } from '../../test-utils';
+import ActionButton from '../action-button';
+import { cartItemsVar } from '../../cache';
 
 describe('action button', () => {
   // automatically unmount and cleanup DOM after the test is finished.
@@ -47,72 +18,13 @@ describe('action button', () => {
     getByText(/add to cart/i);
 
     // rerender with different props to same container
-    renderApollo(<ActionButton isInCart={true} />, { container });
+    cartItemsVar(['1']);
+    renderApollo(<ActionButton id="1" />, { container });
     getByText(/remove from cart/i);
+    cartItemsVar([]);
 
     // rerender with different props to same container
     renderApollo(<ActionButton isBooked={true} />, { container });
     getByText(/cancel this trip/i);
   });
-
-  /**
-   * This test is a bit tricky, since the button doesn't _render_
-   * anything based on the response from the mutation.
-   *
-   * We test this by only mocking one mutation at a time. If the component
-   * tried to execute any mutation not mocked, it would throw an
-   * error
-   */
-  it('fires correct mutation with variables', async () => {
-    const cache = new InMemoryCache();
-    cache.writeQuery({
-      query: GET_CART_ITEMS,
-      data: { cartItems: [1] },
-    });
-
-    // if we only provide 1 mock, any other queries would cause error
-    let mocks = [
-      {
-        request: { query: TOGGLE_CART, variables: { launchId: 1 } },
-        result: { data: { addOrRemoveFromCart: true } },
-      },
-      {
-        request: { query: GET_LAUNCH_DETAILS, variables: { launchId: 1 } },
-        result: { data: { launch: mockLaunch } },
-      },
-    ];
-
-    const { getByTestId, container, debug } = renderApollo(
-      <ActionButton id={'1'} isBooked={false} />,
-      {
-        mocks,
-        cache,
-        resolvers: {}
-      },
-    );
-    fireEvent.click(getByTestId('action-button'));
-    await waitForElement(() => getByTestId('action-button'));
-
-    // mocks = [
-    //   {
-    //     request: {
-    //       query: CANCEL_TRIP,
-    //       variables: { launchId: 1 },
-    //     },
-    //     result: {
-    //       data: {
-    //         cancelTrip: {
-    //           success: true,
-    //           message: '',
-    //           launches: [{ id: 1, isBooked: false }],
-    //         },
-    //       },
-    //     },
-    //   },
-    // ];
-
-    // renderApollo(<ActionButton id={1} isBooked={true} />, { mocks, container });
-    // fireEvent.click(getByTestId('action-button'));
-    // await waitForElement(() => getByTestId('action-button'));
-  });
 });

final/client/src/components/login-form.tsx

@@ -35,7 +35,7 @@ describe('book trips', () => {
   it('completes mutation and shows message', async () => {
     let mocks = [
       {
-        request: { query: BOOK_TRIPS, variables: { launchIds: [1] } },
+        request: { query: BOOK_TRIPS, variables: { launchIds: ['1'] } },
         result: {
           data: {
             bookTrips: [{ success: true, message: 'success!', launches: [] }],
@@ -44,7 +44,7 @@ describe('book trips', () => {
       },
       {
         // we need this query for refetchQueries
-        request: { query: GET_LAUNCH, variables: { launchId: 1 } },
+        request: { query: GET_LAUNCH, variables: { launchId: '1' } },
         result: { data: { launch: mockLaunch } },
       },
     ];

final/client/src/containers/__generated__/BookTrips.ts

@@ -28,7 +28,7 @@ describe('cart item', () => {
   it('queries item and renders without error', () => {
     let mocks = [
       {
-        request: { query: GET_LAUNCH, variables: { launchId: 1 } },
+        request: { query: GET_LAUNCH, variables: { launchId: '1' } },
         result: { data: { launch: mockLaunch } },
       },
     ];
@@ -63,4 +63,4 @@ describe('cart item', () => {
 
     waitForElement(() => getByText(/error: aw shucks/i));
   });
-});
+});

final/client/src/containers/__generated__/GetLaunch.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-import { InMemoryCache } from 'apollo-cache-inmemory';
 import LogoutButton from '../logout-button';
-import gql from 'graphql-tag';
 
 import { renderApollo, cleanup, fireEvent } from '../../test-utils';
+import { cache, isLoggedInVar } from '../../cache';
 
 describe('logout button', () => {
   // automatically unmount and cleanup DOM after the test is finished.
@@ -14,24 +13,13 @@ describe('logout button', () => {
   });
 
   it('complete logout', async () => {
-    const cache = new InMemoryCache();
-    cache.writeData({ data: { isLoggedIn: true } });
+    isLoggedInVar(true);
     localStorage.setItem('token', 'testTokenValue');
+    localStorage.setItem('userId', 'abc123');
     const { getByTestId } = renderApollo(<LogoutButton />, { cache });
-
     fireEvent.click(getByTestId('logout-button'));
-
-    // check to make sure the cache's contents have been updated
-    const response: any = cache.readQuery({
-      query: gql`
-        query IsUserLoggedIn {
-          isLoggedIn @client
-        }
-      `
-    });
-    const { isLoggedIn } = response;
-
-    expect(isLoggedIn).toBeFalsy();
+    expect(isLoggedInVar()).toBeFalsy();
     expect(localStorage.getItem('token')).toBeNull();
+    expect(localStorage.getItem('userId')).toBeNull();
   });
 });