refetchOnFocus removing cached values despite 'keepUnusedDataFor' being set.

[mattoni]

I have a situation that seems unexpected to me. I have a query with 'keepUnusedDataFor' set to 30 minutes (the length of something expiring in the API). I also have 'refetchOnFocus: true' set for my whole API, but disabled for this specific query.

If I keep focus on the window, the token lasts in cache like I want despite no subscriptions to it. However, if I lose focus and later (within the 30 minutes) regain focus, my value is cleared out of cache. No new fetch is done, as expected, but losing the value on focus is not what I intend.

Is this a bug, or is there something I'm not configuring correctly?

The query:

    const [getSshCreds, sshCreds] = useLazyGetSshConnectionQuery({
        refetchOnFocus: false,
        refetchOnReconnect: false,
    });

The settings:

The api service:

[markerikson]

Hmm. I'm kind of confused with the setup and description.

Could you put together a CodeSandbox or repo that shows this happening? Alternately, could you provide a Replay ( https://replay.io/record-bugs ) of this occurring on your machine? (you'd probably want to lower the timer to, say, 10-15 seconds instead of 30 minutes :) )

[mattoni]

Here's a quick and dirty repo.

https://codesandbox.io/s/elastic-kapitsa-1n1lxb?file=/src/TestComponent.tsx

I found with codesandbox you'll want to expand it to a full window (https://1n1lxb.csb.app/)

To verify, open redux toolkit and check that the subscription was created. I then unmount this component 2 seconds after launch, so the data is 'kept' in the store, but there are no subscriptions. This is fine, but then unfocus the window, then refocus. Upon refocus, the data is lost.

[phryneas]

It is working as intended.

"Refetch" here essentially gives you the guarantee of "all data in cache is up to date". Now, for unsubscribed data, we have three options:

• refetch all unsubscribed cache entries. This could be hundreds of unnneccessary requests.
• keep them as they are. That would destroy the guarantee you expect from a "refetch" - your data is not up to date
• remove them from cache - if they component remounts, they can be fetched from the server again. But if the component does not remount, there is no wasted request to the server.

As you see, of these three, the only viable option is the third one.

[mattoni]

hmm. is there no way to hint 'keep this data around, i specifically am asking to keep it and not update it'? i suppose i could funnel it to another key in the store but that seems like a lot of extra work to do something that RTKQ already takes care of.

In the API i'm hitting, a 'get' request to this endpoint generates new SSH credentials. The credentials automatically expire after 30 minutes, but I don't want to keep generating new ones every time I need them. I could use a skip token, but i'd need to keep the expiration somewhere else, that is then required to be manually managed etc. If there's no other way I can do it that way, but if there's a way in RTKQ to ensure I keep this data until its expired, I'd prefer that.

[markerikson]

@mattoni : that's explicitly the purpose of the keepUnusedDataFor field - how long you want to keep it around when no component is actually subscribed to that data any more.

[mattoni]

Yes - that is what I've done in the above example (set for 30 minutes). However, refocusing removes it despite this being set, which is why I was confused.

[phryneas]

In the API i'm hitting, a 'get' request to this endpoint generates new SSH credentials.

GET or not, that should be a mutation, not a query. Use that with fixedCacheKey.

[markerikson]

It looks like the "remove based on focus change" behavior is "intentional", at least in the sense of "that's what the current code is written to do":

redux-toolkit/packages/toolkit/src/query/core/buildMiddleware/windowEventHandling.ts

Lines 37 to 62 in d2d0f70

	for (const queryCacheKey of Object.keys(subscriptions)) {
	const querySubState = queries[queryCacheKey]
	const subscriptionSubState = subscriptions[queryCacheKey]
	if (!subscriptionSubState || !querySubState) continue
	const shouldRefetch =
	Object.values(subscriptionSubState).some(
	(sub) => sub[type] === true
	) ||
	(Object.values(subscriptionSubState).every(
	(sub) => sub[type] === undefined
	) &&
	state.config[type])
	if (shouldRefetch) {
	if (Object.keys(subscriptionSubState).length === 0) {
	api.dispatch(
	removeQueryResult({
	queryCacheKey: queryCacheKey as QueryCacheKey,
	})
	)
	} else if (querySubState.status !== QueryStatus.uninitialized) {
	api.dispatch(refetchQuery(querySubState, queryCacheKey))
	}
	}

and it's making that check based on whether the API as a whole has the focus flag set, but not the individual endpoints.

[mattoni]

@phryneas the refetchOnFocus ignoring keepUnusedDataFor value is why it feels unexpected. I realize my example was flawed in that it wasn't exactly how I was using it (using a lazy query and overriding refetch) so I updated it to more accurately represent my use case.

As for the mutation part, I agree that would work as well. I just expected the refetchOnFocus to respect the keepUnusedDataFor , since in a sense, it's sort of a subscription (or an override for one).

[phryneas]

As for the mutation part, I agree that would work as well. I just expected the refetchOnFocus to respect the keepUnusedDataFor , since in a sense, it's sort of a subscription (or an override for one).

It's not a subscription, but the number of seconds something will be kept if there is no subscription - unless something (like an invalidation or refetch) happens
Maybe that gets a bit more clear by looking at the default value: not 0, but 60 seconds. If it would force things to stay in cache, as explained above you would either massively overfetch or keep stale values in cache, both which is not desirable.

[mattoni]

I see, that makes sense thank you.

[mattoni]

Treating it as a mutation +fixedCacheKey worked like a charm, thanks!

[kasparkallas]

The fact that refetchOnFocus removes unused data came as a surprise for me too. I guess it does make sense from correctness perspective if I think about it. It's just not the magical property to solve all of my problems that I thought it was.

This was my hopeful expectation:

1. Refetches subscribed data on focus
2. Doesn't remove unused data, respects the keepUnusedDataFor
3. Refetches unused data on resubscription but uses the old data to bootstrap the subscription

Looking at the docs again, I now see why it came as a surprise for me. The documentation talks only about refetching all subscribed queries but doesn't hint at removal of unused data at all:

Also looking at docs, I think my "hopeful expectation" could almost be possible with refetchOnFocus and refetchOnMountOrArgChange combination if refetchOnFocus wouldn't remove the unused data...

[1] refetchOnFocus: https://redux-toolkit.js.org/rtk-query/usage/cache-behavior#re-fetching-on-window-focus-with-refetchonfocus
[2] refetchOnMountOrArgChange: https://redux-toolkit.js.org/rtk-query/usage/cache-behavior#encouraging-re-fetching-with-refetchonmountorargchange

[markerikson]

Yeah, I think there's some discussion worth having here (although given the number of things we're juggling atm this may not be an immediate priority).