Upgrade apollo and use official apollo react hooks part 1 (#1808)

* use react-apollo instead of react-apollo hooks
keystonejs · Oct 27, 2019 · 5595e4c · 5595e4c
1 parent 7fa3f17
commit 5595e4c
Show file tree

Hide file tree

Showing 14 changed files with 281 additions and 164 deletions.
diff --git a/.changeset/unlucky-waves-carry.md b/.changeset/unlucky-waves-carry.md
@@ -0,0 +1,9 @@
+---
+'@keystonejs/demo-project-blog': patch
+'@keystonejs/demo-project-meetup': patch
+'@keystonejs/apollo-helpers': patch
+'@keystonejs/app-admin-ui': patch
+'@keystonejs/fields': patch
+---
+
+upgrade `react-apollo` and replace use of `react-apollo-hooks` with `react-apollo`. `react-apollo` has similar hooks api to `react-apollo-hooks`
diff --git a/demo-projects/blog/package.json b/demo-projects/blog/package.json
@@ -31,7 +31,7 @@
     "@keystonejs/keystone": "^5.0.0",
     "@keystonejs/oembed-adapters": "^5.0.0",
     "apollo-boost": "^0.3.1",
-    "apollo-client": "^2.5.1",
+    "apollo-client": "^2.6.4",
     "apollo-upload-client": "^10.0.0",
     "cross-env": "^5.2.0",
     "date-fns": "^1.30.1",
@@ -41,7 +41,7 @@
     "next": "^9.0.0",
     "node-fetch": "^2.3.0",
     "react": "^16.8.6",
-    "react-apollo": "2.4.0",
+    "react-apollo": "^3.1.3",
     "react-dom": "^16.8.6"
   }
 }
diff --git a/demo-projects/meetup/package.json b/demo-projects/meetup/package.json
@@ -27,7 +27,7 @@
     "@keystonejs/keystone": "^5.0.0",
     "@keystonejs/session": "^5.0.0",
     "apollo-boost": "^0.3.1",
-    "apollo-client": "^2.5.1",
+    "apollo-client": "^2.6.4",
     "body-parser": "^1.18.2",
     "cross-env": "^5.2.0",
     "date-fns": "^1.30.1",
@@ -42,8 +42,7 @@
     "next": "^9.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
-    "react-apollo": "2.4.0",
-    "react-apollo-hooks": "^0.4.4",
+    "react-apollo": "^3.1.3",
     "react-dom": "^16.8.6",
     "react-toast-notifications": "^2.2.4",
     "react-use-form-state": "^0.10.0",

diff --git a/demo-projects/meetup/site/components/AvatarUpload.js b/demo-projects/meetup/site/components/AvatarUpload.js
@@ -3,16 +3,16 @@ import { jsx } from '@emotion/core';
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
-import { useQuery, useMutation } from 'react-apollo-hooks';
+import { useQuery, useMutation } from 'react-apollo';
 import { useToasts } from 'react-toast-notifications';
 import { Avatar } from './Avatar';
 
 const validImageTypes = 'image/gif, image/jpeg, image/jpg, image/png';
 
 export const AvatarUpload = ({ userId, size }) => {
   const [loadingImage, setLoadingImage] = useState(false);
-  const updateAvatar = useMutation(UPDATE_AVATAR);
-  const { data, loading } = useQuery(USER, { variables: { userId } });
+  const [updateAvatar] = useMutation(UPDATE_AVATAR);
+  const { data = {}, loading } = useQuery(USER, { variables: { userId } });
   const { addToast } = useToasts();
   if (loading) return null;
 

diff --git a/demo-projects/meetup/site/pages/_app.js b/demo-projects/meetup/site/pages/_app.js
@@ -3,7 +3,6 @@ import App, { Container } from 'next/app';
 import Head from 'next/head';
 import gql from 'graphql-tag';
 import { ApolloProvider } from 'react-apollo';
-import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks';
 import { ToastProvider } from 'react-toast-notifications';
 
 import withApollo from '../lib/withApollo';
@@ -42,17 +41,15 @@ class MyApp extends App {
         <Container>
           <ApolloProvider client={apolloClient}>
             <AuthProvider initialUserValue={user}>
-              <ApolloHooksProvider client={apolloClient}>
-                <Head>
-                  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
-                  <meta
-                    name="viewport"
-                    content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
-                  />
-                </Head>
-                <StylesBase />
-                <Component {...pageProps} />
-              </ApolloHooksProvider>
+              <Head>
+                <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+                <meta
+                  name="viewport"
+                  content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
+                />
+              </Head>
+              <StylesBase />
+              <Component {...pageProps} />
             </AuthProvider>
           </ApolloProvider>
         </Container>

diff --git a/demo-projects/meetup/site/pages/profile.js b/demo-projects/meetup/site/pages/profile.js
@@ -2,7 +2,7 @@ import React, { Component, useState, useCallback } from 'react';
 import gql from 'graphql-tag';
 import { useFormState } from 'react-use-form-state';
 import { useToasts } from 'react-toast-notifications';
-import { useMutation } from 'react-apollo-hooks';
+import { useMutation } from 'react-apollo';
 
 import { AvatarUpload } from '../components/AvatarUpload';
 import Meta from '../components/Meta';
@@ -50,7 +50,7 @@ const Profile = ({ user }) => {
   const [validationErrors, setValidationErrors] = useState({});
   const [updatingUser, setUpdatingUser] = useState(false);
 
-  const updateUser = useMutation(UPDATE_USER);
+  const [updateUser] = useMutation(UPDATE_USER);
 
   const submitDisabled =
     updatingUser ||

diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "@changesets/cli": "^2.0.4",
     "@manypkg/cli": "^0.7.0",
     "all-contributors-cli": "^6.2.0",
-    "apollo-client": "^2.5.1",
+    "apollo-client": "^2.6.4",
     "babel-eslint": "^10.0.1",
     "babel-plugin-emotion": "^10.0.14",
     "chalk": "^2.4.2",

diff --git a/packages/apollo-helpers/package.json b/packages/apollo-helpers/package.json
@@ -18,7 +18,7 @@
     "lodash.mapvalues": "^4.6.0",
     "memoize-one": "^4.0.2",
     "react-adopt": "^0.6.0",
-    "react-apollo": "2.4.0"
+    "react-apollo": "^3.1.3"
   },
   "peerDependencies": {
     "react": "^16.8.6"

diff --git a/packages/app-admin-ui/client/index.js b/packages/app-admin-ui/client/index.js
@@ -1,7 +1,6 @@
 import React, { Suspense, useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import { ApolloProvider } from 'react-apollo';
-import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks'; // FIXME: Use the provided API when hooks ready
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
 import { ToastProvider } from 'react-toast-notifications';
 import { Global } from '@emotion/core';
@@ -40,95 +39,89 @@ const Keystone = () => {
 
   return (
     <ApolloProvider client={apolloClient}>
-      <ApolloHooksProvider client={apolloClient}>
-        <KeyboardShortcuts>
-          <ToastProvider components={{ ToastContainer }}>
-            <ConnectivityListener />
-            <Global styles={globalStyles} />
-            <BrowserRouter>
-              <Switch>
-                <Route exact path={signinPath}>
-                  <Redirect to={adminPath} />
-                </Route>
-                <Route exact path={signoutPath} render={() => <SignoutPage {...adminMeta} />} />
-                <Route>
-                  <ScrollToTop>
-                    <Nav>
-                      <Suspense fallback={<PageLoading />}>
-                        <Switch>
-                          {findCustomPages(pages).map(page => (
-                            <Route
-                              exact
-                              key={page.path}
-                              path={`${adminPath}/${page.path}`}
-                              render={() => {
-                                const [Page] = readViews([pageViews[page.path]]);
-                                return <Page />;
-                              }}
-                            />
-                          ))}
+      <KeyboardShortcuts>
+        <ToastProvider components={{ ToastContainer }}>
+          <ConnectivityListener />
+          <Global styles={globalStyles} />
+          <BrowserRouter>
+            <Switch>
+              <Route exact path={signinPath}>
+                <Redirect to={adminPath} />
+              </Route>
+              <Route exact path={signoutPath} render={() => <SignoutPage {...adminMeta} />} />
+              <Route>
+                <ScrollToTop>
+                  <Nav>
+                    <Suspense fallback={<PageLoading />}>
+                      <Switch>
+                        {findCustomPages(pages).map(page => (
                           <Route
                             exact
-                            path={adminPath}
-                            render={() => <HomePage {...adminMeta} />}
-                          />
-                          <Route
-                            path={`${adminPath}/:listKey`}
-                            render={({
-                              match: {
-                                params: { listKey },
-                              },
-                            }) => {
-                              // TODO: Permission query to show/hide a list from the
-                              // menu
-                              const list = adminMeta.getListByPath(listKey);
-                              return list ? (
-                                <Switch>
-                                  <Route
-                                    exact
-                                    path={`${adminPath}/:list`}
-                                    render={routeProps => (
-                                      <ListPage
-                                        key={listKey}
-                                        list={list}
-                                        adminMeta={adminMeta}
-                                        routeProps={routeProps}
-                                      />
-                                    )}
-                                  />
-                                  <Route
-                                    exact
-                                    path={`${adminPath}/:list/:itemId`}
-                                    render={({
-                                      match: {
-                                        params: { itemId },
-                                      },
-                                    }) => (
-                                      <ItemPage
-                                        key={`${listKey}-${itemId}`}
-                                        list={list}
-                                        itemId={itemId}
-                                        {...adminMeta}
-                                      />
-                                    )}
-                                  />
-                                  <Route render={() => <InvalidRoutePage {...adminMeta} />} />
-                                </Switch>
-                              ) : (
-                                <ListNotFoundPage listKey={listKey} {...adminMeta} />
-                              );
+                            key={page.path}
+                            path={`${adminPath}/${page.path}`}
+                            render={() => {
+                              const [Page] = readViews([pageViews[page.path]]);
+                              return <Page />;
                             }}
                           />
-                        </Switch>
-                      </Suspense>
-                    </Nav>
-                  </ScrollToTop>
-                </Route>
-              </Switch>
-            </BrowserRouter>
-          </ToastProvider>
-        </KeyboardShortcuts>
-      </ApolloHooksProvider>
+                        ))}
+                        <Route exact path={adminPath} render={() => <HomePage {...adminMeta} />} />
+                        <Route
+                          path={`${adminPath}/:listKey`}
+                          render={({
+                            match: {
+                              params: { listKey },
+                            },
+                          }) => {
+                            // TODO: Permission query to show/hide a list from the
+                            // menu
+                            const list = adminMeta.getListByPath(listKey);
+                            return list ? (
+                              <Switch>
+                                <Route
+                                  exact
+                                  path={`${adminPath}/:list`}
+                                  render={routeProps => (
+                                    <ListPage
+                                      key={listKey}
+                                      list={list}
+                                      adminMeta={adminMeta}
+                                      routeProps={routeProps}
+                                    />
+                                  )}
+                                />
+                                <Route
+                                  exact
+                                  path={`${adminPath}/:list/:itemId`}
+                                  render={({
+                                    match: {
+                                      params: { itemId },
+                                    },
+                                  }) => (
+                                    <ItemPage
+                                      key={`${listKey}-${itemId}`}
+                                      list={list}
+                                      itemId={itemId}
+                                      {...adminMeta}
+                                    />
+                                  )}
+                                />
+                                <Route render={() => <InvalidRoutePage {...adminMeta} />} />
+                              </Switch>
+                            ) : (
+                              <ListNotFoundPage listKey={listKey} {...adminMeta} />
+                            );
+                          }}
+                        />
+                      </Switch>
+                    </Suspense>
+                  </Nav>
+                </ScrollToTop>
+              </Route>
+            </Switch>
+          </BrowserRouter>
+        </ToastProvider>
+      </KeyboardShortcuts>
     </ApolloProvider>
   );
 };

diff --git a/packages/app-admin-ui/client/pages/List/dataHooks.js b/packages/app-admin-ui/client/pages/List/dataHooks.js
@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import { __RouterContext } from 'react-router-dom';
 import debounce from 'lodash.debounce';
-import { useQuery } from 'react-apollo-hooks';
+import { useQuery } from 'react-apollo';
 
 import { deconstructErrorsToDataShape } from '../../util';
 import { pseudoLabelField } from './FieldSelect';
@@ -162,7 +162,7 @@ export function useListItems(listKey) {
   const [itemCount, setCount] = useState(0);
 
   const list = useList(listKey);
-  const { data } = useListQuery(listKey);
+  const { data = {} } = useListQuery(listKey);
 
   useEffect(() => {
     if (data[list.gqlNames.listQueryName]) {

diff --git a/packages/app-admin-ui/client/public.js b/packages/app-admin-ui/client/public.js
@@ -1,7 +1,6 @@
 import React, { useMemo, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { ApolloProvider } from 'react-apollo';
-import { ApolloProvider as ApolloHooksProvider } from 'react-apollo-hooks'; // FIXME: Use the provided API when hooks ready
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { ToastProvider } from 'react-toast-notifications';
 import { Global } from '@emotion/core';
@@ -31,27 +30,25 @@ const Keystone = () => {
 
   return (
     <ApolloProvider client={apolloClient}>
-      <ApolloHooksProvider client={apolloClient}>
-        <ToastProvider>
-          <ConnectivityListener />
-          <Global styles={globalStyles} />
-
-          {adminMeta.authStrategy ? (
-            <BrowserRouter>
-              <Switch>
-                <Route
-                  exact
-                  path={adminMeta.signoutPath}
-                  render={() => <SignoutPage {...adminMeta} />}
-                />
-                <Route render={() => <SigninPage {...adminMeta} />} />
-              </Switch>
-            </BrowserRouter>
-          ) : (
-            <InvalidRoutePage {...adminMeta} />
-          )}
-        </ToastProvider>
-      </ApolloHooksProvider>
+      <ToastProvider>
+        <ConnectivityListener />
+        <Global styles={globalStyles} />
+
+        {adminMeta.authStrategy ? (
+          <BrowserRouter>
+            <Switch>
+              <Route
+                exact
+                path={adminMeta.signoutPath}
+                render={() => <SignoutPage {...adminMeta} />}
+              />
+              <Route render={() => <SigninPage {...adminMeta} />} />
+            </Switch>
+          </BrowserRouter>
+        ) : (
+          <InvalidRoutePage {...adminMeta} />
+        )}
+      </ToastProvider>
     </ApolloProvider>
   );
 };