Stable Query Client

· abundance's blog

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:

 1/* eslint "@tanstack/query/stable-query-client": "error" */
 2
 3function App() {
 4  const queryClient = new QueryClient()
 5  return (
 6    <QueryClientProvider client={queryClient}>
 7      <Home />
 8    </QueryClientProvider>
 9  )
10}

Examples of correct code for this rule:

1function App() {
2  const [queryClient] = useState(() => new QueryClient())
3  return (
4    <QueryClientProvider client={queryClient}>
5      <Home />
6    </QueryClientProvider>
7  )
8}

1const queryClient = new QueryClient()
2function App() {
3  return (
4    <QueryClientProvider client={queryClient}>
5      <Home />
6    </QueryClientProvider>
7  )
8}

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

Attributes #