稳定的查询客户端 | TanStack Query Docs

稳定的查询客户端

QueryClient 包含 QueryCache，因此您只想为应用程序的生命周期创建一个 QueryClient 实例 - _而不是_在每次渲染时创建一个新实例。

例外：允许在异步服务器组件内部创建一个新的 QueryClient，因为异步函数仅在服务器上调用一次。

规则详情

此规则的不正确代码示例：

tsx

/* eslint "@tanstack/query/stable-query-client": "error" */

function App() {
  const queryClient = new QueryClient()
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  )
}

/* eslint "@tanstack/query/stable-query-client": "error" */

function App() {
  const queryClient = new QueryClient()
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  )
}

此规则的正确代码示例：

tsx

function App() {
  const [queryClient] = useState(() => new QueryClient())
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  )
}

function App() {
  const [queryClient] = useState(() => new QueryClient())
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  )
}

tsx

const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  )
}

const queryClient = new QueryClient()
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  )
}

tsx

async function App() {
  const queryClient = new QueryClient()
  await queryClient.prefetchQuery(options)
}

async function App() {
  const queryClient = new QueryClient()
  await queryClient.prefetchQuery(options)
}

属性

✅ 推荐
🔧 可修复