TanStack Queryが『非同期状態管理のデファクト』になった
React Queryから2024年にリブランドされたTanStack Queryは、React/Vue/Svelte/Solidに対応したフレームワーク非依存の非同期状態管理ライブラリです。v5でTypeScript型推論が完全化し、楽観的更新・無限スクロール・SSR統合・Suspense対応・WebSocket連携まで標準サポート。フロントエンドのデファクトとして定着し、SWRと並ぶ2大選択肢の位置を確立しました。
採用すべき5つのシグナル
- useEffect+useState+loadingで非同期処理が散らかっている
- キャッシュ・再フェッチ・楽観的更新を統一管理したい
- 無限スクロール・ページネーションを宣言的に書きたい
- SSRハイドレーションとクライアントフェッチを統合したい
- WebSocket・Server-Sent Eventsとの統合が必要
SWR/Apollo Client/TanStack Query比較
SWR: Vercel製・軽量・Next.jsとの親和性高い。機能は最小限。
Apollo Client: GraphQL専用・複雑な機能完備・学習コスト中。
TanStack Query: REST/GraphQL汎用・フレームワーク非依存・機能フル装備。
使い分け: GraphQLメインならApollo、シンプル重視ならSWR、機能・型安全性重視ならTanStack Query。
実装の基本パターン
(1) Provider設定: <QueryClientProvider client={queryClient}>
(2) クエリ: const { data, isLoading } = useQuery({ queryKey, queryFn })
(3) ミューテーション: const { mutate } = useMutation({ mutationFn, onSuccess: () => client.invalidateQueries() })
(4) 楽観的更新: onMutateでキャッシュ事前更新、onErrorで戻す
(5) 無限スクロール: useInfiniteQuery({ queryFn, getNextPageParam })
v5の重要な変更点
- queryKey統一: 単一引数の{ queryKey, queryFn }オブジェクト形式
- Suspense完全対応:
useSuspenseQueryでReact Suspense統合 - 型推論強化: TSの型推論が全機能で型完全
- Server Components対応: Next.js App Router対応・HydrationBoundaryで初期化
- パフォーマンス: 内部実装最適化で30%軽量化
実装で詰まる3つの落とし穴
- queryKey設計: フィルタ・ソートを含むkey設計が甘いとキャッシュ事故
- invalidation連鎖: 複数queryに依存する場合の連鎖invalidation設計
- Server-side fetch: SSR時のキャッシュHydration設計を理解
30日学習プラン
- 1週目: 基本的なuseQuery/useMutationでCRUDアプリ
- 2週目: 無限スクロール・楽観的更新の実装
- 3週目: SSR・Suspense・Server Components統合
- 4週目: WebSocket・SSE・Real-time data連携
関連リンク
React状態管理は React状態管理、SWRは SWR実践、Next.js連携は Next.js深掘り を参照してください。tRPCとの組み合わせは tRPC深掘り もどうぞ。