稳定的 Query 客户端
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)
}
属性
- ✅ 推荐
- 🔧 可修复
