Apollo-client: Persisting InMemoryCache when using SSR

Created on 18 Oct 2019 · 4Comments · Source: apollographql/apollo-client

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.

Source

fukuru

👍1

Most helpful comment

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.

ajhool on 1 Nov 2019

👍6 🎉2 🚀1

All 4 comments

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;

ajhool on 1 Nov 2019

👍6 🎉2 🚀1

@ajhool, thanks for sharing your setup. Can you please show how you are initializing the apollo client?