掌握 TanStack 查詢：React 中高效資料取得綜合指南-js教程-PHP中文網

Mastering TanStack Query: A Comprehensive Guide to Efficient Data Fetching in React

在現代 React 開發中，高效的資料擷取和狀態管理對於建立響應式和高效能的應用程式至關重要。雖然 useEffect 和 useState 等傳統工具可以處理資料獲取，但它們通常會導致程式碼複雜且難以維護，尤其是隨著應用程式的成長。輸入 TanStack Query（以前稱為 React Query），這是一個功能強大的函式庫，可以簡化資料擷取、快取、同步等操作。

在這篇文章中，我們將深入探討 TanStack Query 是什麼、為什麼應該考慮使用它，以及如何在 React 應用程式中實現它。

什麼是 TanStack 查詢？

TanStack Query 是用於 React 和其他框架的無頭資料擷取庫。它提供了在應用程式中獲取、快取、同步和更新伺服器狀態的工具，而無需複雜且通常冗餘的程式碼。

主要特點：

資料快取：自動快取資料並重複使用它，直到它變得陳舊。
自動重新取得：在後台自動重新取得數據，以保持您的 UI 最新。
樂觀更新：提供樂觀更新機制，確保響應式 UI。
伺服器端渲染：輕鬆支援伺服器端渲染。
開箱即用的開發工具：包含用於偵錯和監控查詢的開發工具。

為什麼要使用 TanStack 查詢？

使用 TanStack Query 可以大幅簡化 React 應用程式中的資料擷取邏輯。以下是考慮它的一些理由：

減少樣板程式碼：使用 useEffect 取得資料需要管理載入狀態、錯誤處理和重新取得。 TanStack Query 抽象化了這些問題，讓您專注於核心功能。
提高效能：透過快取、後台重新取得和重複資料刪除，TanStack Query 透過減少不必要的網路請求來幫助提高應用程式效能。
處理複雜場景：無論是分頁、無限滾動還是處理陳舊數據，TanStack Query 都能為複雜的數據獲取需求提供強大的解決方案。

如何在 React 應用程式中使用 TanStack 查詢

讓我們逐步了解在 React 專案中設定 TanStack Query 並使用它從 API 取得資料。

第 1 步：安裝

首先，安裝必要的軟體包：

npm install @tanstack/react-query

登入後複製

如果您使用 TypeScript，您還需要安裝以下類型：

npm install @tanstack/react-query @types/react

登入後複製

第 2 步：設定查詢客戶端

在應用程式中使用 TanStack Query 之前，您需要設定 QueryClient 並使用 QueryClientProvider 包裝您的應用程式。

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// Create a client
const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

登入後複製

第 3 步：使用 useQuery 取得資料

為了取得數據，TanStack Query 提供了 useQuery 鉤子。這個鉤子需要一個查詢鍵和一個傳回承諾的函數（通常是 API 呼叫）。

以下是從 API 取得資料的範例：

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

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

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

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

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

登入後複製

第 4 步：處理查詢狀態

TanStack Query 可以輕鬆處理查詢的不同狀態，例如載入、錯誤或成功。您可以使用 useQuery 提供的 isLoading、isError、isSuccess 和其他屬性來控制根據查詢狀態呈現的內容。

const { data, error, isLoading, isSuccess, isError } = useQuery(['posts'], fetchPosts);

if (isLoading) {
  return <div>Loading...</div>;
}

if (isError) {
  return <div>Error: {error.message}</div>;
}

if (isSuccess) {
  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

登入後複製

第 5 步：樂觀更新

樂觀更新可讓您在伺服器確認更新之前更新 UI，提供更快速的使用者體驗。這可以使用 TanStack 查詢中的 useMutation 鉤子來完成。

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

const addPost = async (newPost) => {
  const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
  return data;
};

function AddPost() {
  const queryClient = useQueryClient();

  const mutation = useMutation(addPost, {
    onMutate: async newPost => {
      await queryClient.cancelQueries(['posts']);

      const previousPosts = queryClient.getQueryData(['posts']);

      queryClient.setQueryData(['posts'], old => [...old, newPost]);

      return { previousPosts };
    },
    onError: (err, newPost, context) => {
      queryClient.setQueryData(['posts'], context.previousPosts);
    },
    onSettled: () => {
      queryClient.invalidateQueries(['posts']);
    },
  });

  return (
    <button onClick={() => mutation.mutate({ title: 'New Post', body: 'This is a new post.' })}>
      Add Post
    </button>
  );
}

登入後複製