Cache Persistence in IndexedDB #1638
Replies: 6 comments 6 replies
-
Very interesting will give you feedback when i have tested it |
Beta Was this translation helpful? Give feedback.
-
I also hit the 5MB mark pretty quickly when I first used it. One option I'm exploring is compressing the JSON data when I store it for persistence and then deserialize it for example like this: FYI @usman087
It use to be that browser support was lacking, but its supported in all major browsers now (caniuse indexDB) Are you still using the indexDB solution you posted above? |
Beta Was this translation helpful? Give feedback.
-
I tried this and it's working quite nicely. The problem that I've encountered is that one of my queries needs to wait for the data to be hydrated before it can contact the backend (so I can retrieve only the new information). But since this code is asynchronous, the query is executed before this finishes. I tried disabling the query by default, but then I found that I have no way of reenabling that query that was created in a specific component from the hydration code that's running at the highest level. How would you solve this? |
Beta Was this translation helpful? Give feedback.
-
Thanks for the effort @usman087 . This could be really useful in offline usage scenario where the localstorage can't be access from serviceWorker. That's currently what my app requires. Wondering what would be the most correct way to import this IndexedDB persistence module? As I see from officially supported localstorage implementation, it is imported as extra module. Have you organized it in similar way? Would like to know some details as to importing this. |
Beta Was this translation helpful? Give feedback.
-
Thank you @usman087 I was just about to write the same modification using idb-keyval; glad I checked and found it here already. To others who may not be aware of the potential benefits of IndexedDB API and its use of structured clone algorithm:
It doesn't look like browser compatibility will be an issue. Although IndexedDB doesn't solve everything, it seems like it would be better persister than Web Storage persist for react-query. |
Beta Was this translation helpful? Give feedback.
-
@jonathanstanley This is not working at all for me. If I swap this as-is instead of the localStorage implementation all my queries still get fetched on page reload as opposed to being read from the cache. Could this have something to do with the async nature of the library? |
Beta Was this translation helpful? Give feedback.
-
React query have experiemental cache persistence using local storage. However in our application we have large data cached and local storage has max storage limit of 5mb. In order to store large amount of data , i have modified
persist-localstorage-experimental
to useIndexedDB
instead of localstorage. I have used idb-keyval library to intreact with IndexedDB, This is very tiny library just 300 bytes.Here is modified Code to persist in IndexedDB instead of localstorage.
On cache busting we also added logic to check the application version. This covers the scenario if our models have changed with a new release and cached data can no longer map to the new model. App_Version is just a global variable on windows.
persistWithIndexedDB.ts
Now you can use it with your QueryClient Initialization
queryClient.ts
Beta Was this translation helpful? Give feedback.
All reactions