框架
版本

Query 重试

useQuery query 失败时(query 函数抛出错误),如果该 query 的请求尚未达到最大连续重试次数(默认为 3),或者提供了函数来确定是否允许重试,TanStack Query 将自动重试该 query。

您可以在全局级别和单个 query 级别配置重试。

  • 设置 retry = false 将禁用重试。
  • 设置 retry = 6 将在显示函数抛出的最终错误之前,重试失败的请求 6 次。
  • 设置 retry = true 将无限次重试失败的请求。
  • 设置 retry = (failureCount, error) => ... 允许基于请求失败原因的自定义逻辑。

在服务器上,为了使服务器渲染尽可能快,重试默认为 0

tsx
import { useQuery } from '@tanstack/react-query'

// Make a specific query retry a certain number of times
const result = useQuery({
  queryKey: ['todos', 1],
  queryFn: fetchTodoListPage,
  retry: 10, // Will retry failed requests 10 times before displaying an error
})
import { useQuery } from '@tanstack/react-query'

// Make a specific query retry a certain number of times
const result = useQuery({
  queryKey: ['todos', 1],
  queryFn: fetchTodoListPage,
  retry: 10, // Will retry failed requests 10 times before displaying an error
})

信息:error 属性的内容将在最后一次重试尝试之前成为 useQueryfailureReason 响应属性的一部分。因此,在上面的示例中,任何错误内容都将成为前 9 次重试尝试(总共 10 次尝试)的 failureReason 属性的一部分,如果所有重试尝试后错误仍然存在,则最终它们将在最后一次尝试后成为 error 的一部分。

重试延迟

默认情况下,TanStack Query 中的重试不会在请求失败后立即发生。按照标准,退避延迟会逐渐应用于每次重试尝试。

默认 retryDelay 设置为每次尝试加倍(从 1000 毫秒开始),但不超过 30 秒

tsx
// Configure for all queries
import {
  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>
}
// Configure for all queries
import {
  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>
}

虽然不建议这样做,但您显然可以覆盖 Provider 和单个 query 选项中的 retryDelay 函数/整数。如果设置为整数而不是函数,则延迟将始终是相同的时间量

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