localStorage Not Removing Cached Data After Expiration in React Query (createPersister)

[tam-eoh]

Hi everyone,

I've been working with React Query and encountered an issue with caching behavior when using localStorage as the storage medium. Specifically, I'm noticing that cached data is not being removed from localStorage after the specified maxAge has passed.

Here’s a simplified version of my code:

const fetchData = async () => {
  const response = await fakeAPI();
  return response;
};

const { data } = useQuery({
  gcTime: 5000,
  queryKey: ['test'],
  queryFn: fetchData,
  persister: experimental_createPersister({
    storage: window.localStorage,
    maxAge: 5000,
  }),
});

Expected Behavior
I expected the cache data stored in localStorage to be removed or invalidated after 5000ms (5 seconds) based on the maxAge parameter.

Actual Behavior
However, it appears that even after the 5-second period, the cached data remains in localStorage.

[DamianOsipiuk]

Current implementation of experimental_createPersister is just a wrapper over a queryFn.

Storage removal is baked in, but only when you access given key, and it's expired.

If you want a periodic storage cleanup, it can be done in userland. It is safer this way, as iterating over localStorage/idb etc. might be expensive and it is better suited to be controlled by the user.

We discussed providing such functionality, but it would still be provided as a separate function, that user would have to invoke periodically.