React Queryとは？状態管理・データ再取得の仕組みを作ろう

2023-11-13

当サイトでは一部リンクに広告が含まれています

React Queryは、あなたのウェブアプリケーションにAPI（インターネットを介してデータを送受信するための仕組み）を組み込む際に便利なツールです。
これから、その使い方を詳しく解説していきます。

React Queryとは何か？

まず最初に、React Queryについて簡単に紹介します。

React Queryの基本的な概念

React Queryは、データをフェッチ（取得）し、キャッシュ（一時保存）するためのJavaScriptライブラリです。
具体的には、サーバーからデータを取得したり、データを更新したり、その結果を一時的に保存しておくためのツールです。

例えば、以下のように使います。

import { useQuery } from 'react-query';

function App() {
  const { isLoading, error, data } = useQuery('repoData', () =>
    fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
      res.json()
    )
  );

  if (isLoading) return '読み込み中...';

  if (error) return 'エラーが発生しました: ' + error.message;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong><br />
      <strong>⭐️ {data.stargazers_count}</strong>
    </div>
  );
}

上記のソースコードでは、useQueryというReact Queryの関数を使って、GitHubのAPIから特定のリポジトリのデータを取得しています。
取得したデータはdataという変数に保存され、それを元にページを描画しています。

なぜReact Queryは必要か？

次に、なぜReact Queryが必要なのかについて説明します。

React Queryは、Web開発で頻繁に行われるデータの取得と更新という操作を、シンプルかつ効率的に行うことができます。
具体的には以下のようなメリットがあります。

自動的なデータ再取得: データが変更された際に自動的に再取得が行われ、常に最新の状態が表示されます。
キャッシング: 一度取得したデータは一時的に保存され、同じデータの再取得が不要になります。
同期: 同じデータを参照する複数のコンポーネントを簡単に同期できます。

これらの機能は、React Queryを使わない場合、手動で実装しなければならず、かなり複雑になります。
React Queryを使うことで、このような複雑さを大幅に減らすことができます。

React QueryをNPMでセットアップする方法

次に、React Queryを実際に使ってみましょう。
まずは、React QueryをNPM（JavaScriptのライブラリを管理するツール）を使ってセットアップする方法から説明します。

NPMを使ったReact Queryのインストール

React Queryのインストールは、以下のコマンドを実行するだけです。

npm install react-query

これで、React Queryがインストールされ、あなたのプロジェクトで使用できるようになります。

React Queryの初期設定方法

次に、React Queryの初期設定方法について説明します。

import { QueryClient, Query

ClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      // ここにあなたのコンポーネントを書く
    </QueryClientProvider>
  );
}

上記のソースコードでは、まずQueryClientという新しいクライアントを作成しています。
そして、そのクライアントをQueryClientProviderというプロバイダーに渡して、その中にあなたのコンポーネントを書きます。
これにより、React Queryが全てのコンポーネントで使用できるようになります。

React Queryでの状態管理の基本

次に、React Queryでの状態管理について説明します。

React Queryの状態管理の概念

React Queryは、以下のような3つの状態を管理します。

データの読み込み状態（isLoading）: データが読み込まれている間はtrue、読み込みが完了するとfalseになります。
データ（data）: データが読み込まれると、そのデータはdataという変数に保存されます。
エラー（error）: データの読み込み中にエラーが発生すると、そのエラー情報はerrorという変数に保存されます。

以上の3つの状態を管理することで、あなたのアプリケーションはいつでも最新の状態を反映することができます。

最適な状態管理のためのベストプラクティス

React Queryで状態管理を行う際のベストプラクティスは以下の通りです。

読み込み状態の表示: データが読み込まれている間は、ユーザーに読み込み中であることを伝えるためのUI（例: ローディングスピナー）を表示しましょう。
エラーハンドリング: エラーが発生した際には、それをユーザーに伝えるためのUIを表示し、必要であればエラー内容をログに出力しましょう。
データの表示: データが正常に読み込まれたら、それを元にUIを描画しましょう。

以上の3つのポイントを押さえておけば、あなたのアプリケーションはユーザーにとって使いやすいものになります。

データの再取得とキャッシュ管理

最後に、React Queryでのデータの再取得とキャッシュ管理について説明します。

React Queryでのデータ再取得のメカニズム

React Queryでは、データの再取得は自動的に行われます。
具体的には、以下の場合に再取得が行われます。

ウィンドウがフォーカスされたとき: ユーザーがブラウザのタブを切り替えたときなど、ウィンドウがフォーカスされるとデータが再取得されます。
データが変更されたとき: データを更新する操作（例: フォームの送信）が行われたとき、そのデータが再取得されます。
定期的な再取得: 特定の間隔でデータが自動的に再取得されます。この間隔は設定で変更することができます。

以上のメカニズムにより、あなたのアプリケーションは常に最新のデータを表示することができます。

キャッシュ管理のためのスマートなテクニック

React Queryでは、一度取得したデータは自動的にキャッシュされます。
しかし、そのままではキャッシュが無制限に増え続け、メモリを消費しすぎてしまいます。

そのため、React Queryでは以下のようなキャッシュ管理のテクニックが用意されています。

古いデータの削除: 一定時間以上アクセスされていないデータは自動的に削除されます。この時間は設定で変更することができます。
キャッシュの上限: キャッシュの数に上限を設けることができます。上限を超えると、最も古いデータから削除されます。

以上のテクニックを用いることで、効率的にキャッシュを管理することができます。

6実例で学ぶReact Query の活用法

ここからは具体的な実例を元にReact Query の活用法を学んでいきましょう。

ToDoリストアプリケーションの作成

ここでは、React Queryを使ったToDoリストアプリケーションの作成を通じて、React Queryの具体的な使い方を学びます。

以下のコードは、ToDoリストの一覧を取得し表示するコンポーネントのソースコードです。

import { useQuery } from 'react-query';
import axios from 'axios';

const fetchTodos = async () => {
  const response = await axios.get('/api/todos');
  return response.data;
};

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

  if (isLoading) {
    return <div>読み込み中...</div>;
  }

  if (error) {
    return <div>エラーが発生しました： {error.message}</div>;
  }

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

export default TodoList;

このコードでは、まずuseQueryフックを使ってデータの取得を行っています。
その後、読み込み状態、エラー、データの状態に応じて異なるUIを表示します。

これで、あなたのアプリケーションはToDoリストを取得し、表示することができます。

ToDoリストへのアイテム追加

次に、ToDoリストへのアイテム追加機能を実装してみましょう。

以下のコードは、新しいToDoアイテムを追加するコンポーネントのソースコードです。

import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';

const addTodo = async (newTodo) => {
  const response = await axios.post('/api/todos', newTodo);
  return response.data;
};

function AddTodo() {
  const queryClient = useQueryClient();
  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries('todos');
    },
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const newTodo = { title: event.target.elements.title.value };
    mutation.mutate(newTodo);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="title" placeholder="新しいToDoを入力" required />
      <button type="submit">追加</button>
    </form>
  );
}

export default AddTodo;

このコードでは、まずuseMutationフックを使って新しいToDoアイテムの追加を行っています。
その後、新しいアイテムが追加されたら、queryClient.invalidateQueries('todos')を呼び出してToDoリストのクエリを無効化し、データを再取得します。
これにより、新しいアイテムが追加されたらすぐにリストに反映されます。

これで、あなたのアプリケーションはToDoリストへのアイテム追加機能を持つようになりました。