Support infinite cache time in RTK Query

[agusterodin]

Hey, there are certain endpoints that I wish to cache the results infinitely. I understand that keeping stale data around is generally not advised but it would be really nice to be able to keep certain data around even when all subscribed components are unmounted. The less I have to show loading skeletons for situations where stale data isn't too misleading, the better.

My current workaround is to just keep an additional, unused hook subscription in my Next app's _app.tsx file (not ideal). I understand that creating a dummy "infinite data subscriber" component would be better since it would cause potential rerenders of the entire application (still not ideal).

Something like this would be awesome:

import { AlarmMetadata } from 'datamodels'

const alarmMetadataApiSlice = sentinelApi.injectEndpoints({
  endpoints: builder => ({
    getAllAlarmMetadata: builder.query<AlarmMetadata[], void>({
      query: () => 'alarms',
      keepUnusedDataFor: Infinity
    }),
    getAlarmMetadataById: builder.query<AlarmMetadata, number>({
      query: id => `alarms/${id}/metadata`
    })
  })
})

export const { useGetAllAlarmMetadataQuery, useGetAlarmMetadataByIdQuery, endpoints: alarmMetadataApiEndpoints } = alarmMetadataApiSlice

Infinity is already a valid value in JavaScript so this shouldn't require any type changes :D

[markerikson]

I... actually think that should already work? :)

I at least see a keepUnusedDataFor field definition on what looks like a query options type:

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

Lines 14 to 29 in db0d7dc

	declare module '../../endpointDefinitions' {
	interface QueryExtraOptions<
	TagTypes extends string,
	ResultType,
	QueryArg,
	BaseQuery extends BaseQueryFn,
	ReducerPath extends string = string
	> {
	/**
	* Overrides the api-wide definition of `keepUnusedDataFor` for this endpoint only. _(This value is in seconds.)_
	*
	* This is how long RTK Query will keep your data cached for **after** the last component unsubscribes. For example, if you query an endpoint, then unmount the component, then mount another component that makes the same request within the given time frame, the most recent value will be served from the cache.
	*/
	keepUnusedDataFor?: number
	}
	}

[agusterodin]

Infinity value support might be nice to support if for no other reason then to be more expressive. Otherwise, setting to arbitrarily high value will suffice.

(my screen capture didn't appear to upload, on shit connection rn)

[agusterodin]

Side unrelated note: I noticed that even if I use a valid positive integer, if all versions of the component are unsubscribed and I click out of the window and back in (refetch on focus), the cache gets instantly wiped out.

My previously mentioned extra subscription in _app.tsx alleviates the issue but not ideal.

Would it be appropriate to generate an issue for this with minimal reproduction? Would a video capture suffice?

[markerikson]

A sandbox would be very helpful, as would a Replay ( https://replay.io/record-bugs )

[agusterodin]

Ok, I will do both! I've been following your progress on Replay and am very bullish toward it. This would be a great excuse to play around with it :D

PS: My team really appreciates your work on the Redux ecosystem. We are pending approval of our annual OSS sponsorship fund budget. You and Lenz will definitely be on the receiving end :D. The DX improvements that you have made over the past year have been unreal.

[markerikson]

@agusterodin thank you! And yeah, come on by the Replay Discord at https://replay.io/discord and say hi. We're happy to answer questions obviously, and also that's where I typically do notes threads about what I'm working on most days.

[phryneas]

I had answered this earlier, but seems GitHub ate my answer: We are doing math with that number, so NaN values like Infinity cause problems. We could add logic for that, but that would add 10-20 bytes to the library shipping to everyone - on the other hand you could just choose a "sufficiently large number", something around 10 years or so should be working just fine :)

[phryneas]

Side unrelated note: I noticed that even if I use a valid positive integer, if all versions of the component are unsubscribed and I click out of the window and back in (refetch on focus), the cache gets instantly wiped out.

That is expected behaviour - imagine you have a hundred of those cache values and 99% of them will never be used again. We have three scenarios:

1. re-fetch everything that is not in sight: 100 extra requests now, 99 of them unneccessary
2. remove everything not on screen: 1 extra request in the future when the component remounts, slight loading time
3. mark as "dirty", keep old value and refetch on load: would be optimal, but add a lot of extra complexity to the library

so for now the solution is 2. since it is just the most conservative approach without bloating the lib.

[agusterodin]

I really wish in the future you somehow add the ability to 'mark as dirty' but keep the old value (or just make that the default behavior). Our content is pretty variable so there is potential layout shift with placeholders (kinda jarring). The fewer times a user sees a placeholder, the better. I think long cache times where you never see a placeholder are common, especially on a desktop style app like Slack.

The solution I mentioned above works for endpoints where I'm not passing a parameter. Unfortunately it doesn't work for queries that have parameters. For now I end up just progmatically creating a subscription inside of a useEffect that never gets killed. Lots of stay subscriptions. Gives me anxiety.

Also, for infinite time with Infinity I'm surprised that a few extra bytes would raise eyebrows from users. I guess this is more applicable to big tech projects where bundle size is absolutely critical?

[phryneas]

It's the accumulation of a lot of few bytes, not the individual bytes. So we just have to be careful what we add and what not.

In this case:
We can either ship 10-20 bytes (if it's really compact code, might even be more like 30-40) to every user of every library consumer so you can write Number.Infinity or you just write 100000000, which is already 3 years (and 6 characters shorter). On first look it doesn't really look like it's worth shipping the extra code.

As for your use case with the shifting layout - maybe suspense could help out here? It's highly experimental, but you could give #2245 a try?

Having some kind of "dirty" state might in the long run be a possibility - but it's something that is just very difficult to formulate a good "user story" on that works in all the different use cases - and then implement it efficiently.

[agusterodin]

Oops, I had refetchOnFocus turned on at a global level. Turning it off at global level (only specifying it on when needed inside hook options) along with the arbitrarily high number as the of keepUnusedDataFor works! Cache stays preserved even when refocusing the window when not subscribed. No more hackyness required.

Still working on the sponsorship stuff btw. RTK makes life so easy and i'm extremely grateful for it.

[svagi]

@agusterodin Ahh, I wish I have found your solution sooner, thanks for sharing it! 🙌

[gormonn]

As a suggestion you can use localStorage or something else.

[agusterodin]

I just meant for the lifetime of the single page app (the tab being open in browser), not subsequent reloads.

[gormonn]

@agusterodin I think you are right. In this case, it can add complexity (which is much more convenient to use through cache management) and adjusting the requirements of the task.

As workarounds:

1. https://redux-toolkit.js.org/rtk-query/usage/examples#using-extrareducers
   So you only have to call the query once. Then, take the data from the slice.

2. localStorage/innodb - You will have to build a hook that should run in the App only once when the application starts, in order to get the data and put it in localStorage/innodb. + with little effort, this will be relevant for many tabs

[danielrob]

👀
Number.MAX_SAFE_INTEGER

[lamhungypl]

Hi @agusterodin , have you found a way to keep cache on unmounted components, I have a list of options on the Modal and don't want to fetch every time the modal opens. (no luck with large number keepUnusedDataFor)

[svagi]

@lamhungypl It seems the global settings doesn't work as expected, however the workaround mentioned here worked for me 👉 #2347 (reply in thread)