Scroll

「常に新しい技術に目を向けること」
「既存の技術をより深堀りすること」

カテゴリ:Javascript
タグ:
公開日:2020/09/25(金)

[React] React Queryの紹介

皆様こんにちは。またまたゴスケです。

今回はイケてるReactのライブラリ「React Query」を紹介します。
「React Query」はHooksを用いてデータの取得や更新ができるライブラリです。

通常、axiosやfetchでデータを取得する場合、useEffect()を使用してLoading状態の管理などを行う必要がありますが、React Queryはそういった処理を全部やってくれるライブラリです!

そのほかにも様々な機能がありますが、ひとまず触ってみたいって人向けにデータ取得部分だけ使ってみたと思います!

 

公式ドキュメント

https://react-query.tanstack.com/

日本語には対応していませんが我々にはDeepLという強い味方がいるので大丈夫です!
ここのExamplesページに様々なサンプルがあるので、ここみれば大体使い方わかります。
ただしTypescriptのExampleがないのでそこは自分たちで書き換えましょう。

サンプル

よくあるItemをリスト表示する場合のサンプルが以下です。

useQuery()の第一引数にクエリキーを指定し、第二引数にデータ取得の関数を指定します。
ここでは、「getItems」というキーを指定し、axiosでREST APIをコールしています。

これにより、変数dataには返却されたデータが格納され、isLoadingにはロード中か否かbooleanで格納されます。

なので、isLoadingがtrueの間は「Loading…」が表示され、isLoadingがfalseになると<ItemList>が表示される仕組みになります。

このuseQuery()の部分が、前はuseItems()みたいな名前でカスタムHooksを作成して、内部はuseEffect()でloadingのstateを管理するといった感じでした。

 

非常に直感的でわかりやすい記述だと思います。
気になる方は公式ドキュメントの他、素晴らしい記事を書いておられる方がいるので参考にどうぞ!

 

[参考]

https://fintan.jp/?p=5583

https://qiita.com/susiyaki/items/0d2e4a54e628f0cc0a5c

 

この記事を書いた人:ゴスケ

シェアのご協力をお願いいたします!

カテゴリー

アーカイブ