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

はじめに

今日のアプリケーションではデータの取得は複雑になりました。
リトライやキャッシュ、ローディングの表示など色々考える必要があります。
今回ご紹介する「React Query」では、そういった問題を解決し、
よりアプリケーションにフォーカスして実装できるようになります。

機能

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

インストール方法

npm i react-query

基本的な使い方

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

pages/qiita.js

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側は以下のようなコードとなります。

pages/random.js

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