Caching with usePaginatedQuery

[Meemaw]

Hi 👋

I'm trying to integrate usePaginatedQuery into our project however I'm having some problems with caching.

I have a dynamic cache key based on the search query input and page user is currently on:

  const [query, setQuery] = useState('');
  const [page, setPage] = useState(1);
  const itemsCacheKey = useMemo(() => ["items", { page, query }] as const, [
    page,
    query,
    resource,
  ]);

 usePaginatedQuery(itemsCacheKey, key => ...)

Every time query changes, react-query will call the fetch function. Is that expected behaviour? I would expect the result to be returned from cache after user enters a value that was previously fetched before.

Expected behaviour:

• User inputs "test" --> fetch
• User inputs "testa" (adds 'a') --> fetch
• User inputs "test" (deletes 'a') --> NO fetch (items are loaded from cache)

I can manually add the check inside the callback function, but then I lose benefits of refetch on focus etc...

 usePaginatedQuery(itemsCacheKey, ...args => {
   const items = queryCache.getQueryData<Item[]>(args);
   if (items) {
      return items;
   }
}

[TkDodo]

Every time query changes, react-query will call the fetch function. Is that expected behaviour? I would expect the result to be returned from cache after user enters a value that was previously fetched before.

The example you are describing is actually the behaviour how it should be. PaginatedQuery is no different from a normal useQuery (it will also be removed in v3 in favour of keepPreviousData).

every time you change the query key, react-query will create a new entry in the cache. Unless you tinkered with the cacheTime, queries that are not observed will remain in the cache for 5 minutes. If you come back to the old query key, that data will be displayed. If the data is stale (depends on staleTime), a background refetch will happen.

Do you have a reproducible example for your observed behaviour, in a codesandbox maybe? The only way I can see this happen is if:

• you set the cacheTime to something small (0 or so)
• after the user writes testa, they wait more than 5 minutes, then delete the a