Description of react query(Official)

React Queryとは

「Reactにおける非同期データのためのフェッチ、キャッシュ、更新」のライブラリであり、「サーバ状態管理」のライブラリである。

キャッシュを使いデータ取得、更新の状態管理を行うライブラリである。

Stale-While-Revalidate（SWR）とは

Stale（古くなったもの）-While（〜の間）-Revalidate（再検証）なので、「再検証している間は古いキャッシュを返す」という認識で良いかと思う。

react-queryはこのStale-While-Revalidateを応用したライブラリである

前提知識と環境構築

cacheTime データをキャッシュし、保持する時間。デフォルトは5分

staleTime キャッシュしたデータが古くなったとみなす時間を指す。デフォルトは0。

staleTimeが0の場合、もしくstaleTimeを超えた場合は再検証が行われる(SWR)

環境構築(_app.tsx)

import {QueryClient} from 'react-query'

const queryClient = new QueryClient()

新しいインスタンスを生成する。この時にデフォルトの設定もすることが可能

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30000 //デフォルトのstaleTimeを設定
    }
  }
})

最終的には以下のようになる

import '../styles/globals.css'
import type { AppProps } from 'next/app'
//react-query packages
import {QueryClientProvider,QueryClient} from 'react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30000 //デフォルトのstaleTimeを設定
    }
  }
})

const MyApp = ({ Component, pageProps }: AppProps) => {
//QueryClientProviderでラップしclientに先程作成したqueryClientを渡す
  return (
    <QueryClientProvider client={queryClient}> 
      <Component {...pageProps} />
    </QueryClientProvider>
  )
}
export default MyApp

devtools

react queryには開発者用のdevtoolが用意されている

import { ReactQueryDevtools } from 'react-query/devtools'

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

useQuery

データ取得時に使うHooks(読み取り)

基本構文

const sample = useQuery('key',fetchFunction)

const {data,isLoading,isError} = useQuery('key',fetchFunction)

keyに一意の値を入れる(例えばuser一覧なら'users'など)

keyは柔軟に設定でき、下記のような設定も可能

const {data,isLoading,isError} = useQuery(['key',id],fetchFunction)

オプション設定も可能

const {data,isLoading,isError} = useQuery(['key',id],() =>fetchFunction(id),{ enabled: !!id })

上記のenabled: !!idという設定ではidが存在する場合のみデータを取得させることができる

data ・・・ fetchしたデータが格納されている

isLoading ・・・ loading状態をboolにて取得できる

isError ・・・ データ取得に失敗(400や500など)した際にtrueとなる

他にも多数あるので詳細は公式で確認してください。

useMutation

データの更新時(書き込み)に使用するHooks

基本構文

const sampleMutate = useMutation(updateFunction)

const {mutate} = useMutation(updateFunction)

オプションも設定可能

const {mutate} = useMutation(updateFunction,{
  onSuccess: () => {
   //更新に成功した際の処理
  },
  onError： () => {
    //エラー時の処理
  }
})

使用例

const {mutate} = useMutation(() =>updateFunction(data),{
  onSuccess: () => {
   //更新に成功した際の処理
  },
  onError： () => {
    //エラー時の処理
  }
})

<button onClick={() => mutate({ id , name })}>
  Create 
</button>

useQueryClient

キャッシュを操作する際に使用(QueryClientインスタンスを返却)

import { useQueryClient } from 'react-query'
 
 const queryClient = useQueryClient()

よく使うメソッド

queryClient.getQueryData

すでにキャッシュされているデータを取得する際に使用。キャッシュが存在しない場合はundefinedが返却される

const data = queryClient.getQueryData('key')

queryClient.invalidateQueries

すでにキャッシュが存在する状態でkeyに指定したキャッシュを無効化し、再フェッチする

queryClient.invalidateQueries('key')