React Hooks ライブラリ SWR 2.0で追加されたuseSWRMutationを使ってみた

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。

SWRとは

SWRは、データの取得や更新に便利なReact Hooksライブラリになります。Next.jsを開発していることでも有名な、Vercelが提供しています。

developersIOでも以下のエントリが投稿されています。

少し前にSWR 2.0が発表されました。今回はその中で、useSWRMutaionを使ってみました。

useSWRMutaion

useSWRMutaionでは、通常のuseSWRのようにレンダリング時にミューテーションを行うのではなく、任意のタイミングでミューテーションを実行できます。また、ミューテーション時の状態を取得することで、データ更新の挙動を制御できます。

SWR 2.0 では、新しいフック useSWRMutation によって、宣言的な API を使用してリモートでデータを変更することがより簡単になりました。このフックを使って変異をセットアップし、後でそれを有効にすることができます。

使ってみる

useMutationが持つtriggerを使うことで、mutationを実行します。

また、isMutatingにより、mutationの状態を取得できます。triggerとisMutatingにより、データの更新のステップをより簡潔に実装することができます。

以下の例では、新規でユーザーを作成する関数を、ボタンが押されたタイミングで実行するようになります。

import { useState } from "react";
import useSWRMutation from "swr/mutation";

const addUser = async (url: string, { arg }: { arg: string }) => {
  return fetch(url, {
    method: "POST",
    body: JSON.stringify(arg),
  });
};

const App = () => {
  const { trigger, isMutating } = useSWRMutation("api/user", addUser);
  const [user, setUser] = useState("");

  return (
    <>
      <input type={"text"} onChange={(e) => setUser(e.target.value)} />
      {user.length > 0 ? (
        <button disabled={isMutating} onClick={() => trigger(user)}>
          {isMutating ? "追加中" : "ユーザーの追加"}
        </button>
      ) : null}
    </>
  );
};

export default App;

ミューテーションの結果を取得

useSWRMutaionの返り値dataから、ミューテーションの結果を取得できます。useSWRMutationでは他に、状態をリセットする関数などがあります。

• data: ミューテーションの結果
• error: ミューテーション時のエラー
• trigger(arg, options): ミューテーションを発火させるためのフック
• reset: 状態をリセットするための関数
• isMutating: ミューテーションの状態

const App = () ={
  const { data, trigger, isMutating } = useSWRMutation("api/user", addUser);
  const [user, setUser] = useState("");

  console.log("data", data);
  return (
     /*...*/
  );
};

データの遅延読み込み

useSWRMutationでは、triggerが呼ばれるまでリクエストを行わないので、データの遅延読み込みにも適しています。

以下では、jsonplaceholderのAPIを使って、ボタンが押された時にリクエストを実行します。

import { useState } from "react";
import useSWRMutation from "swr/mutation";

const getUser = async (url: string, { arg }: { arg: number }) => {
  return fetch(`${url}/${arg}`).then((res) => res.json());
};

const App = () => {
  const {
    trigger,
    data: user,
    isMutating,
  } = useSWRMutation("https://jsonplaceholder.typicode.com/users", getUser);
  const [id, setId] = useState(1);

  console.log("user", user);

  return (
    <>
      <input
        type={"number"}
        value={id}
        onChange={(e) => setId(Number(e.target.value))}
      />
      <button disabled={isMutating} onClick={() => trigger(id)}>
        {isMutating ? "取得中" : "ユーザーの取得"}
      </button>
      {user ? user.name : null}
    </>
  );
};

export default App;

まとめ

今回は、SWR2.0で追加されたuseSWRMutaionを使ってみました。今回のバージョンアップでは他にも、更新中の仮データをUI上で提供するOptimistic UIなど、便利な機能が追加されたのでそちらも使っていきたいと思います。

ではまた。