Persisting InMemoryCache when using SSR

Hi there,

What is the recommended way to persist InMemoryCache when using server side rendering?

If my app was not server side rendered I could just persist to localStorage.

await persistCache({
  cache,
  storage: window.localStorage,
});

Having trouble trying to figure out how to persist InMemoryCache when using NextJS.

[ajhool]

In my app, I’m using:

import { persistCache } from 'apollo-cache-persist';
import { InMemoryCache } from 'apollo-cache-inmemory';

const initCache = (initialState?: any) => {
  const cache = new InMemoryCache().restore(initialState || {});
  
  /**
   * Cache uses localStorage to save data.
   * 
   * This cache is used by Apollo (graphql client).
   */
  if(typeof window !== 'undefined') {
    persistCache({
      cache,
      storage: window.localStorage
    });
  }
  
  return cache;
}

export default initCache;

I believe this approach means that SSR won’t be able to access the cache but the client will access the cache rather than making network calls once the initial SSR has completed. All calls made from the client will have access to the cache.

[adrianos10]

I think I’ve managed to add apollo cache persist based on existing example in Next.js - https://github.com/vercel/next.js/pull/29718