TanStack Query（React Query）の使い方 - 効率的なデータフェッチングのための包括的ガイド

はじめに

Reactを使ったアプリケーションで、データの取得はしばしば重要な課題です。従来、手動でのAPIリクエストや状態管理の複雑さを解決するために、**TanStack Query（旧React Query）**が登場しました。本記事では、TanStack Queryを使って効率的なデータ取得を実現する方法について詳しく解説します。

TanStack Queryとは？

TanStack Queryは、Reactのデータフェッチングライブラリで、リモートデータの取得やキャッシュ、同期などを簡単に管理できます。これにより、コンポーネント間での状態管理が簡単になり、パフォーマンスの向上や開発の効率化が期待できます。

Reactのデータ管理における典型的な問題を解決するため、以下のような機能を提供します。

データキャッシング: 取得したデータをキャッシュすることで、無駄なリクエストを減らします。

リトライ機能: エラーが発生した場合に自動でリトライを行うことができます。

データの同期: 複数のリソースが同時に更新される場合に、データの同期を自動で行います。

TanStack Queryのインストール

まず、TanStack Queryをプロジェクトにインストールする必要があります。以下のコマンドを使ってインストールできます。

npm install @tanstack/react-query

または、yarnを使う場合は以下のようにインストールできます。

yarn add @tanstack/react-query

基本的な使用方法

1. Queryの設定

TanStack Queryでは、データを取得するためにuseQueryフックを使用します。以下は、APIからデータを取得するシンプルな例です。

import { useQuery } from '@tanstack/react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const MyComponent = () => {
  const { data, error, isLoading } = useQuery(['data'], fetchData);

  if (isLoading) return <div>Loading...</div>;
  if (error instanceof Error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Fetched Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

このコードでは、useQueryフックを使ってAPIからデータを取得しています。data、error、isLoadingなどの状態を簡単に管理できる点が特徴です。

TanStack Queryはデータをキャッシュするため、同じクエリを複数回発行しても、最初に取得したデータを再利用します。また、データが変わった際に自動でリフェッチを行う機能も提供しています。

const { data, isLoading, isFetching } = useQuery(['data'], fetchData, {
  refetchInterval: 5000, // 5秒ごとにリフェッチ
});

この設定により、データは5秒ごとに自動的にリフェッチされます。これにより、常に最新のデータを取得できます。

ミューテーションを使う

TanStack Queryは、データの変更（POST、PUT、DELETEリクエスト）にも対応しています。以下は、データを更新するための例です。

import { useMutation } from '@tanstack/react-query';

const updateData = async (newData) => {
  const response = await fetch('https://api.example.com/data', {
    method: 'PUT',
    body: JSON.stringify(newData),
    headers: { 'Content-Type': 'application/json' },
  });
  return response.json();
};

const MyComponent = () => {
  const mutation = useMutation(updateData, {
    onSuccess: (data) => {
      console.log('Data updated successfully:', data);
    },
    onError: (error) => {
      console.error('Error updating data:', error);
    },
  });

  return (
    <button onClick={() => mutation.mutate({ id: 1, name: 'New Name' })}>
      Update Data
    </button>
  );
};

このように、useMutationフックを使って、データの更新や削除を簡単に管理できます。

エラーハンドリング

TanStack Queryでは、エラーが発生した場合のハンドリングも簡単に行えます。useQueryやuseMutationフックの中でエラーが発生すると、errorプロパティを使ってエラーメッセージを表示できます。

const { data, error, isLoading } = useQuery(['data'], fetchData);

if (error instanceof Error) {
  alert(`Error occurred: ${error.message}`);
}

このようにして、エラーが発生した場合でも、ユーザーに適切なフィードバックを提供できます。

まとめ

TanStack Queryは、Reactアプリケーションにおけるデータフェッチングの課題を効率的に解決するための強力なツールです。データの取得、キャッシング、同期、エラーハンドリングなど、複雑な操作をシンプルに実装できるため、開発効率の向上に大いに貢献します。

本記事で紹介した基本的な使い方を参考に、さらに高度な機能を学び、実際のプロジェクトで活用してみてください。