【React】SWRで定期的に再検証する方法

SWRで定期的に再検証する方法です。

refreshIntervalを使用すると実現できます。

"use client";
import { useEffect, useState } from "react";
import useSWR from "swr";

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

export default function Home() {
  const [status, setStatus] = useState(false);
  const { data } = useSWR("http://localhost:3100/api/users", fetcher, {
    refreshInterval: !status ? 5000 : 0,
  });

  useEffect(() => {
    if (data.status === "OK") {
      setStatus(true);
    }
  }, [data]);

  return <>〜省略〜</>;
}

上記の例では、5秒おき(5000ミリ秒)に再検証するようにしています。

refreshIntervalは0を指定すると自動再検証がストップするので、再検証したレスポンスをもとに再検証を止めるようにしています。

setIntervalなどを使って自作する必要がないので便利です。

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

にほんブログ村