Manage cacheTime & staleTime from a central place

[zikphil]

Hey guys,

So I have several levels in my code base that uses react-query to call upon Server APIs, some of them using useQuery and some of them using the queryClient directly, depending on what type of components is making the call. Often times many several components are querying to same the data, but for different purposes. All of that is working great.

Now I am trying to find a way where I could centrally manage my query options. i.e: I would like to tweak the cachetime of this query to 5m but I'd like to make that change from 1 place in the code base as opposed to everywhere the query is used.

Ideally I would be looking at something similar than the DefaultQueryFn feature but for query options.

Any ways you guys can think of to make this happen with today's version?

Phil

[TkDodo]

I think what you are looking for is queryClient.setQueryDefaults where you can set a default value of any option for all queries that match a certain key.

[zikphil]

Yes!! :) Is it consider best practice to have a bunch of those in the same file that declares the global queryClient?

[zikphil]

i.e:

// Create a client
import {QueryClient} from "react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 1,
      staleTime: 1000 * 60 * 60 * 4, // 4 hours
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
      refetchOnWindowFocus: false,
      suspense: false
    },
  },
})

// Setting Query Defaults
queryClient.setQueryDefaults('posts', { cacheTime: 1, staleTime: 45 })
queryClient.setQueryDefaults('posts', { cacheTime: 1, staleTime: 45 })
queryClient.setQueryDefaults('posts', { cacheTime: 1, staleTime: 45 })
queryClient.setQueryDefaults('posts', { cacheTime: 1, staleTime: 45 })
queryClient.setQueryDefaults('posts', { cacheTime: 1, staleTime: 45 })
  ....

export {queryClient}

[TkDodo]

yes, that's likely how I would do it.

[zikphil]

Thank you for your help :) Great library btw!