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.4k
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.4k
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.4k
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 a year 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 a year 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.4k
dohomi
commented a year 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 5 months 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
timhanlon
0
timhanlon
commented 5 months ago

I've just run into this issue myself – prefetch is working on pages, but not components.

Looking at the generated .nuxt/apollo-module.js, this makes sense – it's using Nuxt's beforeNuxtRender function to retrieve the components to pass into prefetchAll, which only returns pages.

@dohomi can you please re-open this issue, or do you mind if I start a new one? Would be great to get some guidance from one of the Nuxt team on how we might approach a solution to this.

0
dohomi
1.4k
dohomi
commented 5 months ago

@timhanlon you might have an issue with the current version of Vue and vue-apollo. I will reopen but I guess we all need to wait for Vue 2.6 where the SSR issue should be resolved

0
rnenjoy
5
rnenjoy
commented 5 months ago

Isnt Vue 2.6 released now?

0
bswank
0
bswank
commented 4 months 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 know this is old, but could you please elaborate on this @kavalcante ?

My Vuex store is not populating until after render. I persist Vuex state with vuex-persiststate, but the persisted state is empty in asyncData, fetch, prefetch, etc. Nothing is available until a couple hundred milliseconds after render.

Any thoughts on this?

0
dohomi
1.4k
dohomi
commented 4 months ago

Please update to rc-4 - this should work if not reopen again

0
razorabhu1995
0
razorabhu1995
commented 2 months ago

@dohomi is it true that we prefetch do not work in components in NUXTJS but works only in Pages??

0
Informations
QuestionUnresolved
#c62 - Created a year ago