With keepPreviousData refetch is triggered for previously cached key

[cristi-shoreline]

Hello, folks!

I'm struggling to understand why is this possible, so: I have a query with keepPreviousData and a refetchInterval set to 2 minutes. I'm also using different combinations of parameters for the key.

Unfortunately, I see a re-fetch every time I'm switching from a key to another, even if the data was previously loaded and within the timeframe of 2 minutes.

Key example: const queryKey = ['resources', JSON.stringify({ sort, filter })].

I'm almost sure I'm missing something. What could be the reason for triggering a re-fetch if the keys are the same but the time to re-fetch has not passed yet? 🤔

Thanks!

[TkDodo]

if you change the queryKey, react-query will refetch stale queries. refetchInterval does not prevent that, because that is a per-query-key setting, and you are switching the key. keepPreviousData also does not prevent it, because it just tells react-query to keep showing the old data until you have the new data when switching keys instead of showing a loading spinner. Kind of what suspense for data fetching is going to provide naturally. But it does not prevent a request.

what would prevent a request here is setting an appropriate staleTime. this time tells react-query for how long a query is to be considered fresh, and while data is fresh, you will always get it from the cache, without background refetches. That time default to 0. If you would set it to 2 minutes, it would be in-sync with your refetchInterval.

[cristi-shoreline]

@TkDodo Thanks a lot for explaining this to me.

I just did that and it worked! It felt a bit counter-intuitive to set a staleTime once I already specified I wanted to be re-fetched every 2 minutes and I was wondering why there's a new refetch in the meantime, but your explanation makes a lot of sense.

Anyway, maybe it's just me, but it feels a bit redundant to set a staleTime and a refetchInterval to be the same (not that it's a big deal though), but maybe a property to keep the data fresh until the next tick would be handy.

Thanks again, @TkDodo!

PS: Great job guys!

[TkDodo]

staleTime is the single source of truth for data freshness, regardless of how a refetch is triggered. For example, if you re-focus the window, if a query is stale, there will be a refetch. Same goes for when an additional observer mounts. the interval is just an additional way of doing a hard refetch. keeping those two "in sync" might be good for your case, but not for others. If you have a refetchInterval of 10 minutes for example, having the staleTime be the same might just be too much.

but maybe a property to keep the data fresh until the next tick would be handy.

since it's just a matter of setting two already existing properties, I don't think that adding more properties will make things easier to grasp ;)

[cristi-shoreline]

Makes sense!

In my particular case, I want to keep the data fresh until the next tick, which is set externally but still wanting to keep the previously loaded data for convenience and user experience reasons.