Prefetch comportment

kavalcante
0
kavalcante
commented a year ago

I have a question that maybe is too stupid, but I'm lost in this thing. I have this query:

  apollo: {
    quotation: {
      query: GET_REPLIES,
      prefetch: true,
      variables() {
        return {
          quotationId: this.$route.params.id,
          filterValue: this.currentFilter,
        };
      },

      fetchPolicy: 'cache-and-network',

      update(data) {
        return data.getQuotationWithRepliesRanked;
      },

      watchLoading(isLoading) {
        if (this.loading !== isLoading) {
          this.loading = isLoading;
        }
      },
    },
  },

However, it's not loading on server-side. I think the problem is the filterValue because it's depend on a variable in data. But I need this to be reactive, and has a default value on init.

How can I fix this?

0
alidcastano
1.7k
alidcastano
commented a year ago

In case it helps - the module only seems to prefetch components passed by nuxt's render function, which I assume is only page components

relevant code:
https://github.com/nuxt-community/apollo-module/blob/master/plugin.js#L54

0
dohomi
1.3k
dohomi
commented a year ago

@alidcastano if your query depends on route params you need to do something like this:

(...)
prefetch({route}){ // => prefetch:true will not work as your query depends on route params
  return {
   quotationId: route.params.id
  }
}
(...)

Keep in mind that your search params will be only serverside if you depend on the this context. prefetch function has not this context. Check out the vue-apollo example about SSR: https://github.com/Akryum/vue-apollo#server-side-rendering

0
kavalcante
0
kavalcante
commented a year ago

@dohomi Some of my variables are in data, they are reactive, I see here that context has access to the Store. Maybe this is a way. Change my reactive params from data of a component to the store. What do you think about this approach?

0
kavalcante
0
kavalcante
commented a year ago

I found the mistake. Like the documentation said, the prefetch object and the variables object need to be exact equal. But my variables are defined in the data scope, which is not available on prefetch object. What I've did was move my Data object into Vuex Store. Store is available at Nuxt Context, that way I can set a default value of variable and handle with mutations when I need to refetch the data.

I really found this a little confusing, and I'm not sure when I need to use prefetch or use only fetch or asyncData. Could you guys explain to me? Thanks!

0
dohomi
1.3k
dohomi
commented a year ago

@kavalcante prefetch is for SSR render. This means you are defining a query on the server on prefetch, there you need to be aware about the limitations. Prefetch has the Nuxt context applied which is similar like you do a request like asyncData or fetch in the Nuxt component lifecycle.

variables is the client side reactive function for the client to apply search params or anything else. And now to light up the confusion: both, variables and prefetch must return initially the same set of data to return the same set of data.

Hope that makes sense for you

0
gbouteiller
0
gbouteiller
commented a year ago

It seems after testing in Pages, Layouts and Components that prefetch is only occurring in Pages as @alidcastano mentioned. As I'm new on both nuxt and apollo, is it intended and do we have to prefetch data on each page as best practice or can we have prefetch working elsewhere?

0
kavalcante
0
kavalcante
commented a year ago

@dohomi Yes, that's a great explanation. I think my problem was that with asyncData and fetch, usually you do an ajax call. And when you want to refresh you use a method or something like this. We have the same behaviour with vue-apollo, but a little different to expose this.

And @gbouteiller I was with the same question too. But in my test only work prefetch in Pages. Which make sense I guess.

0
dohomi
1.3k
dohomi
commented a year ago

@gbouteiller @kavalcante the prefetch is $apollo dependend and has no direct connection to nuxt but vue-apollo. So it should work in all components but depending on your code it might get out of sync if you have lot of nesting and maybe overlook some v-if/else pattern somewhere.

Hope you guys getting along I will close this issue as I don't see any open issue on the package itself for now.

0
joehua87
0
joehua87
commented 10 months ago

@kavalcante @gbouteiller You can use willPrefetch (in vue-apollo) to prefetch data in component.

import { willPrefetch } from 'vue-apollo'

export default willPrefetch({
  apollo: {
    allPosts: {
      query: gql`query AllPosts {
        allPosts {
          id
          imageUrl
          description
        }
      }`,
      prefetch: true, // Don't forget this
    }
  }
})

See more https://github.com/Akryum/vue-apollo#server-side-rendering

0
razorabhu1995
0
razorabhu1995
commented 7 months ago

during prefetch how to set the variables from data or veux store. It only takes the hardcoded variables??

any idea @dohomi

0
dohomi
1.3k
dohomi
commented 7 months ago

@razorabhu1995 not sure what you mean? you either set prefetch: true or you provide a function as follows:

prefetch(context){
  const {store} = context
  return {}
}
0
rnenjoy
5
rnenjoy
commented 10 days ago

It seems after testing in Pages, Layouts and Components that prefetch is only occurring in Pages as @alidcastano mentioned. As I'm new on both nuxt and apollo, is it intended and do we have to prefetch data on each page as best practice or can we have prefetch working elsewhere?

Exactly i have this issue. My components inside layout not in a page is not prefetched

0
Informations
Question โ€ข Unresolved
#c62 - Created a year ago