安裝並使用 TanStack Query（以前稱為 React Query）

TanStack 查詢簡介

TanStack Query（以前稱為 React Query）是一個強大的函式庫，用於管理 React 應用程式中的資料請求狀態。 簡化高效取得、快取、同步和更新資料的過程。

安裝

要將 TanStack Query 整合到您的 React 專案中，請使用 npm 或 Yarn：

npm install @tanstack/react-query

或

yarn add @tanstack/react-query

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

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

的基本使用

useQuery 鉤子可以輕鬆地從 API 取得資料：

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 id="data-title">{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

使用 useMutation

執行突變

要執行 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（向資料來源發出請求的函數）來取得外部資訊。 獲取器充當中介，提供靈活性並保持程式碼整潔。 您可以自訂它以適合您的 API。

什麼是抓取器？

獲取器是一個函數：

1. 接收參數（請求選項等）。
2. 提出請求（使用fetch、axios等）。
3. 傳回帶有資料或錯誤的承諾。

取得範例：

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

結論

TanStack Query 優化了 React 中的資料管理，透過其快取和重新驗證系統提高了效能。 再見！ ？

以上是安裝並使用 TanStack Query（以前稱為 React Query）的詳細內容。更多資訊請關注PHP中文網其他相關文章！