TanStack クエリをマスターする: React で効率的にデータをフェッチするための包括的なガイド

最新の React 開発では、応答性が高くパフォーマンスの高いアプリケーションを構築するために、効率的なデータの取得と状態管理が重要です。 useEffect や useState などの従来のツールはデータのフェッチを処理できますが、特にアプリケーションが成長するにつれて、コードが複雑で保守が困難になることがよくあります。データのフェッチ、キャッシュ、同期などを簡素化する強力なライブラリである TanStack Query (旧称 React Query) を導入してください。

この投稿では、TanStack Query とは何か、TanStack Query の使用を検討する理由、および React アプリケーションに TanStack Query を実装する方法について詳しく説明します。

---

TanStack クエリとは何ですか?

TanStack Query は、React およびその他のフレームワーク用のヘッドレス データフェッチ ライブラリです。これは、複雑で冗長なコードを必要とせずに、アプリケーションのサーバー状態をフェッチ、キャッシュ、同期、更新するためのツールを提供します。

主な機能:

• データ キャッシュ: データが自動的にキャッシュされ、期限切れになるまで再利用されます。
• 自動再フェッチ: UI を最新の状態に保つために、バックグラウンドでデータを自動的に再フェッチします。
• オプティミスティックアップデート: オプティミスティックアップデートのメカニズムを提供し、応答性の高い UI を保証します。
• サーバー側レンダリング: サーバー側レンダリングを簡単にサポートします。
• すぐに使える開発ツール: クエリのデバッグと監視のための開発ツールが含まれています。

TanStack クエリを使用する理由

TanStack Query を使用すると、React アプリケーションのデータ取得ロジックを大幅に簡素化できます。検討すべき理由は次のとおりです:

• ボイラープレート コードを削減: useEffect を使用してデータを取得するには、読み込み状態の管理、エラー処理、および再取得が必要です。 TanStack Query はこれらの問題を抽象化し、コア機能に集中できるようにします。

• パフォーマンスの向上: キャッシュ、バックグラウンド再フェッチ、重複排除により、TanStack Query は不要なネットワーク リクエストを削減し、アプリケーションのパフォーマンスを向上させます。

• 複雑なシナリオの処理: ページネーション、無限スクロール、古いデータの処理など、TanStack Query は複雑なデータ取得のニーズに堅牢なソリューションを提供します。

React アプリケーションで TanStack クエリを使用する方法

React プロジェクトで TanStack Query を設定し、それを使用して API からデータを取得する手順を見てみましょう。

ステップ 1: インストール

まず、必要なパッケージをインストールします。

npm install @tanstack/react-query

TypeScript を使用している場合は、次のタイプもインストールする必要があります。

npm install @tanstack/react-query @types/react

ステップ 2: クエリ クライアントのセットアップ

アプリケーションで TanStack Query を使用する前に、QueryClient をセットアップし、QueryClientProvider でアプリケーションをラップする必要があります。

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// Create a client
const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

ステップ 3: useQuery を使用してデータを取得する

データをフェッチするために、TanStack Query は useQuery フックを提供します。このフックは、クエリ キーと、Promise (通常は API 呼び出し) を返す関数を受け取ります。

API からデータを取得する例を次に示します:

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

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

function Posts() {
  const { data, error, isLoading } = useQuery(['posts'], fetchPosts);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading posts</div>;

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

ステップ 4: クエリ状態の処理

TanStack Query を使用すると、読み込み、エラー、成功など、クエリのさまざまな状態を簡単に処理できます。 useQuery によって提供される isLoading、isError、isSuccess、およびその他のプロパティを使用して、クエリの状態に基づいてレンダリングされる内容を制御できます。

const { data, error, isLoading, isSuccess, isError } = useQuery(['posts'], fetchPosts);

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

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

if (isSuccess) {
  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

ステップ 5: 楽観的なアップデート

オプティミスティックアップデートを使用すると、サーバーがアップデートを確認する前に UI をアップデートできるため、より快適なユーザー エクスペリエンスが提供されます。これは、TanStack Query の useMutation フックを使用して実行できます。

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

const addPost = async (newPost) => {
  const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
  return data;
};

function AddPost() {
  const queryClient = useQueryClient();

  const mutation = useMutation(addPost, {
    onMutate: async newPost => {
      await queryClient.cancelQueries(['posts']);

      const previousPosts = queryClient.getQueryData(['posts']);

      queryClient.setQueryData(['posts'], old => [...old, newPost]);

      return { previousPosts };
    },
    onError: (err, newPost, context) => {
      queryClient.setQueryData(['posts'], context.previousPosts);
    },
    onSettled: () => {
      queryClient.invalidateQueries(['posts']);
    },
  });

  return (
    <button onClick={() => mutation.mutate({ title: 'New Post', body: 'This is a new post.' })}>
      Add Post
    </button>
  );
}

結論

TanStack Query は、React アプリケーションでのサーバー側の状態の管理方法を大幅に改善できる強力なツールです。データのフェッチ、キャッシュ、同期などを処理することで、複雑な状態管理に悩まされることなく機能の構築に集中できます。

小規模なプロジェクトを構築する場合でも、大規模なアプリケーションを構築する場合でも、TanStack Query を統合すると、コードがよりクリーンで保守しやすくなり、ユーザー エクスペリエンスが向上します。自動再フェッチ、キャッシュ、オプティミスティック更新などの機能を備えた TanStack Query は、現代の React 開発者にとって不可欠なツールです。

次のプロジェクトで TanStack Query を試して、React でのデータ取得にもたらす効率性とシンプルさを体験してください。

コーディングを楽しんでください ?‍?

以上がTanStack クエリをマスターする: React で効率的にデータをフェッチするための包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。