React Queryこれだけは抑えておくべきメソッド３つ｜Playground発！アプリ開発会社の技術ブログ

「React Queryはどういう風に使うの？」
「とりあえずQueryClientProviderの設定はしたけど、実際のユースケースを知りたい」
「キャッシュはどうやって取得する？」

前回の続きです。

React Queryの導入はできたという前提で話を進めていきます。

React Queryの使い方

React Queryを使う時にこれだけは抑えておくべき基本のメソッド3つを紹介します。

React Queryの基本メソッド

まずはuseQueryです。

APIからデータをフェッチしてQueryClientにキャッシュする、というメソッドです。

useQueryの引数は2つあります。1つ目がkey、2つ目が関数です。

React Queryではクエリ毎にユニークなkeyを持っており、このkeyを使ってキャッシュしたデータを取得・更新・破棄・再取得などすることができます。

2つ目の関数は、APIにリクエストを投げて受け取ったレスポンスをreturnするような非同期処理を行う関数です。

そしてuseQueryの特徴として、関数の実行に応じた様々な状態を表現する値を返してくれます。

const {data, isLoading, isError} = useQuery('users', () => fetchUsers())

例えば上記のようにuseQueryを使用した場合は以下の状態となります。

fetchUsers()の実行中
dataはundefined、isLoadingはtrue、isErrorはfalse
fetchUsers()が実行完了（成功：Promise.resolve()が返却された時）
dataに取得結果のデータ、isLoadingはfalse、isErrorはfalse
fetchUsers()が実行完了（失敗：Promise.reject()が返却された時）
dataはundefined、isLoadingはfalse、isErrorはtrue

これらの値を使うことで、APIへのリクエスト中はローダーを表示したり、取得に失敗した時はエラーハンドリングするなどの条件分岐を行うことができます。

React Queryはデータ取得するだけのライブラリではありません。（useQueryだけでも十分便利さを実感できるんですが）

useMutationを使うことで、サーバーサイドのデータを更新することが可能です。さらにonSuccessやonErrorといったコールバックオプションを使うことで、キャッシュの更新やデータの再取得な度を行うことができます。

const {mutate, isLoading, isError} = useMutation('users', () => addUser(user))

例えば、addUserというユーザーを新規作成するような関数を用意していたとして、usersというkeyで取得していたデータを更新する時は上記のような呼び出し方になります。

useQueryClient()の戻り値としてqueryClientを受け取ったら、様々なことが可能です。

queryClientから操作を行う際には冒頭にお伝えしたkeyが重要となります。

その中でもよく使うのが、useQueryで取得したデータを別コンポーネントで再利用したいときに、そのキャッシュを取得する方法です。

const queryClient = useQueryClient()
const users = queryClient.getQueryData('users')

たったこれだけで、APIの取得結果をpropsで渡すことなくどこからでも参照できました。

ReduxのHooksが出た時にuseSelector()を使えた時も感動しましたが、React Queryの使用感も素晴らしいなと感じた瞬間でした。

React Queryの使い方についてほぼアウトラインを伝えただけとなりましたが、さらに詳しい内容はまた後日記事にできたらと思います。

株式会社Playgroundのサービス