TanStack Query(旧 React Query)とは何か？非同期データ取得とキャッシュの標準ライブラリ

React Query ってよく聞くけど、Redux とどう違うの？ useEffect で fetch するのと何が違うの？』 今は TanStack Query って名前変わった？』 ── 2018年頃から急速に広まった React Query は、2022年に TanStack Query へ改名し、現在はマルチフレームワーク対応の `サーバ状態ライブラリ』 として定着しました。

ざっくり言うと、TanStack Query は サーバから取ったデータをキャッシュして、必要なときに同期する』</strong> 専門ライブラリです。サーバ状態(server state)』 を扱うことに特化していて、`クライアント側だけの状態(UI 状態など)』 とは別物として扱う、というのが設計思想の核心です。

この記事では、2026年5月時点の TanStack Query v5 系をベースに、仕組み・基本の書き方・Redux 等との違い・採用判断軸 を整理します。 仕様は活発に変化しているので、最終確認は 公式ドキュメント を見るのが安全です。

なぜ TanStack Query が必要になったか

なぜわざわざ専用ライブラリが必要なのか』 を useState + useEffect』 と比較すると分かりやすくなります。

// `素朴な』 書き方
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(setUser)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error</p>;
  return <p>{user.name}</p>;
}

これに対して、TanStack Query では:

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

function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error</p>;
  return <p>{user.name}</p>;
}

`非同期の細かい挙動を毎回手書きしなくていい』 のが、TanStack Query の最大の利点です。

キャッシュの考え方 — stale と fresh

TanStack Query のキャッシュは、` stale-while-revalidate』 という考え方に基づいています。

データを 絶対今の値』 か だいたい近い値』 のどちらで扱うか』 を staleTime』 でチームごとに調整するのが、TanStack Query の運用の中心です。

主要機能の一覧

`データ取得まわりの定番タスク』 が一通りそろっています。

`データ取得で手で書きたくない処理は、まず TanStack Query にあるか確認する』 だけで、ほぼ何でも見つかる印象です。

Redux / Zustand / Context との違い

`なんで状態管理ライブラリの代わりに使うの？』 という疑問は、よく出ます。

要点は Redux 系と TanStack Query は競合ではなく、役割分担で併用する』</strong> ことです。サーバから取ったデータは TanStack Query、UI 状態(ダークモード / モーダル開閉)は Zustand / Context』 という棲み分けが2026 年現在の主流です。

楽観的更新の書き方

UX を高める典型機能 `楽観的更新』 の書き方を見ます。

const queryClient = useQueryClient();

const toggleLike = useMutation({
  mutationFn: (postId) =>
    fetch(`/api/posts/${postId}/like`, { method: 'POST' }),

  onMutate: async (postId) => {
    // 進行中の取得をキャンセル
    await queryClient.cancelQueries({ queryKey: ['posts'] });

    // 前の値を保持(ロールバック用)
    const previous = queryClient.getQueryData(['posts']);

    // 楽観的に更新
    queryClient.setQueryData(['posts'], (old) =>
      old.map(p => p.id === postId ? { ...p, liked: !p.liked } : p)
    );

    return { previous };
  },

  onError: (err, postId, context) => {
    // 失敗したら前の値に戻す
    queryClient.setQueryData(['posts'], context.previous);
  },

  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['posts'] });
  },
});

非同期処理の 応答までの空白』 をなくす』 のが楽観的更新の核心で、TanStack Query はこれを正攻法で書きやすくしてくれます。

いつ TanStack Query を使うか

採用判断の目安を整理します。

React 系のフルスタックアプリ』 を作るなら、いまも 必須スキル』 に近い位置にいます。

ハマりやすいポイント

便利な反面、現場で踏みやすい注意点も整理します。

`設定の妥当性を体感で詰める』 のが、TanStack Query の運用を綺麗にする最大のコツです。

AI 時代の TanStack Query

AI 連携の文脈でも TanStack Query は活躍します。

AI 応答の不確実な遅延』 を TanStack Query のキャッシュとプリフェッチ』 で吸収する、というのは AI 時代の UX 設計で頻出するパターンです。

TanStack Query に関するよくある質問

Q. React Query と TanStack Query は同じものですか？

A. 同じです』</strong>。2022 年にReact Query』 から TanStack Query』 に改名し、React 以外のフレームワーク(Solid / Vue / Svelte / Angular)もサポートする多目的ライブラリになりました。React Query』 は React 向けアダプタの呼称として残っています。

Q. SWR と TanStack Query、どちらを選ぶべきですか？

A. 用途と好みで分けます。 SWR は Vercel 製の軽量・シンプル路線』</strong>、<strong> TanStack Query は機能が豊富で 何でもできる』 路線』</strong>。小さなアプリで軽さ重視』 なら SWR、`本格的な機能と DevTools が欲しい』 なら TanStack Query、というのがざっくりの選び方です。

Q. RSC と Server Actions だけで完結する場合、TanStack Query は不要ですか？

A. ケースバイケース』</strong>です。完全に読みは RSC、書きは Server Actions、再取得は revalidatePath』 で済む場合は不要です。ただし、Realtime な再取得』 フォーカス再取得』 `楽観的更新』 が必要な場面では、TanStack Query を併用する設計が依然として有効です。

Q. tRPC と TanStack Query は必ずセットですか？

A. React で tRPC を使う場合は事実上セット』</strong>です。tRPC の React Hooks』 は内部的に TanStack Query を使っており、useQuery / useMutation』 と同じ感覚で trpc.x.useQuery()』 が使えます。

Q. キャッシュ無効化を全部書くのが面倒です。

A. queryKey の階層を意識して、まとめて invalidate する』</strong>のが定石です。queryClient.invalidateQueries({ queryKey: ['posts'] })』 だけで `['posts', ...]』 系すべてのクエリを無効化できます。

Q. SSR ではどう使いますか？

A. サーバ側でデータをフェッチ → dehydrate してクライアントに渡す → hydrate』</strong>のパターンが基本です。Next.js / Remix での専用ヘルパー(HydrationBoundary』 等)があります。

Q. TanStack Query を学ぶ最短ルートは？

A. ① useQuery』 で1つ取得、② useMutation』 で1つ更新、③ queryClient.invalidateQueries』 で再取得、④ DevTools をインストールして挙動を観察、の4段階が王道です。動かしながらキャッシュ状態を見る』 のが、TanStack Query の理解を加速する最大のコツです。

参考リンク

• TanStack Query: 公式
• TanStack Query: GitHub
• TanStack: 全体
• React Query DevTools: Docs
• SWR: 公式
• tRPC: 公式