apollo icon indicating copy to clipboard operation
apollo copied to clipboard

Can't auto refetch data on mounted

Open BlueSeph28 opened this issue 5 years ago • 9 comments

I want to refetch the data every time my view is mounted.

I changed my default fetchpolicy

var apolloClient = new ApolloClient({ ... 
    defaultOptions: {
    watchQuery: {
      fetchPolicy: 'network-only'
    },
    query: {
      fetchPolicy: 'network-only'
    }
  }
});

but this doesn't work, if the database have some changes and I mounted my view at least one time the data never will be updated until a web refresh.

Some hack that I did is to refetch on every mount

mounted: function() {
    this.$apollo.queries.clientType.refetch({});
... 
}

but also the loading state of the query is not changing it only refetches...

I used some fix provided by other issue, but it doens't work: #171

it maybe caused by ssrMode or ssrForceFetchDelay. in my case, setting ssrMode=false, ssrForceFetchDelay=0 for browser firgured out this problem.

BlueSeph28 avatar Aug 27 '19 18:08 BlueSeph28

I know there could be a bug here, but isn't this what subscriptions are for?

emahuni avatar Aug 29 '19 10:08 emahuni

Maybe I can use a subscription, but I think it's a little bit overpowered and some cases a bit annoying.

In the case that an user want to interact with some data, change view and after some time want to return to the previous view would be awesome if there is updated data instead of fetching the data all the time

BlueSeph28 avatar Sep 04 '19 16:09 BlueSeph28

@BlueSeph28 Your code is invalid, it should be:

var apolloClient = new ApolloClient({ ... 
  defaultOptions: {
    $query: {
      fetchPolicy: 'network-only'
    },
  }
});

https://vue-apollo.netlify.com/guide/apollo/special-options.html

Akryum avatar Sep 30 '19 10:09 Akryum

Sorry I didn't see it was ApolloClient in your code. It's looking fine, not sure why it's not working.

Akryum avatar Sep 30 '19 10:09 Akryum

So the issue is if one of your component is destroyed and mounted again, it won't do a request to the server?

Akryum avatar Sep 30 '19 10:09 Akryum

Yes, it doesn't do a request... my app only get all the data from cache.

These are the steps to reproduce this.

  1. Go to view A this loads some queries.
  2. The queries are fetched from the server.
  3. Exit from the view A and go to view B.
  4. Return to the view A
  5. All data is showed to the user but is not updated from the server only fetched from cache.

I don't know if I'm misunderstanding the vue's lifecycle, apollo fetchPolicy or if this is a real bug.

BlueSeph28 avatar Oct 03 '19 16:10 BlueSeph28

Update

I noticed that only sometimes is refetching the queries, but frequently when the queries are refetched on view mount I have an error on the store

So, to fix that I need to run

this.$apollo.provider.defaultClient.resetStore();

on beforeDestroy to refetch all the data on view Mount

BlueSeph28 avatar Oct 09 '19 18:10 BlueSeph28

I'm seeing similar things in my app, as in, it appears that the fetchPolicy does not make any difference and the data is always returned from cache...

laddi avatar Oct 27 '19 00:10 laddi

Any updates on this? Still having the same issue in 2021

W4G1 avatar Aug 06 '21 10:08 W4G1