React Query (現在は TanStack Query と呼ばれています) は、React アプリケーション用の非常に人気のあるデータ取得および状態管理ライブラリです。データのフェッチ、キャッシュ、同期、ページネーションの複雑さを処理することで、リモート データの操作を簡素化します。 React Query は、API リクエストの作成、データの保存と更新、読み込み状態の管理に関わる手動プロセスの多くを抽象化します。
TanStack Query は、開発者が最小限のセットアップで React アプリケーションのサーバー状態を管理するのに役立ち、特に非同期操作を扱う場合にスムーズなユーザー エクスペリエンスを保証します。
React Query は、データ取得 および 状態管理 ツールであり、React アプリケーションで サーバー側データ と対話するプロセスを簡素化するのに役立ちます。データのフェッチ、キャッシュ、同期、バックグラウンド更新を抽象化して管理します。
これは主に サーバー状態 を管理するために使用されます。これは、REST API、GraphQL、またはその他のデータ ソースからのデータなど、リモート サーバーまたは API から取得されるデータを指します。
主な機能:
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>
);
};
ミューテーションは、サーバー上のデータを変更または作成するために使用されます (POST、PUT、DELETE リクエストなど)。クエリと同様に、ミューテーションを追跡し、ミューテーションが成功した後に状態を自動的に更新できます。
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>
);
};
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
});
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>
);
};
React Query を使用するには、react-query (TanStack Query) をインストールする必要があります。
npm install react-query
アプリケーションで React Query を有効にするには、ルート コンポーネントを QueryClientProvider でラップして、アプリ全体に必要なコンテキストを提供する必要があります。
import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
const App = () => (
<QueryClientProvider client={queryClient}>
<YourApp />
</QueryClientProvider>
);
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>
);
};
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>
);
};
React Query は、読み込み、成功、エラーの状態を処理するための定型文を削減し、データのフェッチをより簡単かつ宣言的にします。
取得されたデータはデフォルトでキャッシュされるため、不必要なネットワーク リクエストが削減され、アプリが高速化されます。
React Query はバックグラウンドでのデータ取得を提供し、明示的に再取得されない場合でもアプリのデータを常に最新の状態に保ちます。
React Query の組み込みフックを使用すると、ページネーションと無限スクロールの処理が簡単かつ効率的になります。
React Query は、クエリ、ミューテーション、およびそれらの状態をリアルタイムで検査するための優れた DevTools インターフェイスを提供します。
**
React Query (TanStack Query) は、React アプリケーションでのデータ取得と状態管理を処理する効率的かつスケーラブルな方法を提供します。 React Query は、キャッシュ、バックグラウンドでのフェッチ、ページネーション、エラー処理を内蔵しており、サーバー側のデータを簡単かつシームレスに操作できます。
以上がReact Query (TanStack Query): React の効率的なデータ取得と状態管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
