データ取得ライブラリ「React Query」のススメ

はじめに

こんにちは、さわだです。

IB-Mes クラウドではデータの取得をReact Queryを採用しました。
このライブラリを利用すると、リトライやキャッシュ、ローディングの表示などが簡単になります。
今回は、簡単に機能や使い方をご紹介します。

機能

  • キャッシュ
  • ポーリング(一定周期ごとにデータの再取得)
  • ページネーション
  • リトライ
  • 並列実行
  • Typescriptサポート

インストール方法

npm i react-query

基本的な使い方

React QueryはフックAPIを通して利用します。
useQuery関数には、キャッシュのキー、データの取得方法を設定します。
実行すると、data: 取得したデータ、isLoading: ローディング中かどうかが取得できます。

import { useQuery } from 'react-query'

export default function Qiita() {
  const { data, isLoading } = useQuery('qiita', () => 
    fetch('https://qiita.com/api/v2/items?query=react%3Aquery')
        .then(x => x.json()))

  return (
    <>
    <h1>記事</h1>
    {!isLoading ? 
      (<ul>
        {data.map(x => <li key={x.title}>{x.title}</li>)}
      </ul>) : 'Loading...'}
    </>
  )
}

上記を実行すると以下のように表示されます。

ポーリング

一定周期でデータの問い合わせを行いたい場合も、オプションを設定するだけです。
Next.jsのAPIルートを使って、ランダムな数値を返すAPIを用意しました。

export default (req, res) => {
  res.statusCode = 200
  res.json({ value: Math.random() })
}

UI側は以下のようなコードとなります。

import { useQuery } from 'react-query'

export default function Random() {
  const { data, isLoading } = useQuery('random', () => 
    fetch('http://localhost:3000/api/hello').then(x => x.json()),
    {
      refetchInterval: 500,
      staleTime: 0
    })

  return (
    <>
    <h1>Random</h1>
    {!isLoading ? 
      (<>Value: {data.value}</>) : 'Loading...'}
    </>
  )
}

デバッグ時について

その他にも、ウィンドウにフォーカス時にデータの再取得を行ってくれたり、便利な機能があります。
開発時には不要だよという方は無効にしておくとよいと思います。

const { data, isLoading } = useQuery('qiita', () => 
    fetch('https://qiita.com/api/v2/items?query=react%3Aquery').then(x => x.json()),
    {
      refetchOnWindowFocus: false
    })

さいごに

公式ドキュメント見ると、SWRなどの比較もあるので参考にしてみてください。
https://react-query.tanstack.com/docs/comparison

また、今回書いたコードは以下にあげておきました。
https://github.com/msp0310/react-query-example

参考

  • React-Query
    https://react-query.tanstack.com/
  • React-Query(Github)
    https://github.com/tannerlinsley/react-query
>

株式会社ユニフェイスは製造業向けのシステムを開発している会社です。
紙運用からの脱却やIoTデバイスなどを利用した実績自動収集、リアルタイムな情報共有など製造現場の最適化をご提案しています。


株式会社ユニフェイス
製造実行システムとは?
製造実行システムIB-Mes
見える化システムIB-Skin