React Query - query is not using cache?

Question

I have the following definition of useQuery that i use in a couple of React components:

useQuery("myStuff", getMyStuffQuery().queryFn);

Where getMyStuffQuery looks like this:

export const getMyStuffQuery = () => {
    return {
    queryFn: () => makeSomeApiCall(),
}}

I would expect that although all of those components render, makeSomeApiCall() would only make an API call once, and the rest of the time will use the cache resulted in from this first call.

However, it seems like it keeps calling makeSomeApiCall() again and again, whenever any of said components renders.

Why is React Query not using the cache? Am i doing something wrong?

please be more specific with what you are seeing that you are not expecting. react-query does not re-fetch on every render, it performs smart invalidation. Likely, you are getting data from the cache followed by a refetch. if you mount a new component, it will get data from the cache instantly + a refetch - that is per design, and you can set staleTime to customize that behaviour — TkDodo
– TkDodo, Commented Dec 6, 2021 at 8:09
@TkDodo retryOnMount: false was also needed in my case to prevent additional refetch (on v.3.39.3) — ellockie
– ellockie, Commented Oct 11, 2023 at 11:00

Andy Noelker · Accepted Answer · 2021-12-09 19:07:53Z

React Query will cache the data of the query by default, but that does not affect whether or not it thinks that data is stale. If it thinks data is stale, it will call the query function (hit the API) every time useQuery() is called. This means it will read the data from the cache if it has it, but since it thinks that data is stale, will still hit the API in the background to fetch any updated data.

Fortunately, you have complete control over whether or not React Query considers data to be stale. You can set a staleTime config option to control how long specific data should be considered fresh. You can even set it to Infinity to say that as long as your app is open, it should only ever call the query function (hit the API) one time. By default this value is 0, which is why you are seeing the behavior you are - React Query will refetch the data in the background every time useQuery is called because it immediately thinks that data is stale (even though it's still cached).

In your example, if you truly ever only wanted an API to be called one time, you could simply set the staleTime option to Infinity.

useQuery("myStuff", getMyStuffQuery().queryFn, { staleTime: Infinity });

This option, along with all others, can be read about in the docs here https://react-query.tanstack.com/reference/useQuery

3DPrintScanner · Accepted Answer · 2022-11-17 13:00:05Z

React Query has a slightly different model of request caching.

A request can have its results cached, and those results can go stale.

Cached results are returned immediately, but if stale they are re-fetched in the background and the cache is updated.

The default configuration caches results for 5 minutes and makes them stale immediately.

See: https://tanstack.com/query/v4/docs/guides/caching

The cacheTime and staleTime can be set as part of the useQuery options object as shown here for a 5 minute cache time and 1 minute stale time.

useQuery({ queryKey: ['todos'], queryFn: fetchTodos, staleTime: 1 * 60 * 1000, cacheTime: 5 * 60 * 1000 });

The refetching cached results strategy can be changed with options like refetchOnWindowFocus

See: https://tanstack.com/query/v4/docs/guides/important-defaults

You can stop this refetching of stale values on the window focus event like this:

const client = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
});

ProllyGeek · Accepted Answer · 2024-07-12 20:52:51Z

6

if someone is here because they are looking to disable cache, the cacheTime has been renamed to gcTime

answered Jul 12, 2024 at 20:52

ProllyGeek

15.9k9 gold badges56 silver badges77 bronze badges

Collectives™ on Stack Overflow

React Query - query is not using cache?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related