When a useQuery
query fails (the query function throws an error), TanStack Query will automatically retry the query if that query's request has not reached the max number of consecutive retries (defaults to 3
) or a function is provided to determine if a retry is allowed.
You can configure retries both on a global level and an individual query level.
retry = false
will disable retries.retry = 6
will retry failing requests 6 times before showing the final error thrown by the function.retry = true
will infinitely retry failing requests.retry = (failureCount, error) => ...
allows for custom logic based on why the request failed.import { useQuery } from '@tanstack/react-query'
// Make a specific query retry a certain number of timesconst result = useQuery({ queryKey: ['todos', 1], queryFn: fetchTodoListPage, retry: 10, // Will retry failed requests 10 times before displaying an error})
By default, retries in TanStack Query do not happen immediately after a request fails. As is standard, a back-off delay is gradually applied to each retry attempt.
The default retryDelay
is set to double (starting at 1000
ms) with each attempt, but not exceed 30 seconds:
// Configure for all queriesimport { QueryCache, QueryClient, QueryClientProvider,} from '@tanstack/react-query'
const queryClient = new QueryClient({ defaultOptions: { queries: { retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), }, },})
function App() { return <QueryClientProvider client={queryClient}>...</QueryClientProvider>}
Though it is not recommended, you can obviously override the retryDelay
function/integer in both the Provider and individual query options. If set to an integer instead of a function the delay will always be the same amount of time:
const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList, retryDelay: 1000, // Will always wait 1000ms to retry, regardless of how many retries})
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out