https://zenn.dev/himorishige/articles/76e903bc5a1aa2
タイトルで大きくふろしきを広げてしまいましたが、結論から言うといろいろと試してみた結果、現時点ではまだ着地点を見出せていません。現時点での自分なりの最適解として、useQuery、usePrefetch、useMutationと楽観的更新の実装例についていくつか紹介させていただきます。
現在、Redux Sagaをふんだんに利用したアプリケーションのメンテナンス・機能拡張に携わっているのですが、ページ数やAPIエンドポイントが多数あることからコード量が多く構造も複雑になっており、メンテナンスコストの増大が懸念されるようになってきました。そこで今後のメンテナンス性の向上、また新規に参画するメンバーにも入りやすいようRedux SagaをはがしReact Queryへ少しずつ移行してくための検証を兼ねてReact Queryの使い方を探っています。
React Queryはデータの取得やキャッシュを用いた状態の管理を便利に行える多機能なライブラリです。一般的な使い方としては以下のように他のQuery系？ライブラリ（SWRやRTK Query,apollo client）と同じように、useEffectを利用しなくてもコロケーションを意識した実装ができます。実装する箇所によってはこのままでも十分実用的ですが、アプリケーションの規模が大きくなるとカスタムフック化するなど抽象化が必要になってくるでしょう。
const { data, isError, isLoading } = useQuery(['tasks'], getTasks)
if(isLoading) return <div>Loading...</div>
if(isError) return <div>Error</div>
return (
<ul>
{!!data && data.map(item => <li key={item.id}>{item.title}</div>)}
</ul>
)
下記に記事内の例にも利用しているサンプルプログラムを公開しています。入れ替えを想定しているアプリケーションとはまったく異なるのですが、サンプルはGoogle Tasks APIを利用したものです。よろしければこちらもあわせて参照ください。
React Queryを利用する場合ほとんどはuseQueryを利用したデータの取得と状態の管理になります。今回、Sagaから移行をしたいアプリケーションも8割はuseQueryを利用した形で置き換えられそうです。
一番シンプルな使い方としては、useQueryの第1引数に識別用のユニークなQuery Keys、第2引数にデータ取得用の関数を置く形でしょう。（React Query v4からはQuery Keysを配列で渡す必要があります）
たとえばタスク一覧（ex:taskListId）に登録されたタスクの一覧を取得する場合は下記のようになりますが、