What is the expected behavior of very stale queries in persisted cache?

[ianschmitz]

Example code:

function createIDBPersister(idbValidKey: IDBValidKey = "reactQuery") {
    const perister: Persister = {
        persistClient: async (client: PersistedClient) => {
            await set(idbValidKey, client);
        },
        removeClient: async () => {
            await del(idbValidKey);
        },
        restoreClient: async () => {
            return await get<PersistedClient>(idbValidKey);
        },
    };

    return perister;
}

const persister = createIDBPersister();

export function createReactQueryClient() {
    const queryClient = new ReactQueryClient({
        defaultOptions: {
            queries: {
                // Should be set to at least as high as the `persistQueryClient`
                // `maxAge` setting.
                // https://tanstack.com/query/v4/docs/plugins/persistQueryClient
                cacheTime: 1000 * 60 * 60 * 24,
            },
        },
    });

    persistQueryClient({
        maxAge: 1000 * 60 * 60 * 24,
        persister,
        queryClient,
    });

    return { client: queryClient, persister };
}

My assumption was that at some point queries that were persisted in the cache would be garbage collected if they were stale and unused. Instead i see queries from many days ago that are no longer relevant in my application still being persisted.

What is the expected behavior here? From what i can tell now the cache will just keep growing and growing.

[TkDodo]

queries will be removed after they have been unused for cacheTime, so unless you have components that actively use those queries, I don't see why they should stick around.

[TkDodo]

sure

[ansh]

@TkDodo Would I still need to make the global cacheTime 24 hours? (because maxAge default is 24 hours) or not?

[TkDodo]

depends on how long you want your queries to be cached. If you leave the default of 15 minutes, and you persist to localstorage and come back after two hours, it will be hydrated from localstorage, but then queries that are unused will be instantly deleted because cacheTime has expired.

[ansh]

I want to adjust the queries on a per-query basis.

For example:

• Tasks: cached for infinite time
• User: not cached at all
• Points: cached for 15 minutes
• Friends: cached for 2 hours

[TkDodo]

then you need to set a different cacheTime for those keys.