Examples with-Apollo generates server/client html mismatch when extracting Cache

Bug report

Describe the bug

It seems that there is something wrong in the initialization of the Apollo Client when running the http://localhost:3000/client-only page. If you run the example as is, there is no issue, but when extracting cache as an export the common error shows up with html mismatch.

react-dom.development.js?61bb:88 Warning: Expected server HTML to contain a matching <div> in <main>.

To Reproduce

Change the file apolloClient.js from

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    link: new HttpLink({
      uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
    }),
    cache: new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            allPosts: concatPagination(),
          },
        },
      },
    }),
  })
}

to

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    link: new HttpLink({
      uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
    }),
    cache: cache,
  })
}

and create a parallel file cache.js as follows:

import { InMemoryCache } from '@apollo/client'
import { concatPagination } from '@apollo/client/utilities'
export const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        allPosts: concatPagination(),
      },
    },
  },
})

Steps to reproduce the behavior, please provide code snippets or a repository:

Browse to http://localhost:3000/client-only

look at debugger console.

Warning: Expected server HTML to contain a matching <div> in <main>.
    in div (at PostList.js:48)
    in PostList (at client-only.js:17)
    in main (at App.js:3)
    in App (at client-only.js:8)
    in ClientOnlyPage (at _app.js:9)
    in ApolloProvider (at _app.js:8)
    in App
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

System information

• OS: OSX
• Browser (if applies) tested in chrome and FF
• Version of Next.js: [e.g. 9.5.5]
• Version of Node.js: [e.g. 6.14.8]

Additional context

This may seem trivial, but I can’t imagine not extracting cache to a separate file as there are tons of field policies that will get created and leaving that in the original file is good for an example, but not a real project.

Add any other context about the problem here.

Took all day to narrow this down. Arg.

[DennieMello]

What are you trying to achieve by putting the cache into a separate file?

I strongly recommending a factory instead:

cache.js

export default function createCache() {
  return new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          allPosts: concatPagination(),
        },
      },
    },
  })
}

apollo.js

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    link: new HttpLink({
      uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
    }),
    cache: createCache()
  })
}

The reason for this is that your client may be initialized on the server as well. Using a singleton cache that shares data between pages and requests decrease security and decrease performance.

• data may be leaked from one page to another
• data may be leaked from request to another
• the initial props payload will increase decreasing your performance

The whole day I could not understand what was the matter, until I found your answer. Thank you!

[HaNdTriX]

What are you trying to achieve by putting the cache into a separate file?

I strongly recommending a factory instead:

cache.js

export default function createCache() {
  return new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          allPosts: concatPagination(),
        },
      },
    },
  })
}

apollo.js

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === 'undefined',
    link: new HttpLink({
      uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
    }),
    cache: createCache()
  })
}

The reason for this is that your client may be initialized on the server as well. Using a singleton cache that shares data between pages and requests decrease security and decrease performance.

• data may be leaked from one page to another
• data may be leaked from request to another
• the initial props payload will increase decreasing your performance