TanStack•3y ago•

1 reply

exclusive-coral

Persistence, cacheTime and garbage collector

Hi! I'm using

persistQueryClient

persistQueryClient

plugin and I set up default

cacheTime

cacheTime

queryClient

queryClient

Infinity

Infinity

, as described here in the docs:
https://tanstack.com/query/latest/docs/react/plugins/persistQueryClient#how-it-works
So garbage collection is basically disabled for all queries by default which is what I expect most of the time.

However, there are queries which I would like to remove from the cache right after they become inactive. Here is a snippet using some example data:

export const useSomeQueryWrapper = () => {
  const someFilters: string[] = readFromLocalStorage();

  const query = useQuery({
    queryKey: ['example', ...someFilters],
    queryFn: () => fetchSomeData(someFilters),
  });

  return whatever;
};

export const useSomeQueryWrapper = () => {
  const someFilters: string[] = readFromLocalStorage();

  const query = useQuery({
    queryKey: ['example', ...someFilters],
    queryFn: () => fetchSomeData(someFilters),
  });

  return whatever;
};

In above case, when

someFilters

someFilters

variable changes, I would like to fetch data for new filters and I would like to remove data for previously selected filters immediately. I will never need it again and don't want it to be persisted.
So I only care about results for currently selected filters.

I tried to set

cacheTime: 0

cacheTime: 0

in above case. I thought that it will remove data for previous key after filters change, and data for current filters will be persisted because query is active (this custom hook is mounted at the root).
Although it doesn't always work. Sometimes after

someFilters

someFilters

changes I see two versions of this query in devtools - one for active query with

cacheTime

cacheTime

being properly set to 0 (which is expected) and the other, inactive one, for previous filters with

cacheTime

cacheTime

being set to

Infinity

Infinity

, which I guess is inherited from query client defaults. So in such scenario query for old filters configuration will be persisted forever.

Is it expected behaviour or is it sth broken with my code? The way

cacheTime

cacheTime

works when queries get unmounted and how it works during hydration is not super clear to me unfortunately

TanStack•3y ago•

1 reply

exclusive-coral

Persistence, cacheTime and garbage collector

Hi! I'm using

persistQueryClient

persistQueryClient

plugin and I set up default

cacheTime

cacheTime

queryClient

queryClient

Infinity

Infinity

export const useSomeQueryWrapper = () => {
  const someFilters: string[] = readFromLocalStorage();

  const query = useQuery({
    queryKey: ['example', ...someFilters],
    queryFn: () => fetchSomeData(someFilters),
  });

  return whatever;
};

export const useSomeQueryWrapper = () => {
  const someFilters: string[] = readFromLocalStorage();

  const query = useQuery({
    queryKey: ['example', ...someFilters],
    queryFn: () => fetchSomeData(someFilters),
  });

  return whatever;
};

In above case, when

someFilters

someFilters

cacheTime: 0

cacheTime: 0

someFilters

someFilters

changes I see two versions of this query in devtools - one for active query with

cacheTime

cacheTime

being properly set to 0 (which is expected) and the other, inactive one, for previous filters with

cacheTime

cacheTime

being set to

Infinity

Infinity

cacheTime

cacheTime

works when queries get unmounted and how it works during hydration is not super clear to me unfortunately

Persistence, cacheTime and garbage collector

Similar Threads

Persistence, cacheTime and garbage collector

Similar Threads

Similar Threads

Similar Threads