データ取得

TanStack Query ／ SWR

迷ったらこれ

TanStack Query

使っている人が多く、できることも多い。データを表示するだけでなく、保存・削除まで同じ考え方で書ける

見た目をくらべる

同じものを、それぞれのライブラリで作りました。触ってみてください

TanStack Query

SWR

書き方をくらべる

コードを書き換えると、右の見た目が変わります

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from "@tanstack/react-query"
import { fetchEmployees } from "./api"
import { EmployeeListView, ErrorView, LoadingView } from "./view"

// 取ってきたデータを覚えておく入れ物（アプリに1つ）
const queryClient = new QueryClient()

function EmployeeList() {
  const { data, isPending, error } = useQuery({
    queryKey: ["employees"],
    queryFn: fetchEmployees,
  })

  if (isPending) return <LoadingView />
  if (error) return <ErrorView message={error.message} />

  return <EmployeeListView employees={data} />
}

export default function App() {
  return (
    // アプリ全体を QueryClientProvider で囲むと、中で useQuery が使える
    <QueryClientProvider client={queryClient}>
      <EmployeeList />
    </QueryClientProvider>
  )
}

Open Sandbox

くらべる

2026年10月時点

TanStack Query

迷ったらこれ公式 ↗

特徴

データを取ってくる・覚えておく・古くなったら取り直す、をまとめてやってくれる。保存や削除（データを変える操作）の機能も充実している

向いている場面

迷ったらこれ。管理画面など、データの表示と更新が多いアプリ

SWR

公式 ↗

特徴

Next.js を作った Vercel のライブラリ。useSWR の1行でデータを取ってこられる。小さくてシンプル

向いている場面

Next.js で作る。データを表示するだけの、シンプルな画面