React Query (TanStack Query): React 用の強力なデータ取得および狀態(tài)管理ライブラリ

React Query (現(xiàn)在は TanStack Query と呼ばれています) は、React アプリケーション用の非常に人気のあるデータ取得および狀態(tài)管理ライブラリです。データのフェッチ、キャッシュ、同期、ページネーションの複雑さを処理することで、リモート データの操作を簡素化します。 React Query は、API リクエストの作成、データの保存と更新、読み込み狀態(tài)の管理に関わる手動プロセスの多くを抽象化します。

TanStack Query は、開発者が最小限のセットアップで React アプリケーションのサーバー狀態(tài)を管理するのに役立ち、特に非同期操作を扱う場合にスムーズなユーザー エクスペリエンスを保証します。

---

1. React クエリ (TanStack クエリ) とは何ですか?

React Query は、データ取得 および 狀態(tài)管理 ツールであり、React アプリケーションで サーバー側データ と対話するプロセスを簡素化するのに役立ちます。データのフェッチ、キャッシュ、同期、バックグラウンド更新を抽象化して管理します。

これは主に サーバー狀態(tài) を管理するために使用されます。これは、REST API、GraphQL、またはその他のデータ ソースからのデータなど、リモート サーバーまたは API から取得されるデータを指します。

主な機能:

• 自動キャッシュ: React Query はフェッチされたデータを自動的にキャッシュするため、追加のネットワーク リクエストを行わずに後続のデータをより高速にフェッチできます。
• 自動同期: ユーザーがページ間を切り替えたり、アプリに再度アクセスしたりした場合でも、クライアントとサーバーの間でデータの同期が維持されるようにします。
• バックグラウンド取得: React Query はバックグラウンドでデータを自動的に再取得し、ユーザーが常に最新のデータを取得できるようにします。
• ポーリングとページネーション: React Query は、すぐに使えるポーリングとページネーションをサポートしており、これらの一般的なタスクを簡素化します。

---

2. React Query の中心的な概念

1.クエリ

React Query のクエリは、サーバー (または外部データ ソース) からデータをフェッチするために使用されます。クエリは一意のキーによって識別され、React Query がデータのキャッシュと追跡に使用します。

例:

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json());
}

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

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

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

• useQuery フックは、fetchPosts 関數(shù)を使用してデータを取得します。投稿文字列は一意のキーであり、React Query はフェッチされたデータをこのキーの下にキャッシュします。

2.突然変異

ミューテーションは、サーバー上のデータを変更または作成するために使用されます (POST、PUT、DELETE リクエストなど)。クエリと同様に、ミューテーションを追跡し、ミューテーションが成功した後に狀態(tài)を自動的に更新できます。

例:

import { useMutation } from 'react-query';

function createPost(postData) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify(postData),
    headers: { 'Content-Type': 'application/json' },
  }).then((response) => response.json());
}

const NewPost = () => {
  const mutation = useMutation(createPost);

  const handleCreatePost = async () => {
    await mutation.mutate({ title: 'New Post', body: 'This is a new post' });
  };

  return (
    <div>
      <button onClick={handleCreatePost}>Create Post</button>
      {mutation.isLoading ? <p>Creating post...</p> : null}
      {mutation.isError ? <p>Error creating post</p> : null}
      {mutation.isSuccess ? <p>Post created!</p> : null}
    </div>
  );
};

• useMutation フックは、データの作成、更新、削除などの操作に使用されます。

3.キャッシング

React Query はクエリの結果を自動的にキャッシュします。このキャッシュにより、レンダリングが高速化され、サーバーへの重複したリクエストが回避されます。キャッシュされたデータは、クエリが再フェッチされると自動的に更新されます。

キャッシュ時間の設定や失効時間 (キャッシュされたデータが失効したとみなされるまでの時間) の指定など、アプリのニーズに合わせてキャッシュ動作をカスタマイズできます。

例:

const { data } = useQuery('posts', fetchPosts, {
  staleTime: 1000 * 60 * 5, // Cache is fresh for 5 minutes
  cacheTime: 1000 * 60 * 30, // Cache persists for 30 minutes
});

4.ページネーション

React Query は、ページネーションの組み込みサポートを提供します。カスタム ページと制限パラメータを使用してページ分割されたデータを取得でき、応答が適切にキャッシュされます。

例:

const fetchPage = (page) => fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`)
  .then((res) => res.json());

const PaginatedPosts = () => {
  const [page, setPage] = React.useState(1);
  const { data, isLoading, isError } = useQuery(['posts', page], () => fetchPage(page));

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

  return (
    <div>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <button onClick={() => setPage((prev) => prev - 1)} disabled={page === 1}>
        Previous
      </button>
      <button onClick={() => setPage((prev) => prev + 1)}>Next</button>
    </div>
  );
};

• useQuery フックは配列キー (['posts', page]) とともに使用され、ページ分割されたデータを取得します。

---

3. React Query (TanStack Query) のインストールとセットアップ

React Query を使用するには、react-query (TanStack Query) をインストールする必要があります。

npm install react-query

1. React Query Provider のセットアップ

アプリケーションで React Query を有効にするには、ルート コンポーネントを QueryClientProvider でラップして、アプリ全體に必要なコンテキストを提供する必要があります。

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

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <YourApp />
  </QueryClientProvider>
);

• QueryClient は React Query のコア オブジェクトです。アプリ內のすべてのクエリとミューテーションを管理します。

---

4. React Query の高度な機能

1.ページネーションと無限クエリ

React Query は、useInfiniteQuery によるページネーションと無限スクロールをサポートしており、無限のリストとページネーションを処理できます。

例:

import { useInfiniteQuery } from 'react-query';

function fetchPostsPage({ pageParam = 1 }) {
  return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${pageParam}`)
    .then((res) => res.json());
}

const InfinitePosts = () => {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isFetchingNextPage,
  } = useInfiniteQuery('posts', fetchPostsPage, {
    getNextPageParam: (lastPage, allPages) => lastPage.length === 10 ? allPages.length + 1 : false,
  });

  return (
    <div>
      {isLoading ? <div>Loading...</div> : null}
      {data?.pages.map((page, i) => (
        <div key={i}>
          {page.map((post) => (
            <p key={post.id}>{post.title}</p>
          ))}
        </div>
      ))}
      <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
        {isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'No more posts'}
      </button>
    </div>
  );
};

2.クエリの無効化

queryClient.invalidateQueries を使用してクエリを手動で無効にできます。これにより、指定されたクエリ キーのデータが強制的に再取得されます。

例:

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json());
}

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

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

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

• これにより、新しい投稿を作成した後、投稿のリストが自動的に再取得されます。

---

5. React Query を使用する利點

1.簡素化されたデータ取得

React Query は、読み込み、成功、エラーの狀態(tài)を処理するための定型文を削減し、データのフェッチをより簡単かつ宣言的にします。

2.自動キャッシュ

取得されたデータはデフォルトでキャッシュされるため、不必要なネットワーク リクエストが削減され、アプリが高速化されます。

3.バックグラウンド更新

React Query はバックグラウンドでのデータ取得を提供し、明示的に再取得されない場合でもアプリのデータを常に最新の狀態(tài)に保ちます。

4.組み込みのページネーションと無限のクエリ

React Query の組み込みフックを使用すると、ページネーションと無限スクロールの処理が簡単かつ効率的になります。

5.デバッグ用の DevTools

React Query は、クエリ、ミューテーション、およびそれらの狀態(tài)をリアルタイムで検査するための優(yōu)れた DevTools インターフェイスを提供します。

---

**6.結論

**

React Query (TanStack Query) は、React アプリケーションでのデータ取得と狀態(tài)管理を処理する効率的かつスケーラブルな方法を提供します。 React Query は、キャッシュ、バックグラウンドでのフェッチ、ページネーション、エラー処理を內蔵しており、サーバー側のデータを簡単かつシームレスに操作できます。

---

以上がReact Query (TanStack Query): React の効率的なデータ取得と狀態(tài)管理の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。