Vue-apollo: apollo variable is empty on history.back()

[dohomi]

Hello,

I am trying to get around an issue where the apollo variable page is empty on history.back() or if a page was already loaded before. Following code:

apollo:{
  page:{
     query:MyGqlQuery,
     prefetch ({route, store}) {
          const path = getPath(route.params, store.state.locale)
          return {path}
      },
     variables () {
          const path = getPath(this.$route.params, this.$store.state.locale)
          return {path}
        },
  }
}

If I inspect page inside of the Vue inspector it is empty if the page has been loaded before. I use it with nuxt and I am unsure where the issue might belong to.

Thanks

[dohomi]

After further investigation I figured following out (Nuxt usecase)

• page.vue page template has query for apollo like displayed above
• routing on other page with different ID / slug => works
• routing on a page which called before => breaks, page is empty

I added following console.log to see why this happens:

• console.log inside of apollo.page.result() => called first
• page.destroyed() lifecycle hook => called after

It seems that due to the fact that apollo cached the result of the previous request on page change the result is called before the component is destroyed (which resets page).
What is a best practice in this case?

[dohomi]

I solved this issue now with:

data(){
  return:{
   content:[]
 } 
}
apollo:{
  page:{
     query:MyGqlQuery,
     prefetch ({route, store}) {
          const path = getPath(route.params, store.state.locale)
          return {path}
      },
     variables () {
          const path = getPath(this.$route.params, this.$store.state.locale)
          return {path}
        },
     manual:true,
     result({data}){
        this.$nextTick(() => {
           this.content = data.page && data.page.contentElements
     })
  }
 }
}

Not sure if this is how it should be done but at least it works for me now.

[vinaypuppal]

Hi, @dohomi

With above solution SSR of apollo data is not working for me. Can you confirm?

[dohomi]

@vinaypuppal yes I could not use the apollo data, I had to move to a manual query and use this.$nextTickt to make it work with already cached apollo requests.

[Akryum]

Please reopen if you still have the issue.