안정적인 Query Client

QueryClient에는 QueryCache가 포함되어 있으므로, 애플리케이션의 수명 주기 동안 QueryClient 인스턴스를 하나만 생성해야 하며, 렌더링할 때마다 새 인스턴스를 생성해서는 안 됩니다.

예외: 비동기 함수는 서버에서 한 번만 호출되므로 async Server Component 내부에서 새로운 QueryClient를 생성해도 됩니다.

규칙 세부 정보

이 규칙에 맞지 않는 잘못된 코드의 예:

/* eslint "@tanstack/query/stable-query-client": "error" */

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

이 규칙에 맞는 올바른 코드의 예:

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.query(options)
}

속성

• ✅ 권장
• 🔧 수정 가능