React Query: Default configuration

React Query is configured with several opinionated defaults. It’s useful to be aware of these so your experience with the library isn’t confusing.

React Query does a lot of automatic refetching

When data has been fetched and cached, React Query considers it stale. It’ll automatically refetch stale queries in the background when:

• New instances of the query mount (e.g., from an invocation of useQuery). Configurable via refetchOnMount.
• The browser window is refocused. In development, this includes switching focus between the browser devtools and the page. Focus events on browser dialog windows such as alerts or file pickers might also trigger refetches. Configurable via refetchOnWindowFocus.
• The network is reconnected. Configurable via refetchOnReconnect.

Failed queries will be retried 3 times

Queries that fail will be silently retried 3 times before they’re captured and displayed to the UI (displayed how?). This number is configurable via the retry option of useQuery. You can also disable retries by setting retry to false.

By default, an exponential back off delay is gradually applied to each retry attempt using logic that looks something like:

 // Configure for all queries
 import { QueryCache, QueryClient, QueryClientProvider } from 'react-query'
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retryDelay: attemptIndex => Math.min(attemptIndex > 1 ? 2 ** attemptIndex * 1000 : 1000, 30 * 1000),
     },
   },
 })
 
 function App() {
   return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
 }

You can pass a custom retryDelay function:

 const result = useQuery('todos', fetchTodoList, {
   retryDelay: 1000, // Will always wait 1000ms to retry, regardless of how many retries
 })

Inactive queries are garbage collected after 5 minutes

Query results that have no more active instances of useQuery, useInfiniteQuery, or query observers will be considered “inactive” but remain in the cache in case they’re used again. After 5 minutes, they’re removed from the cache. This is configurable via cacheTime.

Sources

• Important defaults – React Query docs