🐶

React useSWRを用いてポーリング処理を実装した際のメモ

2022/09/12に公開

Next.js

Reactプロジェクトでポーリング処理を実装する際に、setIntervalで実装しようとしたが、ライブラリを使ってもっと簡単に書けないかと悩んだ結果、SWRを採用することにしました。

SWRは、Vercelが提供しているデータ取得のための React Hooks ライブラリなので、信頼できます。
https://swr.vercel.app/ja
ドキュメントは以下

いろんな機能、使い方ができるライブラリですが、今回は 「ポーリング処理」 の実現に絞って、調べた際のメモを残そうと思います。

また、今回はApiの定期実行ではなく、わかりやすく数秒後に数値が1ずつ増えていき、指定の数値になった時にポーリング処理を止めるという簡単なプログラムを書いていきます。

install

yarn add swr

①まずはimportと数値を補完するstateを定義します。

import useSWR from 'swr';
const [count, setCount] = useState(0);

②useSwrを定義します。
useSWRの引数は

useSWR(key, fetcher, options)

key リクエストのためのユニークなキー文字列
fetcherの引数を文字列で定義します。大体ここはApiのpathにします。（'/user/list'みたいな感じ）
fetcher データをフェッチするための Promise を返す関数
実際にデータフェッチする関数を定義します。
options この SWR フックのオプションオブジェクト
いろんなオプションを定義します。ポーリングの時間間隔やエラー時の再試行などもここでオーバライドできます。

では、3秒に+1ずつされるuseSwrを書いてみます。

//定期実行させる処理
const func = (path: string) => {
    console.log(path)//今回は使いません。hoge
    setCount(count + 1);//stateを更新
};

useSWR('hoge', func, {
    refreshInterval: count < 10 ? 3000 : 0,
})

ポーリングさせるにはrefreshIntervalを使います。0を指定すると処理が止まります。

refreshInterval: count < 10 ? 3000 : 0,//countが10以下の間、3秒に一回func関数を実行

実際にはApiからのResponceをonSuccessとonErrorで受け取ることが多いと思います。
またデフォルトでSWR は exponential backoff アルゴリズムを使用して、エラー時にリクエストを再試行しますがonErrorRetryで再試行の設定をオーバーライドできます

useSWR('hoge', func, {
    refreshInterval: count < 10 ? 3000 : 0,
    onSuccess: (data) => {
      //成功後処理
    },
    onError: (error) => {
      //エラーハンドリング処理
    },
    onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
      //再試行をオーバーライド
    }
})

エラーハンドリングについては公式ドキュメントに詳細に書かれています。

useSwrはGraphQL APIにも対応してるみたいなのでApollo Clientと組み合わせるとかなりモダンなWEBアプリができるのでは？と思いました。

Discussion