Adding in a function for checking if retries should be performed

README.md

@@ -792,13 +792,14 @@ function Todos() {
 
 ## Retries
 
-When a `useQuery` query fails (the function throws an error), React Query will automatically retry the query if that query's request has not reached the max number of consecutive retries (defaults to `3`).
+When a `useQuery` query fails (the function throws an error), React Query will automatically retry the query if that query's request has not reached the max number of consecutive retries (defaults to `3`) and the retryChecker function returns true (defaults to `(error) => true`).
 
 You can configure retries both on a global level and an individual query level.
 
 - Setting `retry = false` will disable retries.
 - Setting `retry = 6` will retry failing requests 6 times before showing the final error thrown by the function.
 - Setting `retry = true` will infinitely retry failing requests.
+- Setting `retryChecker = (error) => ...` allows to stop retries based on error type (e.g. many HTTP 4XX errors shouldn't be retried)
 
 ```js
 import { useQuery } from 'react-query'
@@ -809,6 +810,15 @@ const { status, data, error } = useQuery(['todos', 1], fetchTodoListPage, {
 })
 ```
 
+```js
+import { useQuery } from 'react-query'
+
+// Make specific query no retry if the error thrown is NoRetry
+const { status, data, error } = useQuery(['todos', 1], fetchTodoListPage, {
+  retryChecker: error => error !== 'NoRetry',
+})
+```
+
 ## Retry Delay
 
 By default, retries in React Query do not happen immediately after a request fails. As is standard, a back-off delay is gradually applied to each retry attempt.

src/config.js

@@ -7,6 +7,7 @@ export const defaultConfigRef = {
   current: {
     retry: 3,
     retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
+    retryChecker: error => true,
     staleTime: 0,
     cacheTime: 5 * 60 * 1000,
     refetchAllOnWindowFocus: true,

src/queryCache.js

@@ -313,10 +313,11 @@ export function makeQueryCache() {
 
         // Do we need to retry the request?
         if (
-          // Only retry if the document is visible
-          query.config.retry === true ||
-          query.state.failureCount <= query.config.retry
+          query.config.retryChecker(error, query.state.failureCount) &&
+          (query.config.retry === true ||
+            query.state.failureCount <= query.config.retry)
         ) {
+          // Only retry if the document is visible
           if (!isDocumentVisible()) {
             // set this flag to continue fetch retries on focus
             query.shouldContinueRetryOnFocus = true

src/tests/useInfiniteQuery.test.js

@@ -11,7 +11,7 @@ import { sleep } from './utils'
 
 const pageSize = 10
 
-const initialItems = (page) => {
+const initialItems = page => {
   return {
     items: [...new Array(10)].fill(null).map((_, d) => page * pageSize + d),
     nextId: page + 1,

src/tests/useQuery.test.js

@@ -249,6 +249,37 @@ describe('useQuery', () => {
     expect(queryFn).toHaveBeenCalledTimes(2)
   })
 
+  it('should not retry if retryChecker returns `false`', async () => {
+    const queryFn = jest.fn()
+
+    queryFn.mockImplementation(() => {
+      return Promise.reject('NoRetry')
+    })
+
+    function Page() {
+      const { status, failureCount } = useQuery('test', queryFn, {
+        retryDelay: 1,
+        retryChecker: error => error !== 'NoRetry',
+      })
+
+      return (
+        <div>
+          <h1>{status}</h1>
+          <h2>Failed {failureCount} times</h2>
+        </div>
+      )
+    }
+
+    const rendered = render(<Page />)
+
+    await waitForElement(() => rendered.getByText('loading'))
+    await waitForElement(() => rendered.getByText('error'))
+
+    await waitForElement(() => rendered.getByText('Failed 1 times'))
+
+    expect(queryFn).toHaveBeenCalledTimes(1)
+  })
+
   it('should garbage collect queries without data immediately', async () => {
     function Page() {
       const [filter, setFilter] = React.useState('')