Prefetching API Data with Apollo for Nuxt.js SSR

Question

I've got what is hopefully a very simple question about prefetching data from within an apollo/nuxt configuration.

I am requesting data from a GraphQL API and want to prefetch the data to use server-side rendering. Reading the docs it seems like I should simply be able to set prefetch: true on my apollo query but this is not working – it is always sending the request from the client side which is causing all kinds of issues.

Here is the code in my component:

apollo: {
  concept: {
    prefetch: true,
    query: conceptStatements,
    variables () {
      return { id: this.$route.params.id }
    }
  }
}

I feel like it will have something to do with when this.$route.params.id is evaluated?

Ultimately I would like to create a Vuex store in the store/index.js which takes all of my apollo queries and renders the data in them accessible across the application but the documentation is very vague on how I might do this. Any help would be much appreciated!

Answer 1

Are you really sure your data is not prefetched?

Prefetch is for the first rendering (in SSR mode) ; Nuxt/Apollo call your graphql api, generate the page and send it to the browser. If you just navigate to your page from another route, nuxt call your api from the browser.

You can check this behavior in devtools/network, select xhr. Refresh your page, there is not xhr call. Go to another route and refresh your page, then navigate to your route where is your apollo query and you should see a xhr call to your graphql api.

Also, you can configure this behavior in your apollo config with fetchPolicy.

You don't need Vuex to store response of your apollo queries:

From vue-apollo doc:

When you perform GraphQL queries with Apollo, the results of API calls will be stored in Apollo cache. Now imagine you also need to store some kind of a local application state and make it available for different components. Usually, in Vue application we can achieve this with Vuex. But having both Apollo and Vuex will mean you store your data in two different places so you have two sources of truth.

So, if your perform same query from different page or component, Apollo don't call your api each time, but retrieve data from the Apollo cache. Apollo is just magic!