【React】SWRの使い方

任意のタイミングでフェッチする

useSWRは自動でフェッチを行いますが、useSWRMutationのtriggerを使用すると手動（任意のタイミング）でフェッチを行うことができます。

下記の例だとボタンをクリックしたときにフェッチします。

import useSWRMutation from "swr/mutation";

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

export default function Home() {
  const { data, trigger } = useSWRMutation(
    "http://localhost:3000/api/users",
    fetcher
  );

  return (
    <button onClick={trigger}>fetch</button>
  );
}

条件付きfetch

useSWRは通常は自動でフェッチを行いますが、条件付きフェッチを使用すると特定の条件を満たしたときにフェッチをすることができます。

下記のようにすると、初期表示時はフェッチせずにボタンをクリックしたタイミングでフェッチすることができます。

import { useState } from "react";
import useSWR from "swr";

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

export default function Home() {
  const [isFetch, setIsFetch] = useState<boolean>(false);
  const { data, error, isLoading, mutate } = useSWR(
    isFetch ? "http://localhost:3000/api/users" : null,
    fetcher
  );

  return (
    <button
      onClick={() => {
        setIsFetch(true);
      }}
    >
      条件付きフェッチ
    </button>
  );
}

再検証（再フェッチ）

mutateを使用するとデータの再検証（再フェッチ）を行うことができます。

import useSWR from "swr";

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

export default function Home() {
  const { data, error, isLoading, mutate } = useSWR(
    "http://localhost:3000/api/users",
    fetcher
  );

  return (
    <>
      <div>{data.name}</div>
      <button
        onClick={() => {
          // ユーザー情報更新処理実行

          mutate();
        }}
      >
        mutate
      </button>
    </>
  );
};

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村