Open2

SWRをTypeScriptで使う

MichiMichi

useSWR

type User = {
  id: number;
  name: string;
  email: string;
};

const { data, error } = useSWR<User[], Error>("/api/users", apiClient.get);

useSWRの型引数に入る情報は以下の通り

  • 第一引数 ... API通信成功時のレスポンスの型
  • 第二引数 ... API通信失敗時のレスポンスの型

クエリパラメータなどのキーを渡したい場合

type Query = {
  id: number;
  name: string;
};

const queryParams = { id: 1, name: "John" };

const { data, error } = useSWR<User[], Error, [string, Query]>(
  ["/api/users", queryParams],
  (url, params) => apiClient.get(url, params)
);

先ほどの例に加えて、型引数にArray型の第三引数を追加する必要がある

  • Arrayの0番目 ... URLの型。実際の場面ではほぼstring型。
  • Arrayの1番目 ... クエリパラメータの型
MichiMichi

useSWRMutation

type ID = { id: number };

type User = {
  id: number;
  name: string;
  email: string;
};

const { data, error, trigger } = useSWRMutation<ID, Error, string, User>(
  "/api/users/create",
  apiClient.post
);

useSWRMutationの型引数に入る情報は以下の通り

  • 第一引数 ... API通信成功時のレスポンスの型
  • 第二引数 ... API通信失敗時のレスポンスの型
  • 第三引数 ... URLの型。実際の場面ではほぼstring型。
  • 第四引数 ... API通信のリクエストボディの型


useSWRMutationの型はなぜか公式ドキュメントにも載っていない