Framework
Version
Menu
Getting Started
Guides & Concepts
API Reference
ESLint
Community Resources
Examples
Plugins

Stable Query Client

The QueryClient contains the QueryCache, so you'd only want to create one instance of the QueryClient for the lifecycle of your application - not a new instance on every render.

Exception: It's allowed to create a new QueryClient inside an async Server Component, because the async function is only called once on the server.

Rule Details

Examples of incorrect code for this rule:

tsx
/* eslint "@tanstack/query/stable-query-client": "error" */
function App() {
const queryClient = new QueryClient()
return (
<QueryClientProvider client={queryClient}>
<Home />
</QueryClientProvider>
)
}

Examples of correct code for this rule:

tsx
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>
)
}
bash
async function App() {
const queryClient = new QueryClient()
await queryClient.prefetchQuery(options)
}

Attributes

  • ✅ Recommended
  • 🔧 Fixable
Want to Skip the Docs?
Query.gg - The Official React Query Course
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner Linsley
Check it out
scarf analytics