TanStack Query (旧称 React Query) のインストールと使用

タンスタッククエリの紹介

Tanstackクエリ（以前のReactクエリ）は、Reactアプリケーションのデータ要求のステータスを管理するための強力な書店です。 キャッシュの取得、保存、デザイン、および更新のプロセスを効率的に簡素化します

インストール

タンスタッククエリをReactプロジェクトに統合するには、NPMまたはYARNを使用してください：

>

npm install @tanstack/react-query

または

開発ツール（devotools）を使用するには、インストール：

yarn add @tanstack/react-query

>

npm install @tanstack/react-query-devtools

構成

データリクエストを管理するためにアプリケーションを

でラップします：

QueryClientProvider

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
      {/* Opcional: Si instalaste DevTools */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

useQueryでの基本的な使用 フックは、APIからのデータの取得を促進します：

>

useQuery

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

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

function MyComponent() {
  const { data, isLoading, error } = useQuery({ queryKey: ['post'], queryFn: fetchData });

  if (isLoading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

の突然変異 useMutation：>を使用します。

useMutationTanstack Queryでのフェッチャーの重要性<

Tanstackクエリには、外部情報を取得するために

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

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

function CreatePost() {
  const mutation = useMutation(createPost);

  return (
    <button onClick={() => mutation.mutate({ title: 'Nuevo Post', body: 'Contenido del post' })}>
      Crear Post
    </button>
  );
}

fetcher

（データソースにリクエストを実行する関数）が必要です。 フェッチャーは仲介者として機能し、柔軟性を提供し、コードのクリーニングを維持します。 それをカスタマイズしてAPIに適応できます フェッチャーとは何ですか？

フェッチャーは次の関数です

パラメーターを受信します（請願オプションなど） リクエストを行います（

、

など） データまたはエラーで約束を返します

フェッチャーの例：

1. 結論
2. fetchTanstack Queryは、Reactのデータ管理を最適化し、キャッシュと再生システムでパフォーマンスを向上させます。 また近いうちにお会いしましょう！ ？

以上がTanStack Query (旧称 React Query) のインストールと使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。