Stable Query Client

Source URL: https://tanstack.com/query/latest/docs/eslint/stable-query-client

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:

/* 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:

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

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

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

Attributes

• ✅ Recommended
• 🔧 Fixable