Add apollo state func

examples/with-apollo/lib/apolloClient.js

@@ -3,6 +3,8 @@ import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
 import { concatPagination } from '@apollo/client/utilities'
 import merge from 'deepmerge'
 
+export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__'
+
 let apolloClient
 
 function createApolloClient() {
@@ -47,7 +49,18 @@ export function initializeApollo(initialState = null) {
   return _apolloClient
 }
 
-export function useApollo(initialState) {
-  const store = useMemo(() => initializeApollo(initialState), [initialState])
+export function addApolloState(client, pageProps) {
+  if (pageProps?.props) {
+    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract()
+  }
+
+  return pageProps
+}
+
+export function useApollo(pageProps) {
+  const store = useMemo(
+    () => initializeApollo(pageProps[APOLLO_STATE_PROP_NAME]),
+    [pageProps[APOLLO_STATE_PROP_NAME]]
+  )
   return store
 }

examples/with-apollo/pages/_app.js

@@ -2,7 +2,7 @@ import { ApolloProvider } from '@apollo/client'
 import { useApollo } from '../lib/apolloClient'
 
 export default function App({ Component, pageProps }) {
-  const apolloClient = useApollo(pageProps.initialApolloState)
+  const apolloClient = useApollo(pageProps)
 
   return (
     <ApolloProvider client={apolloClient}>

examples/with-apollo/pages/index.js

@@ -6,7 +6,7 @@ import PostList, {
   ALL_POSTS_QUERY,
   allPostsQueryVars,
 } from '../components/PostList'
-import { initializeApollo } from '../lib/apolloClient'
+import { initializeApollo, addApolloState } from '../lib/apolloClient'
 
 const IndexPage = () => (
   <App>
@@ -25,12 +25,10 @@ export async function getStaticProps() {
     variables: allPostsQueryVars,
   })
 
-  return {
-    props: {
-      initialApolloState: apolloClient.cache.extract(),
-    },
+  return addApolloState(apolloClient, {
+    props: {},
     revalidate: 1,
-  }
+  })
 }
 
 export default IndexPage