# React Query vs SWR: どちらのデータフェッチャを選ぶか

> TanStack Query（React Query）vs SWR: フル機能の非同期状態マネージャと、軽量なstale-while-revalidateフェッチャ。機能、mutation、CIとの相性を比較します。

Source: https://latchkey.dev/ja/learn/tool-comparisons/react-query-vs-swr  
Updated: 2026-06-26

React Query（TanStack Query）はフル機能のサーバー状態マネージャで、SWRは軽量でfocusされたstale-while-revalidateのデータフェッチャです。

TanStack Queryは、キャッシュ、バックグラウンドでの再フェッチ、ページネーション、mutation、無効化、オフラインサポートを豊富なAPIで扱い、完全なサーバー状態のソリューションになります。SWR（Vercel製）は、より小さな表面を持つ最小限のstale-while-revalidateのhookにfocusし、読み取りの多いアプリと緊密なNext.js統合に適しています。React Queryは機能とmutationツールで優れ、SWRはミニマリズムと小さくfocusされたAPIで優れます。

## Comparison

|  | React Query | SWR |
| --- | --- | --- |
| スコープ | フル機能のサーバー状態マネージャ | focusされたフェッチャ |
| mutation | 豊富、組み込み | より軽量 |
| APIの表面 | 大きい | 最小限 |
| devtools | 優秀 | 基本的 |
| 最適な用途 | 複雑なサーバー状態 | 読み取りの多い軽量なフェッチ |

## ユースケースと機能

React Queryは、複雑なサーバー状態を持つアプリに向いています。多数のmutation、無効化のグラフ、ページネーション、オフラインの要件を、強力なdevtoolsで支えます。SWRは、良好なNext.js統合を備えた小さく使い勝手のよいフェッチャを求める、よりシンプルで読み取りの多いアプリに向いています。どちらもstale-while-revalidateの哲学を共有します。

## テストとCI

どちらもMSWのようなfetchインターセプタでクリーンにモックできます。いずれもマネージドrunner上で実行でき、より高速なrunnerはデータフェッチと統合のテストスイートを短縮します。

## Decide with your own numbers, not a feature table

Feature comparisons age badly and rarely decide anything, because both tools in a mature category can do the job. What differs is how each behaves on your repository, and that takes one afternoon to measure.

```Terminal
# time a cold install with each candidate, cache cleared
hyperfine --prepare "rm -rf node_modules" --warmup 1 \
  "<tool-a> install" "<tool-b> install"

# and the thing CI actually pays for: a cold run with no local cache
docker run --rm -v "$(pwd):/w" -w /w node:22 sh -c "<tool> install"
```

> Measure the cold path. Warm local benchmarks favour whichever tool you already have cached, which is exactly the condition a CI runner never has.

## What actually changes when you switch

- Lockfile format. A switch is a one-way door for anyone still on the old tool until everyone migrates, so plan it as a single coordinated change.
- Resolution strictness. Tools differ on whether an undeclared transitive import works, and the stricter one will surface latent bugs as new failures.
- CI cache configuration. The cache path and key differ per tool; carrying over the old ones silently disables caching.
- Everyone on the team and every runner must move together. Pin the version so they cannot drift.

## 結論

豊富なmutation、無効化、ページネーション、強力なdevtoolsが必要なら: React Query。読み取りの多いアプリ向けに最小限でfocusされたフェッチャが欲しいなら: SWR。React Queryはより完全なサーバー状態のソリューションで、SWRは軽量で使い勝手のよい選択肢です。

## FAQ

### React Query vs SWR: Which Data Fetcher?

TanStack Query handles caching, background refetching, pagination, mutations, invalidation, and offline support with a rich API, making it a complete server-state solution. SWR (from Vercel) focuses on a minimal stale-while-revalidate hook with a smaller surface, great for read-heavy apps and tight Next.js integration.

### Use case and features?

React Query suits apps with complex server state: many mutations, invalidation graphs, pagination, and offline needs, backed by strong devtools. SWR suits simpler, read-heavy apps wanting a tiny, ergonomic fetcher with good Next.js integration. Both share the stale-while-revalidate philosophy.

### Testing and CI?

Both mock cleanly with fetch interceptors like MSW. Either runs on managed runners, where faster runners shorten data-fetching and integration test suites.

### Which should I choose?

Need rich mutations, invalidation, pagination, and strong devtools: React Query. Want a minimal, focused fetcher for read-heavy apps: SWR. React Query is the fuller server-state solution; SWR is the lean, ergonomic option.

---

Latchkey runs CI/CD that repairs its own failures. Agent entry points: https://latchkey.dev/agent.txt, https://latchkey.dev/openapi.json, https://latchkey.dev/llms.txt