📘

SWRとReact hooksで条件を満たすまで定期的にデータフェッチする処理を実現

1 min read

ある特定の条件を満たすまで、定期的にデータフェッチしたかった。
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 })

https://swr.vercel.app/ja/docs/revalidation#定期的な再検証

データフェッチの間隔をStateで管理

refreshIntervalの値をstateで管理することで、途中でデータフェッチの間隔を変更できます。

// 10000の値は好きに変更してください
const [refreshInterval, setRefreshInterval] = useState(10000);

https://ja.reactjs.org/docs/hooks-reference.html#usestate

useEffectで条件を満たしたら、refreshIntervalの値を0に更新して定期的なデータフェッチをやめる

条件が満たされたら、refreshIntervalの値を0に更新して定期的なデータフェッチを終了させます

  useEffect(() => {
    if (条件が満たされたら) {
      setRefreshInterval(0);
    }
  }, [条件]);

https://ja.reactjs.org/docs/hooks-reference.html#useeffect

Discussion

ログインするとコメントできます