Frontend Academy · レッスン

データキャッシュのためのSWRとReact Query

SWRまたはTanStack Queryを使ってサーバーデータを取得、キャッシュ、重複排除、再検証し、手動のuseEffectによるfetchパターンから置き換えます。

「データキャッシュのためのSWRとReact Query」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

サーバー状態は通常の状態とは異なる

ネットワークデータは単なる通常の状態ではありません。キャッシュ、重複排除、バックグラウンド更新、読み込みとエラーの追跡、リトライが必要です。手動のuseEffect + useStateによる取得パターンでは、これらを不十分な形で再実装することになります。

SWRとTanStack Query

SWR（Vercel製）は、小規模でシンプルなhooks専用ライブラリです。TanStack Query（旧称React Query）は、より大規模で、ミューテーション、無限スクロール、プリフェッチ、開発者ツールなど、より多くの機能を備えています。どちらも優れた選択肢です。

SWR — 基本的な使い方

useSWR(key, fetcher)はdata、error、loadingの状態を返します。keyを基準にキャッシュされ、コンポーネント間で重複排除されます。

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(r => r.json());

function Profile() {
  const { data, error, isLoading } = useSWR('/api/me', fetcher);

  if (error) return <ErrorMessage error={error} />;
  if (isLoading) return <Spinner />;
  return <h1>{data.name}</h1>;
}

SWR — 再検証の動作

SWRはデフォルトで、フォーカス時（タブが再びフォーカスを得たとき）と再接続時に再検証します。キャッシュされた値（「stale」）をすぐに返し、バックグラウンドで更新します（「while-revalidate」）。

SWR — ミューテーション

mutate(key)はキャッシュされたクエリを再検証します。2番目の引数として新しいデータを渡すと、楽観的に更新できます。

import useSWR, { mutate } from 'swr';

async function updateProfile(updates) {
  // Optimistic update — UI reflects change immediately
  mutate('/api/me', { ...currentData, ...updates }, false);
  await fetch('/api/me', { method: 'PUT', body: JSON.stringify(updates) });
  // Revalidate to get the server's canonical state
  mutate('/api/me');
}

TanStack Query — セットアップ

設定済みのQueryClientを指定したQueryClientProviderでアプリをラップします。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const client = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30000, retry: 2 }
  }
});

function App() {
  return (
    <QueryClientProvider client={client}>
      <Routes />
    </QueryClientProvider>
  );
}

useQuery

useQuery({ queryKey, queryFn })はデータを取得してキャッシュします。

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

function UserList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: () => fetch('/api/users').then(r => r.json()),
    staleTime: 60_000 // fresh for 1 minute
  });

  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

書き込み処理のためのuseMutation

useMutationは、組み込みの保留中・エラー状態と、キャッシュを無効化するonSuccessフックによって、POST、PUT、DELETEを処理します。

import { useMutation, useQueryClient } from '@tanstack/react-query';

function CreateUserForm() {
  const qc = useQueryClient();
  const m = useMutation({
    mutationFn: (user) => fetch('/api/users', { method: 'POST', body: JSON.stringify(user) }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] })
  });

  return <button onClick={() => m.mutate({ name: 'Alice' })} disabled={m.isPending}>Create</button>;
}

クエリの無効化

ミューテーションの後に関連するクエリを無効化して、再取得を実行します。queryClient.invalidateQueries({ queryKey: ['users'] })はクエリをstaleとしてマークし、マウント中であれば再取得します。

楽観的更新

TanStack Queryは、onMutate、onError、onSettledによる楽観的更新を正式にサポートしています。

useMutation({
  mutationFn: updateUser,
  onMutate: async (newUser) => {
    await qc.cancelQueries({ queryKey: ['user', newUser.id] });
    const previous = qc.getQueryData(['user', newUser.id]);
    qc.setQueryData(['user', newUser.id], newUser);
    return { previous };
  },
  onError: (_, newUser, ctx) => {
    qc.setQueryData(['user', newUser.id], ctx.previous); // rollback
  },
  onSettled: (_, __, newUser) => {
    qc.invalidateQueries({ queryKey: ['user', newUser.id] });
  }
});

無限クエリ

useInfiniteQueryはページネーションされたリストや無限スクロールのリストを処理し、fetchNextPageを公開して読み込み済みのすべてのページを追跡します。

React Query Devtools

@tanstack/react-query-devtoolsを追加すると、すべてのキャッシュ済みクエリとその状態を表示し、手動で無効化できるフローティングパネルを利用できます。

確認問題

手動のuseEffect + fetchよりもSWRやTanStack Queryを使う主な利点は何ですか。

まとめ：SWRとReact Query

サーバー状態にはキャッシュ、重複排除、再検証が必要です。SWRは小規模でシンプル、TanStack Queryはミューテーション、無限クエリ、開発者ツールなど、より多くの機能を備えています。読み取りにはuseQuery、書き込みにはuseMutationを使います。ミューテーション後はinvalidateQueriesを呼び出します。onMutateとonErrorで楽観的更新を行います。どちらも、本番アプリで手動のuseEffect+fetchを使う必要性をなくします。

よくある質問

「データキャッシュのためのSWRとReact Query」レッスンは無料ですか？

はい。「データキャッシュのためのSWRとReact Query」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「データキャッシュのためのSWRとReact Query」で何を学びますか？

SWRまたはTanStack Queryを使ってサーバーデータを取得、キャッシュ、重複排除、再検証し、手動のuseEffectによるfetchパターンから置き換えます。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「データキャッシュのためのSWRとReact Query」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る