Not persisting cache with apollo-cache-persist

[BjornDCode]

I have a project where I need to persist the cache in localStorage using 'apollo-cache-persist'. I can see the cache being saved in localStorage, but when refreshing the page it's re-running all queries again (I can see in the network tab in dev tools).

I'm using both 'apollo-cache-inmemory' and 'apollo-link-state'. At first I though the issue was related to 'apollo-link-state' and that it might be related to this issue

But as I said earlier, it's all queries running again on a page refresh.

I've tried using both 'persistCache' and 'CachePersistor' from apollo-cache-persist.

This is how I've tried to implement it:

import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { persistCache } from 'apollo-cache-persist';
import { withClientState } from 'apollo-link-state';

const cache = new InMemoryCache();
persistCache({ cache, storage: window.localStorage });

const httpLink = new HttpLink({...});
const stateLink = withClientState({...});

const apolloClient = new ApolloClient({
     link: ApolloLink.from([stateLink, httpLink]),
     cache: cache,
     connectToDevTools: true
});

const apolloProvider = new VueApollo({
     defaultClient: apolloClient
});

new Vue({
    el: '#app',
    provide: apolloProvider,
    render: h => h(App)
})

Is it even possible to use apollo-cache-persist with Vue Apollo and if so are there any examples where it has been implemented?

[NoBrainSkull]

I'm trying as well to get this working... Have you been able to get anything more ? I understand that you do have a correct window objet. Mine is undefined despite I'm in a SPA application so that the code is run client-side (process.browser === true).

[NoBrainSkull]

Ok I got it working this way :

import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { withClientState } from 'apollo-link-state'
import { persistCache } from 'apollo-cache-persist'
import stores from '../local-state'

export default ctx => {
  // CONFIGURE REMOTE ENDPOINT
  const httpLink = new HttpLink({
    uri: 'https://fsdfessdfsdfsdfsd.cloudfront.net/graphql'
  })

  // CONFIGURE CACHE
  const cache = new InMemoryCache()
  if (process.browser) {
    persistCache({
      cache,
      storage: window.localStorage
    })
  }

  // HANDLE LOCAL STATE
  const stateLink = withClientState({
    cache,
    defaults: stores.defaultState,
    resolvers: stores.resolvers
  })

  const link = stateLink.concat(httpLink)
  return { link, cache }
}

Don't know why I need if(process.browser) since I think I'm using nuxt spa mode correctly. But it works. I didn't !

[NoBrainSkull]

@Akryum I think we can close this issue. apollo-cache-persist works fine with vue-apollo if the app do has access to window object.