Use of indexeddb store to keep the cache data
Hello folks, I'm going through docs and learning about cache so let me know if there is anything wrong I'm doing here.
I have an application that fetches API for whole inventory data. once it's fetched instead of keeping it in memory I want to store that in indexeddb as data can go pretty big and next time when the user again routes to the inventory page I want to show data from indexeddb while in the background it calls api for new data. show new data to ui and update in indexeddb again for next time.
Current implementation: https://codesandbox.io/s/react-query-cache-4xx8qp.
In this implementation, data is getting stored in indexeddb but as soon as my cache got expire after 30sec instead of reading it from indexeddb it's waiting for the whole API call to show the data.
So my query is, once the cache expires if it's going to call the API I don't see the meaning of storing my queryclient instance in indexeddb. so what is the correct way to achieve/implement this?
Thanks in advance 🙂
7 Replies
eastern-cyanOP•3y ago
one approach I could think of was, Inside useQuery in the initialState I can fetch from indexeddb and show it till an API call will be made. But is this the right way to do it?
optimistic-gold•3y ago
The persister persists the cache in whatever storage layer you've chosen to use. This is designed to persist the cache across things like hard reloads, where the in-memory cache would be thrown away. The in-memory cache is then hydrated using the persisted cache when the application is reloaded, assuming it's not stale.
You're saying that the cacheTime is 30 seconds. This means that the data in the cache should be garbage collected after 30 seconds if the query is inactive.
You should be using a staleTime to dictate how long your data is fresh for, and a cacheTime to dictate how long the data should be kept in the cache for.
Does this make sense?
Here are some resources you might find useful:
- https://tkdodo.eu/blog/practical-react-query#the-defaults-explained
- https://tanstack.com/query/v4/docs/react/guides/important-defaults
- https://tanstack.com/query/v4/docs/react/guides/caching
eastern-cyanOP•3y ago
I got other parts. I'm just not able to find a good resource to figure out the below part
The in-memory cache is then hydrated using the persisted cache when the application is reloaded, assuming it's not stale..
how will I hydrate my in-memory cache from my persisted cache when my in-memory cache got garbage collected?optimistic-gold•3y ago
This is all handled for you. If your persisted cache is stale, there's no point in hydrating from it
eastern-cyanOP•3y ago
For my use case, anytime a user re-routes to the page I want to re-fetch every time in the background which is happening by default due to my query will become stale instantly and that is fine. but I don't want any in-memory cache so that's why I'm keeping my cache time very low now every time the cache got deleted after a few minutes or hours if they go to the same page I want to read the data from indexeddb and show it to the user till the time API call will get success result and get newly updated data.
I want to treat whatever is in indexeddb to show till your API is waiting. Data response is huge so I don't want to keep it in in-memory. So not able to figure out how can I read from indexeddb and fill my cache with that data. once API get the result how to update the indexeddb again? because that is not happening with my current approach.
optimistic-gold•3y ago
As far as I'm aware, there will always be an in-memory cache. Anything fresh persisted by your persister will be used to hydrate the in-memory cache, and your persister will synchronise the state of the cache with whichever storage layer you're interfacing with. Have you tried looking at the dedicated developer tools and the state of IndexedDB as you exercise your application to see what's happening?
rare-sapphire•3y ago
how will I hydrate my in-memory cache from my persisted cache when my in-memory cache got garbage collected?It won't. The persisted data is a 1:1 copy of the in-memory cache. It's for backup reasons, not to improve memory usage. We have a PoC for that here: https://github.com/TanStack/query/pull/5125
GitHub
POC: fine grained storage persister by DamianOsipiuk · Pull Request...
Ref: #4693
This is a POC of a persister that works for both sync and async storage
Things that are missing from the currently implemented client persister:
throttling
do we need it when persistin...