前回は、ReactQueryDevtools を使って、React Query の状態を確認しました。

今回は、React Query でキャッシュを設定します。

React Query では、再フェッチをする時、キャッシュを使ってバックエンドの読み込み回数を節約することができます。

キャッシュを使用するためには、useQuery の第三引数に staleTime を設定します。

staleTime は、ms で設定することができます。

ちなみに 3000ms は、3 秒を表ます。

つまり、staleTime を 3000ms で設定すると、3 秒間は再フェッチしてもバックエンドを読み込まずキャッシュを読み込みます。

3 秒後は、再フェッチすると API を取得するためにバックエンドを読み込もうとします。

const { isLoading, isError, data } = useQuery(
  "repoData",
  () =>
    fetch("https://api.github.com/repos/tannerlinsley/react-query").then(res =>
      res.json()
    ),
  { staleTime: 3000 }
)

また、cacheTime を使用すると、キャッシュの保有時間を設定することもできます。

cacheTime も、ms で設定することができます。

const { isLoading, isError, data } = useQuery(
  "repoData",
  () =>
    fetch("https://api.github.com/repos/tannerlinsley/react-query").then(res =>
      res.json()
    ),
  { staleTime: 3000, cacheTime: 1000000 }
)

ちなみに、cacheTime のデフォルトは 5 分間で設定されています。

キャッシュの時間を指定しない場合は、cacheTime: Infinityで設定できます。

では、ブラウザを確認します。

image2

image3

React Query のステータスが、3 秒間 fresh になり、stale になりました。

ソースコードは、以下の通りです。

import React from "react"
import { useQuery } from "react-query"

export default function Page() {
  const { isLoading, isError, data } = useQuery(
    "repoData",
    () =>
      fetch("https://api.github.com/repos/tannerlinsley/react-query").then(
        res => res.json()
      ),
    { staleTime: 3000, cacheTime: 1000000 }
  )

  if (isLoading) return <>Loading...</>

  if (isError) return <>Error</>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}
ブログ一覧