practical-react-query

React Query ガイド

このスキルでは、非同期状態管理を使用した最新の React アプリケーションを構築するための React Query（TanStack Query）に関する包括的なガイダンスを提供します。

このスキルを使うタイミング

以下についてサポートが必要な場合に、このスキルを使用してください。

• React Query のセットアップと設定
• データの取得、キャッシュ、同期
• ミューテーションと楽観的更新
• エラー処理と再試行戦略
• TypeScript との統合
• React Query のコードのテスト
• パフォーマンスの最適化
• 高度なパターンとベストプラクティス

トピック

必要な内容に応じて、該当するリファレンスファイルを参照してください。

はじめに

トピック	説明	ファイル
実践的な React Query	中核となる概念、デフォルト、クエリキー、カスタムフック	01-practical-react-query.md
React Query を使う理由	React Query を採用するメリットと理由	23-why-use.md
必要ない場合	React Query が過剰な場合の、よりシンプルな代替手段	21-when-not-needed.md

中核となる概念

トピック	説明	ファイル
クエリキー	キャッシュ、再取得、無効化のためのキーの構造化	08-query-keys.md
クエリ関数のコンテキスト	クエリキーからパラメーターを取得	09-query-function-context.md
クエリオプション API	コードの整理と型推論	24-query-options-api.md
状態マネージャー	非同期状態マネージャーとしての React Query	11-state-manager.md

データ処理

トピック	説明	ファイル
データ変換	queryFn、レンダー、select でのデータ変換	02-data-transformations.md
プレースホルダーデータと初期データ	キャッシュを事前に埋めて、UX を向上	10-placeholder-initial-data.md
キャッシュへのシード登録	クエリキャッシュを事前に設定	18-seeding-cache.md
セレクター	部分的なサブスクリプション向けの高度なセレクターパターン	28-selectors.md

ミューテーションと更新

トピック	説明	ファイル
ミューテーション	useMutation、楽観的更新、無効化	13-mutations.md
自動無効化	クエリを自動的に無効化するパターン	25-auto-invalidation.md
並行する楽観的更新	並行する楽観的更新を処理する	27-concurrent-optimistic.md

状態とエラー処理

トピック	説明	ファイル
ステータス確認	読み込み状態、バックグラウンドエラー	04-status-checks.md
エラー処理	エラーバウンダリー、再試行戦略	12-error-handling.md

パフォーマンス

トピック	説明	ファイル
レンダリングの最適化	notifyOnChangeProps、追跡クエリ、構造共有	03-render-optimizations.md
無限クエリ	ページネーション、無限スクロール	26-infinite-queries.md

統合

トピック	説明	ファイル
TypeScript	ジェネリクス、型の絞り込み、enabled オプションの型付け	06-typescript.md
型安全性	高度な TypeScript パターン	20-type-safe.md
React Router	データ読み込み、ナビゲーションとの統合	17-react-router.md
React Context	React Context との組み合わせ	22-context.md
WebSockets	リアルタイムデータ同期	07-websockets.md
フォーム	フォームとの統合、フォーム状態の処理	15-forms.md

高度なトピック

トピック	説明	ファイル
内部構造	QueryClient、QueryCache、QueryObserver	19-internals.md
オフライン対応	永続化、オフラインミューテーション	14-offline.md
テスト	ネットワークリクエストのモック、MSW との統合	05-testing.md
FAQ	よくある質問	16-faqs.md

クイックリファレンス

基本的なクエリ

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

function Component() {
  const { data, isLoading, error } = useQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
  });
}

基本的なミューテーション

import { useMutation, useQueryClient } from "@tanstack/react-query";

function Component() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["todos"] });
    },
  });
}

Query Client のセットアップ

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

const queryClient = new QueryClient();

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