useSWRフック：取得、読み込み、エラー状態

useSWR(key, fetcher, options)が主要なフックです。keyはキャッシュキー（通常はURL文字列）、fetcherはデータを返す非同期関数、optionsは省略可能な設定オブジェクトです。

このフックは、data、error、isLoading、isValidating、mutate関数を含むオブジェクトを返します。

keyには、文字列のURL、[url, params]の配列、またはnullを指定できます。文字列キーは単純なGETリクエストに対応します。配列キーを使うと、userIdやfiltersなどの変数をキャッシュの識別情報に組み込めます。

nullを渡すとリクエスト全体が無効になります。必要なデータがまだ利用できない場合の条件付きフェッチに便利です。

fetcherはキー（または引数として展開された配列キー）を受け取り、Promiseを返す必要があります。Promiseが解決した値がdataになります。fetcherが例外をスローすると、errorプロパティが設定されます。

例: (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })。

dataは初回ローディング中はundefinedで、成功するとfetcherが解決した値になります。fetcherが例外をスローしない限り、errorはundefinedです。例外がスローされた場合は、そのスローされたエラーオブジェクトが格納されます。

if (error)でエラーメッセージを表示し、if (!data)でローディングスケルトンを表示すると、明確なフォールバックUIを提供できます。

isLoadingがtrueになるのは、キャッシュデータがなく、リクエストが進行中の場合だけです。つまり、そのキーに対する初回の読み込み時です。isValidatingは、キャッシュデータがすでに存在する場合のバックグラウンド再検証を含め、リクエストが進行中であれば常にtrueになります。

スケルトン画面にはisLoadingを使い、バックグラウンド更新を示す控えめなスピナーにはisValidatingを使います。

SWRConfigを使うと、そのサブツリー内のすべてのuseSWR呼び出しに対して、デフォルトのfetcher、dedupingInterval、refreshInterval、onErrorハンドラーなどのオプションを定義できます。これにより、すべてのフックでオプションを繰り返す代わりに、設定を一元管理できます。

複数のSWRConfigプロバイダーを入れ子にすると、アプリのセクションごとに異なるデフォルト値を設定できます。

リクエストをスキップするには、キーとしてnullを渡します。useSWR(isLoggedIn ? '/api/user' : null, fetcher)。キーがnull以外の値になるまで、SWRはフェッチを実行しません。

これはReact Queryのskipオプションよりもすっきりした方法です。キーがnullから文字列へ変わると、自動的に初回フェッチが開始されます。

依存関係のあるリクエストには、SWRのフックを連鎖させます。const { data: user } = useSWR('/api/me', fetcher)の後に、const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher)を実行します。2つ目のフックは1つ目の結果が返るまで待機します。

このパターンにより、useEffectの連鎖を避けながら、データの依存関係を宣言的で読みやすく保てます。

HeaderコンポーネントとSidebarコンポーネントがどちらもuseSWR('/api/user', fetcher)を呼び出した場合、SWRが送信するリクエストは1つだけで、結果は共有されます。データまたはエラーが更新されると、両方のコンポーネントが同時に再レンダリングされます。

この重複排除は、追加設定なしでdedupingIntervalの期間（デフォルトは2000ms）内に自動的に行われます。

refreshInterval: 5000は5秒ごとにポーリングします。refreshWhenHidden: falseは、タブが表示されていない間のポーリングを停止します。shouldRetryOnError: falseは自動再試行を無効にします。revalidateOnFocus: falseはフォーカスによる再検証を無効にします。

データの鮮度に関する要件に合わせてオプションを組み合わせます。ダッシュボードではrefreshIntervalをよく使い、静的コンテンツではrevalidateOnFocus: falseを設定します。

ページ単位のデータでは、キーにページ番号を含めます。useSWR(['/api/items', page], fetcher)。ページを変更すると、そのページの新しいフェッチが開始され、以前のページはキャッシュされます。

SWRにはuseSWRInfiniteも用意されています。getKey関数でページインデックスと前のページのデータに基づくキーを構築し、カーソルベースや無限スクロールのパターンを実装できます。

useSWRのキーにnullを渡すとどうなるでしょうか。

useSWR(key, fetcher)はdata、error、isLoading、isValidatingを返します。nullキーを使うと、条件付きリクエストや依存関係のあるリクエストでフェッチを無効にできます。isLoadingは初回の読み込みを示し、isValidatingは進行中のリクエストがあることを示します。SWRConfigでデフォルト値を一元管理でき、コンポーネント間のリクエストの重複排除も自動的に行われます。

refreshInterval、revalidateOnFocus、shouldRetryOnErrorなどのオプションを使うと、フック単位またはグローバルにデータの鮮度に関する動作を細かく調整できます。