ここでいうSWRはライブラリ名のこと

• https://swr.vercel.app/docs/getting-started

そもそものSWRは何の略か

• SWRという名前は、HTTP RFC 5861で提唱されたHTTPキャッシュ無効化戦略であるstale-while-revalidateに由来している
• SWRは以下の戦略のことを指す
  • キャッシュからデータを返し（stale）
  • フェッチリクエストを送り（revalidate）
  • 最後に最新のデータを持ってくる

Fetcher

import useSWR from "swr";

function Profile() {
  const { data, error } = useSWR("/api/user", fetcher);

  if (error) {
    return <div>failed to load</div>;
  }
  if (!data) {
    return <div>loading...</div>;
  }
  return <div>hello {data.name}!</div>;
}

このfetcherとは？

fetch関数のラップ

• JSONデータを扱う通常のRESTful APIの場合、native fetchの単なるラッパーであるfetcher関数を作成する必要がある

const fetcher = (...args) => fetch(...args).then((res) => res.json());

• リクエストには3状態ある
  • loading
  • ready
  • error
• data変数とerror変数を使って現在の状態を判断し、対応するUIを返す

useSWRのラップ

function useUser(id) {
  const { data, error } = useSWR(`/api/user/${id}`, fetcher);

  return {
    user: data,
    isLoading: !error && !data,
    isError: error,
  };
}

• useUser() のようにラップすることもできる
• hooksとしてラップすると下記の利点がある
  • リクエストを開始し、ロード状態を更新し、最終的な結果を返すという、命令的な方法でデータを取得することを忘れることができる
  • 代わりに、コードはより宣言的になる
  • コンポーネントが使用するデータを指定するだけとなる