ITC Media

React

React Queryとは？その使い方や実例を丁寧に解説

（最終更新日：2023年7月）

✔当記事は以下の疑問を持つ方々へ向けた記事です

「React Queryとは具体的にどのようなものなのだろう？」
「React Queryの設定方法や使い方を身につけたい」
「React Queryを使った実際の実装例を知りたい」

✔当記事で得られる情報

  • React Queryの基本概念
  • React Queryの有効な設定法と活用法
  • React Queryの実装例

当記事では、React Queryの基本から、そのさまざまなオプションを使用した実用的な手法まで、実例を通じて詳細に説明しています。

ぜひ最後までご覧ください。

React Queryについて

こちらでは、「React Query」についてお伝えしていきます。

  • React Queryとは
  • React Queryの基本構文

React Queryの簡単な紹介

React Queryは、Reactアプリケーションでサーバーのデータを効率的に取得・キャッシュするためのライブラリです。

これにより、データ取得の状態管理が容易になります。

例はこちらです。

import { useQuery } from 'react-query';

function FetchUser() {
    const { isLoading, error, data } = useQuery('user', () =>
        fetch('https://api.example.com/user').then(res => res.json())
    );

    ...
}

React Queryの基本構文

React Queryは、useQueryフックを使用して、データを取得します。

このフックは、query keyとデータ取得関数を引数に取るものです。

const { data, isLoading, error } = useQuery("todos", fetchTodos);

Reactプロジェクトの立ち上げとその例

こちらでは、「Reactプロジェクト」を立ち上げる方法とReact Queryの実装例についてお伝えします。

  • 新規Reactプロジェクトの作成
  • UserコンポーネントとApp.jsの更新

新規Reactプロジェクトの作成

Reactプロジェクトを立ち上げるには、create-react-appコマンドを使用します。

npx create-react-app react-query-example
cd react-query-example

UserコンポーネントとApp.jsの更新

プロジェクト内でReact Queryを使用するために、Userコンポーネントを作成し、App.jsを更新します。

// User.js
import { useQuery } from 'react-query';

export const User = () => {
  const { isLoading, data } = useQuery("user", () => 
    fetch("https://api.example.com/user").then(res => res.json())
  );

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

  return <div>{data.name}</div>;
};

// App.js
import { User } from './User';

function App() {
  return (
    <div>
      <User />
    </div>
  );
}

export default App;

React Queryのリファクタリング：5ステップ

こちらでは、「React Queryのリファクタリング」について5つのステップでお伝えします。

  • UIとロジックの分離：カスタムフック化
  • useQueryの共通化：エンドポイント別のhooks作成
  • queryKeyの一意性保証
  • データ取得処理(queryFn)のuseQueryからの分離
  • useQueryのオプション設定の利用法

UIとロジックの分離：カスタムフック化

コンポーネントのロジックを、カスタムフックに分離します。

コードの再利用性とメンテナンス性が向上するからです。

例:

// useUser.js
import { useQuery } from 'react-query';

export const useUser = () => {
  return useQuery('user', () =>
    fetch('https://api.example.com/user').then(res => res.json())
  );
};

useQueryの共通化：エンドポイント別のhooks作成

エンドポイントごとにカスタムフックを作成することで、データ取得のロジックを整理し、再利用しやすくします。

// hooks/usePosts.js
import { useQuery } from 'react-query';

export const usePosts = () => {
  return useQuery('posts', () =>
    fetch('https://api.example.com/posts').then(res => res.json())
  );
};

queryKeyの一意性保証

queryKeyは、クエリの結果をキャッシュする際に使用される識別子です。

これを一意にすることで、異なるデータが正確にキャッシュされます。

// UserIDを使用して一意のqueryKeyを生成
const { data } = useQuery(['user', userId], () => fetchUserById(userId));

データ取得処理(queryFn)のuseQueryからの分離

データ取得処理を別の関数に分離して、コードの可読性を向上させます。

const fetchUserById = (id) => fetch(`https://api.example.com/users/${id}`).then(res => res.json());

const { data } = useQuery(['user', userId], () => fetchUserById(userId));

useQueryのオプション設定の利用法

useQueryは様々なオプションを提供しており、これを利用することで挙動をカスタマイズすることができます。

const { data } = useQuery("todos", fetchTodos, {
  staleTime: 5000,
  cacheTime: 10000,
  retry: 2
});

実際のフロー：useQueryの利用について

こちらでは、useQueryを実際に利用する際のフローについてお伝えします。

  • QueryClientの調整
  • useQueryの実行結果の検討
  • 不具合への対処法
  • ウィンドウフォーカスリフェッチについて
  • キャッシュ動作の確認
  • Devtoolsの設定方法

QueryClientの調整

QueryClientは、React Queryの設定とキャッシュを管理するもの。

QueryClientProviderを使用してアプリケーション全体で利用できるようにします。

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnWindowFocus: false,
        },
    },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      ...
    </QueryClientProvider>
  );
}

useQueryの実行結果の検討

useQueryの実行結果にはdata, isLoading, errorなどが含まれ、これらを利用してUIを制御します。

const { isLoading, error, data } = useQuery('todos', fetchTodos);

if (isLoading) return 'Loading...';

if (error) return `Error: ${error.message}`;

return (
  <ul>
    {data.map(todo => (
      <li key={todo.id}>{todo.title}</li>
    ))}
  </ul>
);

不具合への対処法

データの取得に失敗した場合など、useQueryがエラーを返す場合があります。

これを適切に処理することが重要です。

const { error } = useQuery('todos', fetchTodos);

if (error) {
  console.error("An error occurred:", error);
  return <div>An error occurred. Please try again later.</div>;
}

ウィンドウフォーカスリフェッチについて

デフォルトでは、ウィンドウがフォーカスされるとReact Queryは自動的にデータをリフェッチします。

これを無効することも可能です。

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            refetchOnWindowFocus: false,
        },
    },
});

キャッシュ動作の確認

React Queryはデータをキャッシュし、パフォーマンスを向上させます。

staleTimeとcacheTimeを設定することで、キャッシュの動作をカスタマイズしましょう。

useQuery('todos', fetchTodos, {
  staleTime: 1000 * 60 * 5, // 5 minutes
  cacheTime: 1000 * 60 * 30, // 30 minutes
});

Devtoolsの設定方法

React Query Devtoolsを使用することで、クエリの状態やキャッシュを視覚的に確認できます。

開発中に非常に便利なツールです。

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

function App() {
  return (
    <>
      {/* Your app content here */}
      <ReactQueryDevtools initialIsOpen={false} />
    </>
  );
}

まとめ

こちらでは、React Queryの利用におけるまとめと、その強みや注意点についてお伝えします。

  • React Queryの強みと利点
  • 使用上の注意点と対処策
  • 最後の一言：React Query学習を続けるための次のステップ

React Queryの強みと利点

React Queryは、データ取得のための状態管理を効率的に行うことができるライブラリです。

キャッシュ、自動再取得、最適化されたデータフェッチなどが特徴。

const info = useQuery(["user", userId], fetchUserData, {
  staleTime: 1000 * 60 * 10, // キャッシュが10分間新鮮なまま
});

このコードでは、React Queryを使ってデータを取得し、キャッシュを10分間保持します。

使用上の注意点と対処策

React Queryの使用時には、queryKeyの管理やエラーハンドリングなど、注意すべき点がいくつかあります。

また、キャッシュの設定を適切に行うことも重要です。

const { data, isError, error } = useQuery("todos", fetchTodos, {
  onError: (error) => {
    console.error("Data fetching failed", error);
  }
});

この例では、エラーが発生した場合にonErrorでエラーハンドリングをおこなっています。

React Query学習を続けるための次のステップ

React Queryは非常に強力なライブラリですが、その全ての機能を掴むには練習と学習が必要です。

公式ドキュメントを頻繁に参照し、実際のプロジェクトで積極的に使用してください。

次に、コミュニティでのディスカッションやブログ記事を読むことで、より深い理解を得ることができます。

そして、何よりも実際に手を動かして実装してみることが重要です。

関連記事