TanStack 查詢簡介

TanStack Query（以前稱為 React Query）是一個強大的庫，用于管理 React 應用程序中的數(shù)據(jù)請求狀態(tài)。 簡化高效獲取、緩存、同步和更新數(shù)據(jù)的過程。

安裝

要將 TanStack Query 集成到您的 React 項目中，請使用 npm 或 Yarn：

npm install @tanstack/react-query

或

yarn add @tanstack/react-query

要使用開發(fā)工具 (DevTools)，請安裝：

npm install @tanstack/react-query-devtools

設置

使用 QueryClientProvider 包裝您的應用來管理數(shù)據(jù)請求：

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

useQuery 鉤子可以輕松地從 API 獲取數(shù)據(jù)：

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

要執(zhí)行 POST、PUT 或 DELETE 等操作，請使用 useMutation:

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 在 TanStack 查詢中的重要性

TanStack Query 需要一個 fetcher（向數(shù)據(jù)源發(fā)出請求的函數(shù)）來獲取外部信息。 獲取器充當中介，提供靈活性并保持代碼整潔。 您可以自定義它以適合您的 API。

什么是抓取器？

獲取器是一個函數(shù)：

1. 接收參數(shù)（請求選項等）。
2. 提出請求（使用fetch、axios等）。
3. 返回帶有數(shù)據(jù)或錯誤的承諾。

獲取示例：

const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  const json = await response.json();
  return json;
};

結論

TanStack Query 優(yōu)化了 React 中的數(shù)據(jù)管理，通過其緩存和重新驗證系統(tǒng)提高了性能。 再見！ ？

以上是安裝和使用 TanStack Query（以前稱為 React Query）的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！