persistWithLocalStorage - Failed to execute 'setItem' on 'Storage' REACT_QUERY_OFFLINE_CACHE exceeded the quota

[cliffordfajardo]

Describe the bug
After loading our app and browsing our a few pages (which make useQuery calls) we get a localStorage error.

Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'REACT_QUERY_OFFLINE_CACHE' exceeded the quota.

These are the options I am using for the query config, essentially using defaults options where throttleTime is 1000

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      useErrorBoundary: true,
      refetchOnWindowFocus: false,
      cacheTime: 1000 * 60 * 60 * 24,
    },
  },
});
persistWithLocalStorage(queryClient); 

To Reproduce
Steps to reproduce the behavior:

1. Use the app with persistWithLocalStorage enabled

Expected behavior
Should't error, we may need a new default value for the throttle time in options

Screenshots

[cliffordfajardo]

UPDATES & follow up comment

This error Uncaught DOMException: Failed to execute 'setItem' on 'Storage': occurs when attempting to write data when localStorage if full (past 5MB limit)

Community Feedback / Proposed Ideas for Solutions?

For anyone else who see's this; would love to hear your thoughts & bounce ideas 💭

When we get the exception from localStorage, inside the catch block, perhaps we allow the user to provide different cache eviction options passed in the Options

• 

Some ideas that I think may satisfy the majority of people's needs?

• option1: empty the react-query's localStorage completely when we git this error.
• option2: evict the oldest entry(s) in react-query's localStorage key AKA until we have space, meaning no more thrown exceptions ... (use LRU eviction strategy)

Previous work
Some popular LRU cache libraries & their options/API

• https://www.npmjs.com/package/axios-cache-adapter
• https://www.npmjs.com/package/lru-cache
  • I really like the exclude option here when doing an evication
• https://www.npmjs.com/package/node-cache
  • maxKeys coupled with an LRU cache, could be a powerful pattern when browsing between different web pages and/or refreshing your app

An example of filling localStorage up

 try {
     var count = 100;
     var message = "LocalStorageIsNOTFull";
     for (var i = 0; i <= count; count + 250) {
         message += message;
         localStorage.setItem("stringData", message);
         console.log(localStorage);
         console.log(count);
     }
 }
 catch (e) {
     console.log("Local Storage is full, Please empty data");
     /* you can handle error here 🔵
       - option: empty local storage?
       - option: evict the oldest entry(s) until we have space AKA no thrown exception ... (LRU eviction strategy)
    */
 }

[tannerlinsley]

FYI, we have a new architecture for persistence happening in #1789

[tannerlinsley]

I would gladly accept a PR to catch "full" storage errors and evict oldest queries (LRU-style).

[morijenab]

@tannerlinsley Do you have any hint on how to get the oldest query? if it implemented already please address the file or it should be implemented from scratch?

[TkDodo]

Do you have any hint on how to get the oldest query?

Each query has an dataUpdatedAt timestamp, which indicates when it was last fetched (successfully). Erroneous queries have an errorUpdatedAt timestamp instead. Might not be so good with disabled queries though, because they are in idle state and will have 0 there (or queries which are currently fetching for the first time).

Also, internally, the QueryCache not only has a queriesMap for access via the hashed query key, but also an Array of queries - which has the order of when a query was first created:

https://github.com/tannerlinsley/react-query/blob/e42cbc32dfcd9add24cadd06135e42af1dbbc8ad/src/core/queryCache.ts#L72-L73

[NewFuture]

I have created PR #2851 for the storage full.

[tannerlinsley]

🎉 This issue has been resolved in version 3.32.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀