update to apollo-client v3

.storybook/preview.js

@@ -20,7 +20,7 @@ export const parameters = {
 };
 
 // If you need to mock apollo queries
-//import { MockedProvider } from "@apollo/react-testing";
+//import { MockedProvider } from "@apollo/react/testing";
 //import mocks from "add path to your graphql mocks here"
 //const withApolloMockProvider = (storyFn) => (
 //  <MockedProvider mocks={mocks} addTypename={false}>

package.json

@@ -44,18 +44,11 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@apollo/react-hooks": "3.1.3",
-    "@apollo/react-ssr": "3.1.3",
-    "@apollo/react-testing": "3.1.4",
+    "@apollo/client": "^3.2.0",
     "@material-ui/core": "^4.10.2",
     "@mdx-js/loader": "^1.6.6",
     "@mdx-js/react": "^1.6.13",
     "@next/mdx": "^9.4.4",
-    "apollo-cache-inmemory": "1.6.6",
-    "apollo-client": "2.6.9",
-    "apollo-link": "1.2.14",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "1.5.17",
     "apollo-server-express": "2.14.2",
     "babel-jest": "26.0.1",
     "babel-plugin-istanbul": "6.0.0",

packages/@vulcan/next-apollo/apolloClient.ts

@@ -8,13 +8,16 @@ import {
   NormalizedCacheObject
 } from "@apollo/client";
 */
-import { ApolloClient } from "@apollo/client";
+import { IncomingHttpHeaders } from "http";
+import { ApolloClient, from, createHttpLink } from "@apollo/client";
 import { InMemoryCache, NormalizedCacheObject } from "@apollo/client/cache";
-import { createHttpLink } from "apollo-link-http";
-import { from } from "apollo-link";
-import fetch from "isomorphic-unfetch";
+// TODO: Isomorphic-unfetch will produce a window not defined after a Webpack build for unknow reason "isomorphic-unfetch";
+// next-with-apollo depends on it already internally, so we had to add a Webpack alias too to bypass it
+import fetch from "cross-fetch";
 import { NextPageContext } from "next";
 import { isServerRenderCtx } from "@vulcan/next-utils";
+import debug from "debug";
+const debugApollo = debug("vn:apollo");
 
 import errorLink from "./links/error";
 
@@ -28,19 +31,61 @@ const httpLink = (graphqlUri: string, ctx?: NextPageContext) =>
     fetch, // pass our custom fetch (here we need an isomorphic call)
   });
 
+export interface CreateApolloClientArgs {
+  graphqlUri: string;
+  ctx?: NextPageContext;
+  initialState?: NormalizedCacheObject;
+  headers?: IncomingHttpHeaders;
+}
+
 // graphqlUri must be specified at apollo client initialization
-export default function createApolloClient(
-  graphqlUri: string,
-  initialState: NormalizedCacheObject,
-  ctx?: NextPageContext
-) {
+export default function createApolloClient({
+  graphqlUri,
+  initialState,
+  ctx,
+}: CreateApolloClientArgs) {
   // The `ctx` (NextPageContext) will only be present on the server.
   // use it to extract auth headers (ctx.req) or similar.
-  return new ApolloClient({
+  debugApollo("Creating an Apollo client");
+  const client = new ApolloClient({
     name: "default-client",
     connectToDevTools: !Boolean(ctx),
     ssrMode: Boolean(ctx),
     link: from([errorLink, httpLink(graphqlUri, ctx)]),
     cache: new InMemoryCache().restore(initialState),
   });
+  if (!ctx) {
+    // client-side, store the Apollo client as the default upon creation
+    debugApollo("Storing new Apollo client as the default client");
+    if (!defaultApolloClient) {
+      defaultApolloClient = client;
+    } else {
+      debugApollo("Default apollo client already initialized, doing nothing");
+    }
+  }
+  return client;
 }
+
+// Create client-side Apollo client once
+// We want this initialization to happen once for all
+let defaultApolloClient;
+
+/**
+ * Get apollo client, either in the context of SSR rendering
+ * or client side
+ * @param params
+ */
+export const getApolloClient = (params?: CreateApolloClientArgs) => {
+  if (params && isServerRenderCtx(params.ctx)) {
+    // TODO: get client from request if any instead of creating it systematically
+    return createApolloClient(params);
+  }
+  // default apolloClient, note that it won't have any caching
+  // to be used in services for example, outside of React
+  if (!defaultApolloClient) {
+    throw new Error(
+      "Apollo client not initialized, did you wrap your page with `withApollo?`"
+    );
+  }
+  return defaultApolloClient;
+};

packages/@vulcan/next-apollo/index.ts

@@ -1 +1,2 @@
-export { default as withApollo } from "./withApollo"
+export { default as withApollo } from "./withApollo";
+export { getApolloClient } from "./apolloClient";

packages/@vulcan/next-apollo/links/error.ts

@@ -1,5 +1,4 @@
-// import { onError } from "@apollo/link-error";
-import { onError } from "apollo-link-error";
+import { onError } from "@apollo/client/link/error";
 import { GraphQLError } from "graphql";
 
 const locationsToStr = (locations: GraphQLError["locations"] = []) =>

packages/@vulcan/next-apollo/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@vulcan/next-apollo",
+  "version": "0.0.1",
+  "description": "Vulcan Next Apollo bindings",
+  "main": "./dist/index.js",
+  "author": "eric-burel <[email protected]>",
+  "homepage": "https://github.com/VulcanJS/vulcan-npm#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VulcanJS/vulcan-npm.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1",
+    "build": "webpack --config ./webpack.config.js"
+  },
+  "bugs": {
+    "url": "https://github.com/VulcanJS/vulcan-npm/issues"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.2.0",
+    "@vulcan/next-utils": "^0.0.1",
+    "next-with-apollo": "^5.1.0"
+  }
+}

packages/@vulcan/next-apollo/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": ["*.ts"]
+}

packages/@vulcan/next-apollo/webpack.config.js

@@ -0,0 +1,10 @@
+const merge = require("webpack-merge");
+const path = require("path");
+const baseConfig = require("../../webpack/webpack.config.base.common.prod");
+//const merge = require('webpack-merge')
+module.exports = merge(baseConfig, {
+  entry: path.resolve(__dirname, "./index.ts"),
+  output: {
+    path: path.resolve(__dirname, "dist"),
+  },
+});

packages/@vulcan/next-apollo/withApollo.tsx

@@ -4,6 +4,7 @@
  * - you can pass "ssr: true" instead of directly passing "getDataFromTree"
  * - you can change the graphqlUri
  */
+import React from "react";
 import withApollo, { WithApolloOptions } from "next-with-apollo";
 import createApolloClient from "./apolloClient";
 import { NextPage } from "next";
@@ -12,9 +13,9 @@ import { NextPage } from "next";
 //    ApolloProvider,
 //    NormalizedCacheObject
 //} from "@apollo/client";
-import { ApolloProvider } from "@apollo/react-hooks";
-import { NormalizedCacheObject } from "apollo-cache-inmemory";
-import { getDataFromTree as getDataFromTreeDefault } from "@apollo/react-ssr";
+import { ApolloProvider } from "@apollo/client";
+import { NormalizedCacheObject } from "@apollo/client/cache";
+import { getDataFromTree as getDataFromTreeDefault } from "@apollo/client/react/ssr";
 
 // support the same options as next-with-apollo, but also additional client config + ssr activation
 export interface VulcanWithApolloOptions extends WithApolloOptions {
@@ -26,7 +27,7 @@ const defaultOptions: Partial<VulcanWithApolloOptions> = {
   ssr: true,
 };
 const initApolloClient = (graphqlUri: string) => ({ initialState, ctx }) => {
-  return createApolloClient(graphqlUri, initialState, ctx);
+  return createApolloClient({ graphqlUri, initialState, ctx });
 };
 const renderWithApolloProvider = ({ Page, props }) => {
   return (
@@ -35,7 +36,10 @@ const renderWithApolloProvider = ({ Page, props }) => {
     </ApolloProvider>
   );
 };
-const vulcanWithApollo = (Page: NextPage, options: VulcanWithApolloOptions = {}) => {
+const vulcanWithApollo = (
+  Page: NextPage,
+  options: VulcanWithApolloOptions = {}
+) => {
   const mergedOptions = { ...defaultOptions, ...options };
   const {
     graphqlUri,
@@ -49,9 +53,11 @@ const vulcanWithApollo = (Page: NextPage, options: VulcanWithApolloOptions = {})
 
   const withApolloOptions = { getDataFromTree, renderFromOption };
 
+  // next-with-apollo is using typings from Apollo v2, we need to ignore the error until it's updated 2654
+  // @ts-ignore
   return withApollo<NormalizedCacheObject>(initApolloClient(graphqlUri), {
     render: renderWithApolloProvider,
   })(Page, withApolloOptions);
 };
 
-export default vulcanWithApollo;
+export default vulcanWithApollo;

src/pages/_app.tsx

@@ -17,7 +17,7 @@ export function reportWebVitals(metric) {
 // Uncomment to enable app-wide Apollo SSR
 // Otherwise you'll need to call withApollo on each page
 import { withApollo } from "@vulcan/next-apollo";
-import { getDataFromTree } from "@apollo/react-ssr";
+import { getDataFromTree } from "@apollo/client/react/ssr";
 */
 
 // import environment from '@vulcan/multi-env-demo';

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { useQuery /*, useMutation*/ } from "@apollo/react-hooks";
+import { useQuery /*, useMutation*/ } from "@apollo/client";
 import gql from "graphql-tag";
 import Home from "~/components/home";
 //import { useForm } from "react-hook-form";

src/pages/vns/debug/apolloSsr.tsx

@@ -1,4 +1,4 @@
-import { useQuery /*, useMutation*/ } from "@apollo/react-hooks";
+import { useQuery /*, useMutation*/ } from "@apollo/client";
 import gql from "graphql-tag";
 import { withApollo } from "@vulcan/next-apollo";
 

src/pages/vns/debug/mongo.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from "@apollo/react-hooks";
+import { useQuery } from "@apollo/client";
 import gql from "graphql-tag";
 import { withApollo } from "@vulcan/next-apollo";
 const MongoDebugPage = () => {