Data from persistCache are always loaded from the network

[rkrejcii]

I'm trying to use apollo-cache-persist. However, when the page is refreshed, my code is always loading the data from the network also with policies such as fetchPolicy: cache-first. Although the local storage has the proper apollo-cache-persist data stored.

Here are relevant parts of my code (simple testing app scaffolded using vue-cli 3):

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

import VueApollo from 'vue-apollo'

const httpLink = new HttpLink({
  // You should use an absolute URL here
  uri: 'https://etmdb.com/graphql',
})

// Set up your cache.
const cache = new InMemoryCache();

// Set up cache persistence.
persistCache({
  cache,
  storage: window.localStorage,
});

console.log(window.localStorage)

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
  connectToDevTools: true,
})

// Install the vue plugin
Vue.use(VueApollo)

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


Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
  provide: apolloProvider.provide()  
}).$mount('#app')

HelloWorld.vue:

<template>
  <div class="hello">
    {{ apolloTestingData }}
  </div>
</template>

<script>
import gql from 'graphql-tag';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },

  data () {
    return {
      apolloTestingData: null
    }
  },

  // Apollo-specific options
  apollo: {
    // Query with parameters
    apolloTestingData: {
      query: gql`
        query ApolloTestingData {
          apolloTestingData: allCinemaDetails(before: "2017-10-04", after: "2010-01-01") {
            edges {
              node {
                slug
                hallName
              }
            }
          }
        }`,
      fetchPolicy: 'cache-first'
    },
}  

}
</script>

Many thanks for any hint.

[raviqqe]

That's because enabling persistence of cache is done asynchronously and it can be after vue-apollo's cache existence check. Cache restoration must be notified in some way using CachePersistor (I realized that persistCache returns a promise from persistor.restore() so we can just await persistCache()). Here is my example.

[bbugh]

@raviqqe the linked repository is returning a 404. Do you have a way to put your example code somewhere else, in a gist perhaps?