Javascript
[React] React Queryの紹介
はち
公開日:2020/09/25
皆様こんにちは。またまたゴスケです。
今回はイケてるReactのライブラリ「React Query」を紹介します。
「React Query」はHooksを用いてデータの取得や更新ができるライブラリです。
通常、axiosやfetchでデータを取得する場合、useEffect()を使用してLoading状態の管理などを行う必要がありますが、React Queryはそういった処理を全部やってくれるライブラリです！
そのほかにも様々な機能がありますが、ひとまず触ってみたいって人向けにデータ取得部分だけ使ってみたと思います！
公式ドキュメント
https://react-query.tanstack.com/
日本語には対応していませんが我々にはDeepLという強い味方がいるので大丈夫です！
ここのExamplesページに様々なサンプルがあるので、ここみれば大体使い方わかります。
ただしTypescriptのExampleがないのでそこは自分たちで書き換えましょう。
サンプル
よくあるItemをリスト表示する場合のサンプルが以下です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import React, { useState } from 'react'; import { useQuery } from 'react-query'; import axios from 'axios'; import ItemList from './components/ItemList'; const Home: React.FC = () => { //Item取得 const { data, isLoading } = useQuery('getItems', async () => { const { data } = await axios.get(`/api/getItems`); return data; } ); //ローディング中 if (isLoading) { return ( <div> <span>Loading...</span> </div> ); } return ( <div> {/* アイテム一覧表示 */} <ItemList items={data} /> </div> ); }; export default Home; |
useQuery()の第一引数にクエリキーを指定し、第二引数にデータ取得の関数を指定します。
ここでは、「getItems」というキーを指定し、axiosでREST APIをコールしています。
これにより、変数dataには返却されたデータが格納され、isLoadingにはロード中か否かbooleanで格納されます。
なので、isLoadingがtrueの間は「Loading…」が表示され、isLoadingがfalseになると<ItemList>が表示される仕組みになります。
このuseQuery()の部分が、前はuseItems()みたいな名前でカスタムHooksを作成して、内部はuseEffect()でloadingのstateを管理するといった感じでした。
非常に直感的でわかりやすい記述だと思います。
気になる方は公式ドキュメントの他、素晴らしい記事を書いておられる方がいるので参考にどうぞ！
[参考]
https://qiita.com/susiyaki/items/0d2e4a54e628f0cc0a5c
