React TanStack Query（旧: ReactQuery）
TanStack Queryとは
一言で言うと、「非同期の状態管理ライブラリ」。
非同期に更新される状態の管理ライブラリってことで、別にAPIだけが対象じゃないっすよってこと。
つまり、ReactNativeのデータベース管理にも使えそうonigiri.w2.icon
非同期のね（watermelonDBとか）
インストール
$ npm i @tanstack/react-query
$ npm i -D @tanstack/eslint-plugin-query
devtoolsを使ってデバッグを簡単にした方がいい
RNは以下のライブラリを使え
useQueryに設定してるクエリキーの値が変更された場合も再フェッチされる
RNの場合、再フェッチが自動で行われることが少ないかも
通常だと、ネットワークの再接続時やウィンドウの再フォーカス時などに、自動で再フェッチが動く。
けど、RNの場合は、そこら辺を手動で設定する必要がある。
問題
queryKeyが被らないように一覧で管理した方がいいはず
Suspenseを使えるようにするには？
グローバルエラーの型登録って何？てかdeclareを使いこなしてない
RNのReactQueryもFlipperやReactronと連携できるらしいが...デバッグ系わからん
ネットワーク障害とかで一時接続落ちてたところから、戻ってきた際に再フェッチする機能もあるってよ
RNで再フェッチが動く条件は何？
絶対に読んで、この資料に反映させるリンクList
Input
hr.icon
ReactおよびNext.jsアプリでのサーバー状態の取得、キャッシュ、同期、および更新を簡単にする React用のデータ取得ライブラリという事です。
axios単体じゃ得られない恩恵よなonigiri.w2.icon ただし、React-Queryがこのような機能を提供するためには、その概念や使い方について理解する必要があります。
そのため、React-Queryを使用する前に、そのドキュメントやチュートリアルをしっかりと学習し、適切に使いこなすことが重要です。
はい。理解できるよう頑張りますonigiri.w2.icon
React-Queryは、キャッシュとデータの更新を内部的に処理します。
React Queryの特徴の1つはキャッシュonigiri.w2.icon
クエリを並列で実行したい場合は、useQueryを並べて書けば問題ありません。
ただし、配列に基づいてクエリしたい場合や、Suspenseを使っている場合はuseQueriesを使う必要がありますので注意して下さい。
なるほど、このuseQueriesってのがSuspenseを使う上では重要そうな予感onigiri.w2.icon
また、React-Queryライブラリによってキャッシュされたデータが返される可能性があるため、常にAPIからデータを取得するために、関数を渡す必要があります。
キャッシュってのがポイントで、自発的に更新しないといけないんよなって思うonigiri.w2.icon
ある程度は、ライブラリ側で更新してくれそうではあるけど。
でも更新できない場合もあるか...たとえば、認証トークンとか1時間に一回更新されるしな。
isFetchingではあらゆる通信でtrueとなります。
idLoadingは初回データ取得の時だけtrueとなります。
アプリ全体での通信状態を取得したい場合ではuseIsFetchingを使用して下さい。
はい、これ重要onigiri.w2.icon
useIsFetchingって結構使い方難しそう。使い道はあるかもやけど、諸刃の刃の可能性あり。
invalidateとは「明示的に特定のクエリをstaleさせる（キャッシュが古くなったとみなす）ことで、refetch処理を走らせ最新のデータを取得する」ことです。これはmutation実行時（データ更新時）、それに紐づく最新のクエリを取得したい場合などに有効です。
前読んだ時は意味わからんかったけど、今なら意味がわかるonigiri.w2.icon
データ更新したのに、staleのせいで更新対象のクエリ結果が早く更新されないと不都合な時あるよね。
そういうのを明示的に更新するって話よ。
ここでは/postsのエンドポイントで使用されるqueryKeyをまとめて管理しています。
私は普段queryKeyの命名をOpenAPIのエンドポイントに合わせることで意図しない重複を防ぐように心がけています。
クエリキーを一元管理でまとめるonigiri.w2.icon
これは理にかなっている気がする。この重複はいただけないよな。
そのうえで、React Queryの役割は「非同期の状態を管理するもの」と定義することができるでしょう。
axiosなどを使用して非同期にデータを取得し、それらをcacheに保存することでアプリ全体から参照することができるようになるからです。
そのため、本質的にはqueryFnの関数はuseQueryから分離されていることが望ましいです。
（仮にaxiosからkyなどにライブラリを移行してもReact Queryと分離されていることで影響範囲をqueryFnの中に留めることができます。）
React Queryはデータの取得やキャッシュを用いた状態の管理を便利に行える多機能なライブラリです。一般的な使い方としては以下のように他のQuery系？ライブラリ（SWRやRTK Query,apollo client）と同じように、useEffectを利用しなくてもコロケーションを意識した実装ができます。
ふむふむ。useEffectに書く煩わしい処理からおさらばしたいって感じかなonigiri.w2.icon
実装する箇所によってはこのままでも十分実用的ですが、アプリケーションの規模が大きくなるとカスタムフック化するなど抽象化が必要になってくるでしょう。
別にSuspenceを無理に使わなくてもいいよなぁ。
うん、これは良い実装だonigiri.w2.icon
そのままおパクリしても良いかもだな。ただ、まあfetcherはちょっと固めすぎ感ある気がするから、ここは緩めよう。
関係ないけど、オブジェクトの属性も定数にできるんひゃ
code: sample.ts
const tasksKeys = {