React QueryとQueryClientのセットアップ

ようこそ

React Query とは

インストール

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools --save-dev

QueryClient の作成

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

const queryClient = new QueryClient();

createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

最初の useQuery

import { useQuery } from '@tanstack/react-query';

function Posts() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error!</p>;
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Query Keys

// All posts
useQuery({ queryKey: ['posts'], queryFn: fetchPosts })

// Post with id 5
useQuery({ queryKey: ['posts', 5], queryFn: () => fetchPost(5) })

// Posts filtered by category
useQuery({ queryKey: ['posts', { category: 'react' }], queryFn: /* ... */ })

Query の状態

React Query DevTools

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>

デフォルト設定

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,     // data is fresh for 60s
      retry: 2,              // retry failed queries twice
      refetchOnWindowFocus: false,
    },
  },
});

自動的な再取得

確認問題

まとめ

次に学ぶこと