invalidateQueries does not force on-mount refetch for queries with refetchOnMount: false

[kostia1st]

Maybe I'm just misreading the documentation, but seems like queryClient.invalidateQueries() invalidates only the queries which have at least one observer. From my understanding that should NOT be the case.

  const { data, error, isFetching, refetch } = useQuery(
    [123],
    () => api.getUserLabels(),
    { refetchOnMount: false },
  );

Having the above with some stale data under the key, and no observers, and then calling

    queryClient.invalidateQueries([123]);

should not immediately reload the data, but since the request for invalidation was filed, I expect the data to be reloaded once I open the view that uses that said query key. That just seems rational.

The only workaround for this that I see is to call this instead:

    queryClient.removeQueries([123]);

But this is suboptimal since it completely wipes out the previous results, so that data will be reloaded with bulky loader instead of just unnoticable "background" one.

So the question is, how to force a query to reload at the next activation without wiping out the current cache?

[TkDodo]

That is exactly what refetchOnMount is for :). It refetches queries in the background when this observer mounts IF the query is stale. By invalidating it, it is set to stale, so it will be refetched.

The question is more: why did you turn off that flag in the first place? I'm guessing it's because you got too many background refetches, to which the probably better solution would be to set a higher staleTime.

[kostia1st]

Well, for whatever reason I thought that refetchOnMount will refetch even if the query is "fresh". Which is not the case in fact.

So, I've solved my dilemma by setting refetchOnMount: true + staleTime: Infinity, and calling invalidateQueries now - seems to work as I wanted.

Thank you for the helpful answer, cheers!

[TkDodo]

Well, for whatever reason I thought that refetchOnMount will refetch even if the query is "fresh". Which is not the case in fact.

Fyi, you can set refetchOnMount: 'always' to achieve just that :)

[kostia1st]

Good to know, thanks 😃

For me, the mnemonics of the field could be improved a little. For example refetchOnMount: 'never' | 'onlyStale' | 'always' - then most probably I wouldn't have my question in the first place.

But anyway that was my fault since I missed some documentation details.

[TkDodo]

Yeah, I agree. It's just slightly easier for js folks to work with Booleans due to typos, and the 3rd case (always) is really edge-y.