[WIP] Upgrade Admin UI to Apollo Client 3

demo-projects/blog/package.json

@@ -35,7 +35,7 @@
     "@keystonejs/oembed-adapters": "^5.1.4",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
-    "apollo-upload-client": "^13.0.0",
+    "apollo-upload-client": "^14.1.0",
     "cross-env": "^7.0.0",
     "date-fns": "^2.14.0",
     "dotenv": "^8.2.0",

demo-projects/meetup/package.json

@@ -30,7 +30,7 @@
     "@keystonejs/session": "^8.0.0",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
-    "apollo-upload-client": "^13.0.0",
+    "apollo-upload-client": "^14.1.0",
     "body-parser": "^1.18.2",
     "cross-env": "^7.0.0",
     "date-fns": "^2.14.0",

package.json

@@ -38,6 +38,7 @@
     "heroku-postbuild": "yarn build && yarn workspace @keystonejs/demo-project-blog build"
   },
   "dependencies": {
+    "@apollo/client": "^3.0.2",
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
     "@babel/helper-module-imports": "^7.8.3",

packages/app-admin-ui/client/apolloClient.js

@@ -1,21 +1,9 @@
-import { ApolloClient } from 'apollo-client';
-import { ApolloLink } from 'apollo-link';
+import { ApolloClient, ApolloLink, InMemoryCache } from '@apollo/client';
+import { onError } from '@apollo/client/link/error';
 import { createUploadLink } from 'apollo-upload-client';
-import { onError } from 'apollo-link-error';
-import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
 
 import fetch from 'cross-fetch';
 
-// This shouldn't be necessary, but it silences an annoying error from Apollo
-// Client: https://github.com/apollographql/apollo-client/issues/3397#issuecomment-421433032
-const fragmentMatcher = new IntrospectionFragmentMatcher({
-  introspectionQueryResultData: {
-    __schema: {
-      types: [],
-    },
-  },
-});
-
 export const initApolloClient = ({ uri }) => {
   const errorLink = onError(({ graphQLErrors, networkError }) => {
     if (graphQLErrors) {
@@ -36,6 +24,6 @@ export const initApolloClient = ({ uri }) => {
 
   return new ApolloClient({
     link: ApolloLink.from([errorLink, httpLink]),
-    cache: new InMemoryCache({ fragmentMatcher }),
+    cache: new InMemoryCache(),
   });
 };

packages/app-admin-ui/client/classes/List.js

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 
 import { arrayToObject, mapKeys, omit } from '@keystonejs/utils';
 

packages/app-admin-ui/client/components/CreateItemModal.js

@@ -11,7 +11,7 @@ import {
   forwardRef,
 } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useMutation } from '@apollo/react-hooks';
+import { useMutation } from '@apollo/client';
 import { useToasts } from 'react-toast-notifications';
 
 import { Button, LoadingButton } from '@arch-ui/button';

packages/app-admin-ui/client/components/DeleteItemModal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMutation } from '@apollo/react-hooks';
+import { useMutation } from '@apollo/client';
 import { Button } from '@arch-ui/button';
 import Confirm from '@arch-ui/confirm';
 

packages/app-admin-ui/client/components/DeleteManyItemsModal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useMutation } from '@apollo/react-hooks';
+import { useMutation } from '@apollo/client';
 import { Button } from '@arch-ui/button';
 import Confirm from '@arch-ui/confirm';
 

packages/app-admin-ui/client/components/Nav.js

@@ -25,8 +25,7 @@ import { useAdminMeta } from '../providers/AdminMeta';
 import { useResizeHandler, KEYBOARD_SHORTCUT } from '../hooks/ResizeHandler';
 import { useScrollQuery } from '../hooks/ScrollQuery';
 
-import { useQuery } from '@apollo/react-hooks';
-import gql from 'graphql-tag';
+import { useQuery, gql } from '@apollo/client';
 
 const TRANSITION_DURATION = '220ms';
 const TRANSITION_EASING = 'cubic-bezier(0.2, 0, 0, 1)';

packages/app-admin-ui/client/components/UpdateManyItemsModal.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { Fragment, useMemo, useCallback, Suspense, useState } from 'react';
-import { useMutation } from '@apollo/react-hooks';
+import { useMutation } from '@apollo/client';
 import { useToasts } from 'react-toast-notifications';
 import { omit, arrayToObject, countArrays } from '@keystonejs/utils';
 

packages/app-admin-ui/client/index.js

@@ -1,6 +1,6 @@
 import React, { Suspense, useMemo } from 'react';
 import ReactDOM from 'react-dom';
-import { ApolloProvider } from '@apollo/react-hooks';
+import { ApolloProvider } from '@apollo/client';
 import { BrowserRouter, Redirect, Route, Switch, useParams } from 'react-router-dom';
 import { ToastProvider } from 'react-toast-notifications';
 import { Global } from '@emotion/core';

packages/app-admin-ui/client/pages/Home/index.js

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery, gql } from '@apollo/client';
 
 import { Container, Grid, Cell } from '@arch-ui/layout';
 import { PageTitle } from '@arch-ui/typography';
@@ -13,7 +13,6 @@ import { useAdminMeta } from '../../providers/AdminMeta';
 
 import useResizeObserver from 'use-resize-observer';
 import throttle from 'lodash.throttle';
-import gql from 'graphql-tag';
 
 const getCountQuery = lists => {
   if (!lists) return null;

packages/app-admin-ui/client/pages/Item/index.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { Fragment, Suspense, useMemo, useCallback, useState, useRef, useEffect } from 'react';
-import { useMutation, useQuery } from '@apollo/react-hooks';
+import { useMutation, useQuery } from '@apollo/client';
 import { useHistory, useParams } from 'react-router-dom';
 import { useToasts } from 'react-toast-notifications';
 import memoizeOne from 'memoize-one';

packages/app-admin-ui/client/pages/Signin.js

@@ -9,8 +9,7 @@ import { Input } from '@arch-ui/input';
 import { colors, gridSize } from '@arch-ui/theme';
 import { PageTitle, Title } from '@arch-ui/typography';
 
-import { useMutation } from '@apollo/react-hooks';
-import gql from 'graphql-tag';
+import { useMutation, gql } from '@apollo/client';
 
 import { upcase } from '@keystonejs/utils';
 

packages/app-admin-ui/client/pages/Signout.js

@@ -4,8 +4,7 @@ import { jsx } from '@emotion/core';
 
 import { Fragment } from 'react';
 
-import { useMutation } from '@apollo/react-hooks';
-import gql from 'graphql-tag';
+import { useMutation, gql } from '@apollo/client';
 
 import { CheckIcon } from '@primer/octicons-react';
 import { Button } from '@arch-ui/button';

packages/app-admin-ui/client/providers/List.js

@@ -1,5 +1,5 @@
 import React, { useContext, createContext, useState } from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 
 import { useListUrlState } from '../pages/List/dataHooks';
 import { deconstructErrorsToDataShape, useListSelect } from '../util';

packages/app-admin-ui/client/public.js

@@ -1,6 +1,6 @@
 import React, { useMemo, Suspense } from 'react';
 import ReactDOM from 'react-dom';
-import { ApolloProvider } from '@apollo/react-hooks';
+import { ApolloProvider } from '@apollo/client';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { ToastProvider } from 'react-toast-notifications';
 import { Global } from '@emotion/core';

packages/app-admin-ui/package.json

@@ -8,7 +8,7 @@
     "node": ">=10.0.0"
   },
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.5",
+    "@apollo/client": "^3.0.2",
     "@arch-ui/alert": "^0.0.17",
     "@arch-ui/badge": "^0.0.16",
     "@arch-ui/button": "^0.0.20",
@@ -45,11 +45,7 @@
     "@keystonejs/utils": "^5.4.2",
     "@primer/octicons-react": "^10.0.0",
     "@types/react": "^16.8.12",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-error": "^1.1.12",
-    "apollo-upload-client": "^13.0.0",
+    "apollo-upload-client": "^14.1.0",
     "apply-ref": "^0.2.0",
     "babel-loader": "^8.0.5",
     "babel-plugin-emotion": "^10.0.27",
@@ -63,7 +59,6 @@
     "falsey": "^1.0.0",
     "file-loader": "^3.0.1",
     "graphql": "^14.6.0",
-    "graphql-tag": "^2.10.3",
     "html-webpack-plugin": "^4.2.0",
     "lodash.debounce": "^4.0.8",
     "lodash.set": "^4.3.2",