experimental_createPersister is not cleaning up after itself #7049
Description
Describe the bug
experimental_createPersister creates a separate storage entry for each cache item.
If this item is not accessed anymore it will never be cleaned up and stays in storage indefinitely.
Your minimal, reproducible example
Steps to reproduce
- make a query that is persisted.
- Never do that same query again
- Item will stay in storage indefinitely
Expected behavior
I expect there is some kind of garbage collection.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Android, React Native
Tanstack Query adapter
react-query
TanStack Query version
5.25.0
TypeScript version
No response
Additional context
My quick solution for now
export function usePersistorGarbageCollect() {
// Add AsyncStorage garbage collect
useEffect(() => {
const gcPersitor = async () => {
try {
//Remove the old offline cache
AsyncStorage.removeItem("REACT_QUERY_OFFLINE_CACHE");
const storage_keys = await AsyncStorage.getAllKeys();
const keys = storage_keys.filter((key) =>
key.startsWith("tanstack-query-")
);
const items = await AsyncStorage.multiGet(keys);
const expired_items = items.filter(
([_, value]) =>
Date.now() - JSON.parse(value).state.dataUpdatedAt >
QUERY_GC_TIME
);
const expired_keys = expired_items.map((item) => item[0]);
console.log("gcPersitor will cleanup", expired_keys);
await AsyncStorage.multiRemove(expired_keys);
} catch (e) {
console.log("gcPersitor", e);
}
};
gcPersitor();
}, []);
}