TanStack Query（旧 React Query）は、API経由で取得するサーバ状態（リモートデータ）をキャッシュ・再フェッチ・無効化までまとめて扱うためのJavaScriptライブラリです。Tanner Linsley氏が2019年に「React Query」として公開、後に他フレームワーク版（Vue／Solid／Svelte）も追加され、2022年に「TanStack Query」へ名称変更されました。「クライアント状態とサーバ状態を分けて考える」という考え方を一般化した立役者で、Reactアプリの構造を大きく変えた影響力の大きいライブラリです。
この記事の目次
- Query・Mutation・QueryClient
- Tanner LinsleyのOSS群
- サーバ状態管理の典型用途
- SWR・Reduxとの違い
- まとめ
Query・Mutation・QueryClient
TanStack Queryの基本APIはuseQueryとuseMutationの2つです。useQueryはユニークなキー（例：['users', userId]）と非同期関数を受け取り、結果をキャッシュしながらisLoading／isError／dataなどの状態を返します。同じキーへの2回目以降の呼び出しはキャッシュから即座にデータを返し、バックグラウンドで自動再フェッチを行う「stale-while-revalidate」型の動作が標準です。
useMutationはデータ更新系のAPIで、成功時にどのクエリのキャッシュを無効化するかを宣言的に書けます。中央には全クエリのキャッシュを管理するQueryClientがあり、プリフェッチ、無限スクロール（useInfiniteQuery）、楽観的更新、再試行戦略、フォーカス時の自動再取得などを統一して扱えます。「データの取得状況・キャッシュ・更新後の整合」を、コンポーネント側のコードを汚さずに表現できるのが最大の魅力です。
Tanner LinsleyのOSS群
TanStack Queryを生んだTanner Linsley氏はアメリカのフロントエンドエンジニアで、React Table、React Charts、React Formなど多数の人気ライブラリを手がけてきた人物です。2019年にReact Queryを公開すると、「Reduxでサーバ状態を管理する負担」を一気に解消するアプローチが評価され、数年でReactエコシステムの定番ライブラリとして地位を確立しました。
2022年、Linsley氏は自身のライブラリ群を「TanStack」というブランド傘下に統合します。React Queryは「TanStack Query」、React Tableは「TanStack Table」と改名され、Solid、Vue、Svelte向けの実装も含むフレームワーク中立的なライブラリ群として再編されました。現在ではTanStack Router、TanStack Form、TanStack Startなど周辺ライブラリも揃いつつあり、「TanStackエコシステム」としてVercel／Remix／Reactとは異なる軸の選択肢を提供しています。
サーバ状態管理の典型用途
TanStack Queryの最大の価値は、「API経由のサーバ状態をReduxストアに溜め込まなくて良くなる」点にあります。従来はaxiosで取得した結果をReduxアクション経由でストアに保存し、ロード状態・エラー状態を手動管理していましたが、TanStack Queryではキャッシュとそのライフサイクル全体がライブラリ側に内蔵されているため、コンポーネントは「データを要求すれば、キャッシュ済みなら即返り、なければ取得して返ってくる」という発想で書けます。
無限スクロールのページネーション、フィルタ条件によるクエリ切替、検索ボックスからのデバウンス付き取得などのパターンも、useQueryのキーと組み合わせるだけで自然に表現できます。useMutationの「楽観的更新（optimistic updates）」を使えば、ユーザー操作直後にUIを即時更新し、サーバ応答後に整合性を取る動きを実装でき、Twitter／Facebookライクなインタラクション体験を簡単に実現できます。現代のReactアプリでは、状態管理の半分がTanStack Queryの担当だと言っても過言ではありません。
SWR・Reduxとの違い
TanStack Queryとよく比較されるのが、Vercelが公開するSWRです。両者ともstale-while-revalidate型の挙動を採用していますが、TanStack Queryの方がMutation／楽観更新／無限スクロール／DevToolsなどの「機能の厚み」で勝り、SWRはNext.jsとの親和性とAPI設計のシンプルさで勝る、というのが一般的な評価です。
Reduxを使うチームの場合は、公式拡張のRedux Toolkit Query（RTK Query）という選択肢もあります。RTK QueryはReduxストアに統合されるため、サーバ状態と既存のクライアント状態を同じDevToolsで観察できるメリットがあります。GraphQL中心ならApollo Clientやurqlも有力です。プロジェクトの規模・既存スタック・GraphQL有無を見て選ぶことになりますが、「迷ったらTanStack Query」と言える信頼性と機能性を備えたデファクトの1つです。
まとめ
TanStack Queryはサーバ状態の取得・キャッシュ・更新を専門に扱うライブラリで、Tanner Linsley氏が築いたTanStackエコシステムの中核を担っています。Reduxの守備範囲を分担し、現代のReactアプリ設計を大きく変えた立役者であり、「クライアント状態とサーバ状態を分ける」発想の代表的な実装として広く採用されています。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント