apollo-state-link does not hold state in cache when page is refreshed

Question

I noticed that when I update my cache locally on the clientside and it routes to another page, the cache persists with the data.

However, when I refresh that page, the cache is cleared. Is there a way to keep the cache state even after refreshing?

Answer 1

Apollo's InMemoryCache is, well, in-memory, so it's not persisted between page loads. The recommended way to persist your cache is to use apollo-cache-persist. Example usage:

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

const cache = new InMemoryCache({...})

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

const client = new ApolloClient({
  cache,
  // other client options
})

For advanced configuration and usage, check the repo. Also, be aware if you're using SSR, there are known issues with using this library. You could also checkout apollo-cache-instorage, which might be more SSR-friendly.