SWRの使い方

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

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(
    "https://api.github.com/users/dabohaze2017",
    fetcher
  );

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

初期表示時はフェッチしない

初期表示時はフェッチせず、何かアクションをしたタイミングでフェッチしたいことがあると思います。

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

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 ? "https://api.github.com/users/dabohaze2017" : null,
    fetcher
  );

  return (
    <button
      onClick={() => {
        setIsFetch(true);
      }}
    >
      mutate
    </button>
  );
}

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