feat(apollo-link-accounts)!: update to use @apollo/client 3 (#1030)

Author: pradel

examples/graphql-server-typescript/package.json

@@ -18,18 +18,17 @@
     "@accounts/server": "^0.28.0",
     "@graphql-modules/core": "0.7.17",
     "@graphql-tools/merge": "6.0.11",
-    "apollo-server": "2.14.4",
+    "apollo-server": "2.16.0",
     "graphql": "14.6.0",
-    "graphql-tools": "5.0.0",
-    "lodash": "4.17.15",
-    "mongoose": "5.9.13",
+    "lodash": "4.17.19",
+    "mongoose": "5.9.25",
     "tslib": "2.0.0"
   },
   "devDependencies": {
-    "@types/mongoose": "5.7.16",
+    "@types/mongoose": "5.7.32",
     "@types/node": "14.0.13",
-    "nodemon": "2.0.3",
-    "ts-node": "8.10.1",
-    "typescript": "3.8.3"
+    "nodemon": "2.0.4",
+    "ts-node": "8.10.2",
+    "typescript": "3.9.7"
   }
 }

examples/react-graphql-typescript/package.json

@@ -28,30 +28,25 @@
     "@accounts/client": "^0.28.0",
     "@accounts/client-password": "^0.28.0",
     "@accounts/graphql-client": "^0.28.0",
-    "@apollo/react-hooks": "3.1.5",
-    "@material-ui/core": "4.9.13",
-    "@material-ui/styles": "4.9.13",
-    "apollo-cache-inmemory": "1.6.6",
-    "apollo-client": "2.6.9",
-    "apollo-link": "1.2.14",
-    "apollo-link-http": "1.5.17",
+    "@apollo/client": "3.0.2",
+    "@material-ui/core": "4.11.0",
+    "@material-ui/styles": "4.10.0",
     "graphql": "14.6.0",
     "graphql-tag": "2.10.4",
     "qrcode.react": "1.0.0",
     "react": "16.13.1",
-    "react-apollo": "2.5.8",
     "react-dom": "16.13.1",
-    "react-router-dom": "5.1.2",
+    "react-router-dom": "5.2.0",
     "tslib": "2.0.0"
   },
   "devDependencies": {
     "@types/node": "14.0.13",
-    "@types/qrcode.react": "1.0.0",
-    "@types/react": "16.9.36",
+    "@types/qrcode.react": "1.0.1",
+    "@types/react": "16.9.43",
     "@types/react-dom": "16.9.8",
-    "@types/react-router": "5.1.7",
+    "@types/react-router": "5.1.8",
     "@types/react-router-dom": "5.1.5",
     "react-scripts": "3.4.1",
-    "typescript": "3.7.5"
+    "typescript": "3.9.7"
   }
 }

examples/react-graphql-typescript/src/Home.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { RouteComponentProps, Link, Redirect } from 'react-router-dom';
 import { Button, Typography } from '@material-ui/core';
 import gql from 'graphql-tag';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 
 import { accountsClient, accountsGraphQL } from './utils/accounts';
 

examples/react-graphql-typescript/src/TwoFactor.tsx

@@ -5,7 +5,7 @@ import QRCode from 'qrcode.react';
 import { accountsGraphQL } from './utils/accounts';
 
 const TwoFactor = () => {
-  const [secret, setSecret] = useState();
+  const [secret, setSecret] = useState<any>();
   const [oneTimeCode, setOneTimeCode] = useState('');
 
   const fetchTwoFactorSecret = async () => {
@@ -44,7 +44,7 @@ const TwoFactor = () => {
         <Input
           id="one-time-code"
           value={oneTimeCode}
-          onChange={e => setOneTimeCode(e.target.value)}
+          onChange={(e) => setOneTimeCode(e.target.value)}
         />
       </FormControl>
       <Button onClick={onSetTwoFactor}>Submit</Button>

examples/react-graphql-typescript/src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ApolloProvider } from '@apollo/react-hooks';
+import { ApolloProvider } from '@apollo/client';
 import { apolloClient } from './utils/accounts';
 import Router from './Router';
 

examples/react-graphql-typescript/src/utils/accounts.ts

@@ -2,10 +2,7 @@ import { AccountsClient } from '@accounts/client';
 import { AccountsClientPassword } from '@accounts/client-password';
 import GraphQLClient from '@accounts/graphql-client';
 import { accountsLink } from '@accounts/apollo-link';
-import { ApolloClient } from 'apollo-client';
-import { HttpLink } from 'apollo-link-http';
-import { from } from 'apollo-link';
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import { ApolloClient, InMemoryCache, HttpLink, from } from '@apollo/client';
 import gql from 'graphql-tag';
 
 // This auth link will inject the token in the headers on every request you make using apollo client

packages/apollo-link-accounts/package.json

@@ -23,13 +23,15 @@
     "url": "https://github.com/accounts-js/accounts/tree/master/packages/apollo-link"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@accounts/client": "^0.28.0",
-    "apollo-link": "1.2.14",
-    "rimraf": "3.0.2"
+  "peerDependencies": {
+    "@apollo/client": "^3.0.0"
   },
   "dependencies": {
-    "apollo-link-context": "1.0.20",
     "tslib": "2.0.0"
+  },
+  "devDependencies": {
+    "@accounts/client": "^0.28.0",
+    "@apollo/client": "3.0.2",
+    "rimraf": "3.0.2"
   }
 }

packages/apollo-link-accounts/src/index.ts

@@ -1,5 +1,5 @@
-import { setContext } from 'apollo-link-context';
-import { ApolloLink } from 'apollo-link';
+import { ApolloLink } from '@apollo/client';
+import { setContext } from '@apollo/client/link/context';
 import { AccountsClient } from '@accounts/client';
 
 type AccountsClientFactory = () => AccountsClient | Promise<AccountsClient>;

packages/e2e/__tests__/servers/server-graphql.ts

@@ -5,7 +5,7 @@ import { AccountsGraphQLClient } from '@accounts/graphql-client';
 import { AccountsPassword } from '@accounts/password';
 import { AccountsServer } from '@accounts/server';
 import { DatabaseInterface, User } from '@accounts/types';
-import ApolloClient from 'apollo-boost';
+import { ApolloClient, InMemoryCache } from '@apollo/client';
 import { ApolloServer } from 'apollo-server';
 import fetch from 'node-fetch';
 
@@ -82,7 +82,10 @@ export class ServerGraphqlTest implements ServerTestInterface {
       context,
     });
 
-    const apolloClient = new ApolloClient({ uri: `http://localhost:${this.port}` });
+    const apolloClient = new ApolloClient({
+      uri: `http://localhost:${this.port}`,
+      cache: new InMemoryCache(),
+    });
 
     const accountsClientGraphQL = new AccountsGraphQLClient({
       graphQLClient: apolloClient,

packages/e2e/package.json

@@ -47,8 +47,8 @@
     "@accounts/server": "^0.28.0",
     "@accounts/typeorm": "^0.28.0",
     "@accounts/types": "^0.28.0",
+    "@apollo/client": "3.0.2",
     "@graphql-modules/core": "0.7.17",
-    "apollo-boost": "0.4.8",
     "apollo-server": "2.14.4",
     "body-parser": "1.19.0",
     "core-js": "3.6.5",