useTanstackQueryStableQueryClient (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useTanstackQueryStableQueryClient
This rule has an unsafe fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- react
- tanstackQuery
Sources:
- Same as @tanstack/query/stable-query-client

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useTanstackQueryStableQueryClient": "error"
6
      }
7
    }
8
  }
9
}

Description

Require the TanStack Query QueryClient to be created once, not on every render.

The QueryClient holds the cache that stores the results of your queries. A React component runs its function body again each time it renders. When the body creates the client with new QueryClient(), every render gets a new client with an empty cache, and the data that was already fetched is lost.

Create the client outside of the component, or store it with useState so that React keeps the same client across renders.

This rule checks new QueryClient() calls that are assigned to a variable inside a React component or a custom hook, when QueryClient is imported from @tanstack/react-query. A function counts as a component when its name starts with an uppercase letter, and as a hook when its name starts with use followed by an uppercase letter.

Async components are allowed to create a client, because an async Server Component only runs once on the server for each request.

The fix wraps the client in React.useState. It expects React to be available in the file.

Examples

Invalid

1
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
2

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

code-block.jsx:4:25 lint/nursery/useTanstackQueryStableQueryClient  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This QueryClient is created again each time the component renders.
  
    3 │ function App() {
  > 4 │     const queryClient = new QueryClient();
      │                         ^^^^^^^^^^^^^^^^^
    5 │     return (
    6 │         <QueryClientProvider client={queryClient}>
  
  ℹ Each new client starts with an empty cache, so the data that was already fetched is lost on every render.
  
  ℹ Create the client outside of the component, or store it with useState.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Store the client with React.useState.
  
    4 │ ····const·[queryClient]·=·React.useState(()·=>·new·QueryClient());
      │           +           +   +++++++++++++++++++++                 +

1
import { QueryClient } from "@tanstack/react-query";
2

3
const useQueryClient = () => {
4
    const queryClient = new QueryClient();
5
    return queryClient;
6
};

code-block.js:4:25 lint/nursery/useTanstackQueryStableQueryClient  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This QueryClient is created again each time the component renders.
  
    3 │ const useQueryClient = () => {
  > 4 │     const queryClient = new QueryClient();
      │                         ^^^^^^^^^^^^^^^^^
    5 │     return queryClient;
    6 │ };
  
  ℹ Each new client starts with an empty cache, so the data that was already fetched is lost on every render.
  
  ℹ Create the client outside of the component, or store it with useState.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Store the client with React.useState.
  
    4 │ ····const·[queryClient]·=·React.useState(()·=>·new·QueryClient());
      │           +           +   +++++++++++++++++++++                 +

Valid

1
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
2
import { useState } from "react";
3

4
const sharedClient = new QueryClient();
5

6
function App() {
7
    const [queryClient] = useState(() => new QueryClient());
8
    return (
9
        <QueryClientProvider client={queryClient}>
10
            <Home />
11
        </QueryClientProvider>
12
    );
13
}
14

15
async function ServerComponent() {
16
    const queryClient = new QueryClient();
17
    await queryClient.prefetchQuery(options);
18
}