useSWRでrefreshIntervalによるpollingを動的に止める

小ネタ。

API オプション – SWRによるとrefreshIntervalオプションに0より大きい値を設定するとsetIntervalのような定期的なポーリングリクエストを実装できる。

// 5秒おきにfetcherでリクエストを送る
const { data } = useSWR(key, fetcher, {refreshInterval: 5000})

このポーリングをfetcherのレスポンスによって制御したい。例えばfetcherのレスポンスに含まれるstatusフィールドで判断したい場合は下記のようにやれば良い。

const [isProcessing, setIsProcessing] = useState(true)
const { data, error } = useSWR(key, fetcher, {
	refreshInterval: isProcessing ? 5000 : 0,
	onSuccess: ({ status }) = > {
		setIsProcessing(status === 'processing')
	}
)
return { data , loading: data && data.status === 'processing', error }

こうすることでstatusがprocessingの間はloadingをtrueにできる。statusが処理済みになればloadingがfalseになりrefreshIntervalも0になるのでポーリングが止まる。

手軽にpolling処理のハンドリングが出来て便利。