概要
TanStack Queryは、REST、GraphQL、Promiseなどから取得する非同期データを、キャッシュ、再取得、ページネーション、更新処理と一緒に管理するライブラリです。React Queryをはじめ、Vue、Solid、Svelteなど複数のフレームワーク向けパッケージを提供します。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日:
取得・キャッシュ・再取得を一つのクエリとして管理する
データ取得処理にquery keyを付け、キャッシュ、再取得、バックグラウンド更新、キャンセルなどを共通の仕組みで扱えます。
ページネーション・無限スクロール・Mutationを扱う
一覧のページ送りや無限スクロール、更新系リクエスト、依存するクエリなどを非同期データ管理の流れに組み込めます。
出典:[2]
APIデータと画面の同期処理が複雑になったWebアプリに
同じAPIデータを複数画面で参照し、再取得条件や更新後のキャッシュ整合性を個別実装したくない場合に向きます。
出典:[2]
ローカルUI状態とサーバー側データを分けて考える
TanStack Queryの中心は非同期に取得するサーバー側データです。入力途中の値や表示開閉など、アプリ内だけで完結する状態は別の状態管理手段と役割分担します。
参考にした公式資料
- [1]TanStack/query repository(2026-09-21)
- [2]TanStack Query README(2026-09-21)
- [3]React Query installation(2026-09-21)
- [4]@tanstack/react-query package(2026-09-21)
- [5]TanStack Query MIT license(2026-09-21)
編集部からの補足
TanStack Queryはフォーム入力やモーダル開閉のようなローカルUI状態を一括管理するライブラリではなく、API等から取得する非同期データの同期・キャッシュを主対象にしています。現在の`@tanstack/react-query`は5.103.1で、React 18/19をpeer dependencyとしています。
3ステップで試す
- 1
React Queryを追加
React向けの公式パッケージをプロジェクトへ追加します。
npm i @tanstack/react-query - 2
QueryClientをアプリへ接続
QueryClientを作成し、QueryClientProviderでアプリへ提供します。
const queryClient = new QueryClient(); <QueryClientProvider client={queryClient}>…</QueryClientProvider> - 3
最初のクエリを定義
一意なqueryKeyと取得関数を指定し、取得・キャッシュ・再取得の基本動作を確認します。
useQuery({ queryKey: ["todos"], queryFn: fetchTodos })
成長
成長の推移 · 直近30日
50,342 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit(直近30日)
- 198
- Open PR
- 119
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
カテゴリ
GitHubデータ
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- Storybook91,112 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
UIの状態をstoryとして保存し、開発・レビュー・ドキュメント・テストへ再利用するコンポーネント開発ツール。
TypeScript - Builder.io SDKs8,845 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
Builder.ioのVisual Editor/Content platformをReact・Vue・Svelte・Qwik等へ接続するMIT SDK monorepo。
TypeScript - Frontman702 Stars
共通タグ 3件 · 共通カテゴリ 1件
browser上のDOM・CSS・source mapをcontextに、選択したUIを作るfrontend sourceをAIが直接修正するcoding agent。
ReScript - Redux61,490 Stars
共通タグ 2件 · 共通カテゴリ 2件 · 同じ言語
Application全体のStateをStoreに集約し、ActionとReducerで予測可能に更新するJavaScript/TypeScript向けState Management Library。現在はRedux Toolkitが公式推奨。
TypeScript - Expo52,361 Stars
共通タグ 2件 · 共通カテゴリ 2件 · 同じ言語
React Nativeを土台にAndroid・iOS・Webを一つのproject modelで開発し、Router/Modulesをまとめるuniversal app framework。
TypeScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。