「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 にしておくと意図しないフェッチを防ぐことができる。

				
					jsx
    // ファイル名: 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 (
        <QueryClientProvider client={queryClient}>
          <UserList />
        </QueryClientProvider>
      );
    }

3. コンポーネントの作成

queryKey: キャッシュする際に必要となるキー情報。他のコンポーネントにも影響するため、一意となる値を指定する。
queryFn: データを取得するための関数を指定する。Promise が返却される必要がある。
staleTime、cacheTime については次項で解説。
isLoading: data が undefined の間は true になる。

				
					jsx
    // ファイル名: UserList.jsx
    import { useQuery } from "react-query";

    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 <div>ローディング</div>;

      if (isError) return <div>エラー</div>;

      return (
        <>
          {users.map((user) => (
            <div key={user.id}>ユーザー名: {user.name}</div>
          ))}
        </>
      );
    };

    export default UserList;

4. ブラウザで動作確認

以下のコマンドを実行。

npm run start

データの取得と表示が上手く行っていることを確認する。

出力結果

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}」でデバックコンソールが常に開いた状態になる。

				
					jsx
import { ReactQueryDevtools } from "react-query/devtools";

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
      <ReactQueryDevtools initialIsOpen={true} />
    </QueryClientProvider>
  );
}

スーパーソフトウエアの採用情報

あなたが活躍できるフィールドと充実した育成環境があります

詳しく見る

2024-02-02
テクノロジー

React Queryについて

「React Query」 の基本