📘
SWRとReact hooksで条件を満たすまで定期的にデータフェッチする処理を実現
ある特定の条件を満たすまで、定期的にデータフェッチしたかった。
SWR と React hooks を使って、ある程度簡単に処理が書けたので紹介します。
例えば、すごく時間がかかる処理（動画のアップロードとか）を今どのくらいまで処理が進んでるのかユーザーにステータス画面として表示したい場合などに使えると思います。
完成形
これで条件を満たすまで、定期的なデータフェッチを実現しています。
import useSWR from "swr";
import { useEffect, useState } from "react";
function Status() {
const [refreshInterval, setRefreshInterval] = useState(10000);
const { data } = useSWR("/api/status", fetcher, {
refreshInterval: refreshInterval,
});
useEffect(() => {
if (条件が満たされたら) {
setRefreshInterval(0);
}
}, [条件]);
if (!data) return <div>loading...</div>;
return <div>hello {data.status}!</div>;
}
やっていること
SWR のオプション「refreshInterval」で定期的なデータフェッチを実現
refreshIntervalの値を設定するだけで、定期的なデータフェッチが可能になります。
const { data } = useSWR("/api/status", fetcher, {
refreshInterval: refreshInterval,
});
データフェッチの間隔を State で管理
refreshIntervalの値を state で管理することで、途中でデータフェッチの間隔を変更できます。
// 10000の値は好きに変更してください
const [refreshInterval, setRefreshInterval] = useState(10000);
useEffect で条件を満たしたら、refreshIntervalの値を 0 に更新して定期的なデータフェッチをやめる
条件が満たされたら、refreshIntervalの値を 0 に更新して定期的なデータフェッチを終了させます
useEffect(() => {
if (条件が満たされたら) {
setRefreshInterval(0);
}
}, [条件]);
Discussion