「React Query」の基本

こんにちは、技術部の K です。今回は「React Query」の基本についてまとめました。

React Query とは

React Query とは、React アプリケーションで利用できるデータ取得ライブラリである。データの取得、キャッシュ、データの更新に関する機能を提供する。
バージョンが V4 以降では、名称が「Tanstack Query」に変更されている。

公式ドキュメント(https://tanstack.com/query/v3/docs/framework/react/overview)

特長

データ更新が容易
- データが更新された際に自動的にデータを取得する。
- データ更新の複雑なロジックを簡素化できる。
- HTTP クライアントなどの機能は提供されていない。

キャッシング
- 取得したデータをキャッシュする。
- キャッシュが有効の場合はキャッシュされたデータを取得する。
- キャッシュが古い場合は、リクエストを行う。

UI の更新
- データが更新された際に自動的に UI への反映、更新をしてくれる。

利用手順

React Query のインストール
- React アプリケーションのディレクトリ配下で以下を実行。
  - npm i react-query

QueryClientProvider の設定
- React Query を利用するコンポーネントの親コンポーネントに設定する必要がある。
- この設定により、子コンポーネントでデータを共有することができるので、データの同期が可能になる。
- QueryClient でデフォルトの設定が可能。例えば「refetchOnWindowFocus: true」の場合、ユーザがコンポーネントをフォーカスした際に自動でフェッチされてしまうので、QueryClient で false にしておくと意図しないフェッチを防ぐことができる。

// ファイル名: App.js import { QueryClient, QueryClientProvider } from "react-query"; import { ReactQueryDevtools } from "react-query/devtools"; import UserList from "./UserList.jsx"; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, function App() { return ( const fetchUsers = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/users", { method: "GET" } return response.json(); const UserList = () => { const { data: users, isError, isLoading, } = useQuery({ queryKey: ["users"], queryFn: fetchUsers, staleTime: 60000, // 1分後に queryFn を実行する cacheTime: 300000, // 5分間キャッシュされる if (isLoading) return

ローディング

; if (isError) return

エラー

; return ( {users.map((user) => (

ユーザー名: {user.name}

export default UserList;

Stale Time、Cache Time について

Stale Time

キャッシュデータの状態が flesh から stale へ移行するまでの時間（デフォルトは「0」）。
- flesh: 最新のデータであることを示す。
- stale: キャッシュデータが古いことを示す。

flesh の場合はデータはキャッシュから取得される。
stale の場合、キャッシュを返しつつ、バックグラウンドでデータの取得を行い、値が更新されていたら反映する。

Cache Time

キャッシュが残る時間（デフォルトは 5 分）。

React Query Devtools で Query を可視化

development build で利用可能。
Query の状態が確認できる。
インストールコマンド
- npm install react-query-devtools

使用方法
- ページの左下の風車マークをクリックすることで確認できる。
- 「initialIsOpen={true}」でデバックコンソールが常に開いた状態になる。

詳しく見る

「React Query」 の基本