add fully configured ApolloProvider

pages/_app.tsx

@@ -1,7 +1,9 @@
 import '@kichiyaki/roboto';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { AppProps } from 'next/app';
+import { ApolloProvider } from '@apollo/client';
 import ThemeProvider from 'libs/material-ui/ThemeProvider';
+import { createClient, getApolloState } from '../src/libs/graphql';
 
 function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
@@ -11,9 +13,16 @@ function MyApp({ Component, pageProps }: AppProps) {
     }
   }, []);
 
+  const apolloState = getApolloState(pageProps);
+  const client = useMemo(() => {
+    return createClient({ state: apolloState });
+  }, [apolloState]);
+
   return (
     <ThemeProvider>
-      <Component {...pageProps} />
+      <ApolloProvider client={client}>
+        <Component {...pageProps} />
+      </ApolloProvider>
     </ThemeProvider>
   );
 }

src/libs/graphql/createClient.ts

@@ -19,35 +19,38 @@ const getApiURI = () => {
 
 export interface CreateClientOpts {
   uri?: string;
-  data?: NormalizedCacheObject;
+  state?: NormalizedCacheObject;
 }
 
-const createClient = ({
+export const createClient = ({
   uri = getApiURI(),
-  data,
+  state,
 }: CreateClientOpts = {}): ApolloClient<NormalizedCacheObject> => {
   const ssrMode = typeof window === 'undefined';
   if (!ssrMode && client) {
-    if (data) {
-      client.cache.restore(data);
+    if (state) {
+      client.cache.restore(state);
     }
     return client;
   }
 
   const _client = new ApolloClient({
     queryDeduplication: true,
-    cache: new InMemoryCache().restore(data ?? {}),
+    cache: new InMemoryCache().restore(state ?? {}),
     ssrMode,
     link: ApolloLink.from([
       onError(({ graphQLErrors, networkError }) => {
         if (process.env.NODE_ENV === 'development') {
-          if (graphQLErrors)
-            graphQLErrors.map(({ message, locations, path }) =>
+          if (graphQLErrors) {
+            graphQLErrors.forEach(({ message, locations, path }) =>
               console.log(
                 `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
               )
             );
-          if (networkError) console.log(`[Network error]: ${networkError}`);
+          }
+          if (networkError) {
+            console.log(`[Network error]: ${networkError}`);
+          }
         }
       }),
       new HttpLink({ uri }),
@@ -58,5 +61,3 @@ const createClient = ({
   client = _client;
   return client;
 };
-
-export default createClient;

src/libs/graphql/index.ts

@@ -0,0 +1,3 @@
+export * from './createClient';
+export * from './ssr';
+export * from './types';

src/libs/graphql/ssr.ts

@@ -0,0 +1,23 @@
+import { isPlainObject } from 'lodash';
+import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
+
+const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__';
+
+export const addApolloState = (
+  client: ApolloClient<NormalizedCacheObject>,
+  pageProps: any
+) => {
+  if (isPlainObject(pageProps)) {
+    pageProps[APOLLO_STATE_PROP_NAME] = client.cache.extract();
+  }
+  return pageProps;
+};
+
+export const getApolloState = (
+  pageProps: any
+): NormalizedCacheObject | undefined => {
+  if (pageProps[APOLLO_STATE_PROP_NAME]) {
+    return pageProps[APOLLO_STATE_PROP_NAME];
+  }
+  return undefined;
+};