開発

React Queryこれだけは抑えておくべきメソッド3つ

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

前回の続きです。

Reactの状態管理にReact Queryを使ってみよう「脱Reduxしたい」 「もっと簡単にReactの状態管理をしたい」 「React Queryが気になる」 上記のような思いを...

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

React Queryの使い方

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

React Queryの基本メソッド
  1. useQuery
  2. useMutation
  3. useQueryClient

React Queryの使い方1|useQueryでAPIからデータをフェッチする

まずはuseQueryです。

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

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

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

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

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

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

 

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

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

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

React Queryの使い方2|useMutationでAPIから取得したデータを更新する

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

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

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

 

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

React Queryの使い方3|useQueryClientからキャッシュを取得しよう

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

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

  1. keyを指定してデータを再取得
  2. keyを指定してキャッシュを取得
  3. keyを指定してキャッシュを更新

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

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

 

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

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

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

ABOUT ME
稲垣 貴映
サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。
株式会社Playgroundのサービス

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA