How to cache possibly-huge data? (100MBs)

[justingrant]

Our React web app is a B2B SaaS tool that analyzes datasets that can sometimes be 100+ megabytes in size. (Our customers are downloading over gigabit internet connections.)

We'd like to cache these datasets, but under no circumstances is it OK to crash the browser tab because the react-query cache is holding onto too much data. Instead, we'd like to evict this data from the cache when our app is under memory pressure. Kinda like what a WeakMap does, so users with gobs of RAM can have a fast experience and users with less RAM at least won't crash their browser tabs.

Is there a way to do this with TanStack query, i.e. to provide a best-effort level of memory caching?

Related question: how does cache persistence relate to RAM caching? Will data be held either in RAM or in the persisted cache, but not both? Or is data held in RAM and persisted? If the latter, when is it kicked out of RAM?

Finally, if you had to cache multi-hundred-megabyte datasets in a browser app, how would you do it? It may be that a RAM cache is simply the wrong tool for this job.

[TkDodo]

how does cache persistence relate to RAM caching? Will data be held either in RAM or in the persisted cache, but not both? Or is data held in RAM and persisted? If the latter, when is it kicked out of RAM?

The PersistQueryClientProvider is done in a way that the persistence is a 1:1 copy of the memory, so it's both. It's kicked out of RAM if the query is no longer used by an active observer and gcTime has elapsed. At that point, it's also removed from persistence though, as it's an exact 1:1 copy.

The only other thing we currently have is experimental_createPersister, which allows for persistence to be held in the persistent storage even if it's not in memory: https://tanstack.com/query/latest/docs/framework/react/plugins/createPersister