No QueryClient set, use QueryClientProvider to set one の原因と解決策

概要

TanStack Query（旧React Query）を使用する際に、QueryClientProviderでアプリケーションをラップしていない場合に発生するエラーです。

エラーメッセージ

Error: No QueryClient set, use QueryClientProvider to set one

InvalidQueryClientError: No QueryClient set, use QueryClientProvider to set one

原因

1. QueryClientProviderでラップしていない

2. useQueryがProviderの外で呼ばれている

3. 複数のReactインスタンスが存在する

解決策

1. QueryClientProviderでアプリをラップ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// app.tsx または _app.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  )
}

2. Next.js App Routerでの設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
// app/providers.tsx
'use client'

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { useState } from 'react'

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 60 * 1000,
      },
    },
  }))

  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// app/layout.tsx
import { Providers } from './providers'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

3. QueryClientのインスタンス化を正しく行う

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// NG: コンポーネント内で毎回作成
function App() {
  const queryClient = new QueryClient() // 毎レンダリングで新規作成
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  )
}

// OK: コンポーネント外で作成
const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  )
}

// OK: useStateで1回だけ作成
function App() {
  const [queryClient] = useState(() => new QueryClient())
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  )
}

4. テスト環境での設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// テストユーティリティ
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { render } from '@testing-library/react'

function createTestQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
  })
}

export function renderWithClient(ui: React.ReactElement) {
  const testQueryClient = createTestQueryClient()
  return render(
    <QueryClientProvider client={testQueryClient}>
      {ui}
    </QueryClientProvider>
  )
}

5. SSRでの注意点

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
// サーバーサイドでQueryClientを作成する場合
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'

export default async function Page() {
  const queryClient = new QueryClient()

  await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  })

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <Posts />
    </HydrationBoundary>
  )
}

No QueryClient set, use QueryClientProvider to set one

概要

エラーメッセージ

原因

1. QueryClientProviderでラップしていない

2. useQueryがProviderの外で呼ばれている

3. 複数のReactインスタンスが存在する

解決策

1. QueryClientProviderでアプリをラップ

2. Next.js App Routerでの設定

3. QueryClientのインスタンス化を正しく行う

4. テスト環境での設定

5. SSRでの注意点

関連エラー

関連エラー

React の他のエラー