使用 Axios 和 React-TanStack-Query 在 Next.js 中取得資料的完整指南

說實話：您可能熟悉 fetch API，以及 useState 和 useEffect。它可以工作，但很快就會變得笨拙。錯誤處理？ 一件苦差事。快取?一場惡夢。 管理資料更新？忘了它吧！

但是如果資料取得可以更簡單怎麼辦？ 輸入 Axios 和 React-TanStack-Query，將資料管理從複雜的行為轉變為平穩、高效的過程。

考慮一個電影列表應用程式。這些工具可以讓您專注於建立功能，而不是重複的程式碼。準備好升級了嗎？讓我們開始吧！

---

為什麼要放棄fetch useState useEffect？

在深入研究解決方案之前，讓我們先回顧一下傳統方法的限制：

1. 冗餘：每次資料取得都涉及載入狀態、錯誤處理和取得呼叫本身的重複程式碼。
2. 快取效率低： fetch本身並不會快取資料。導航回頁面意味著重新獲取所有內容。
3. 手動重新取得：資料更新需要手動介入才能觸發重新載入。

讓我們來解決這些問題。

---

第 1 步：安裝 Axios 和 React-TanStack-Query

將這些包裝加入您的專案：

<code class="language-bash">npm install axios @tanstack/react-query</code>

接下來，設定一個查詢客戶端，一個用於管理資料的助理：

<code class="language-javascript">// /components/providers/QueryProvider.jsx
"use client"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function QueryProvider({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}</code>

<code class="language-javascript">// /layout.jsx
import localFont from "next/font/local";
import "./globals.css";
import QueryProvider from "../components/providers/QueryProvider";

const geistSans = localFont({
    src: "./fonts/GeistVF.woff",
    variable: "--font-geist-sans",
    weight: "100 900",
});
const geistMono = localFont({
    src: "./fonts/GeistMonoVF.woff",
    variable: "--font-geist-mono",
    weight: "100 900",
});

export const metadata = {
    title: "Tanstack Query with axios",
    description: "Generated by create next app",
};


export default function RootLayout({ children }) {
    return (
        <QueryProvider>{children}</QueryProvider>
    );
}</code>

這就是設定。讓我們來取得一些數據！

---

使用 React-TanStack-Query 取得資料

讓我們使用 React-TanStack-Query 重構一個簡單的取得範例。 我們將建立一個電影應用程式來獲取電影列表：

傳統方法 (fetch useState useEffect)

<code class="language-javascript">import { useEffect, useState } from "react";

export default function Movies() {
  const [movies, setMovies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/movies")
      .then(res => res.json())
      .then(data => {
        setMovies(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading movies...</p>;
  if (error) return <p>Error loading movies: {error.message}</p>;

  return (
    <ul>
      {movies.map(movie => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}</code>

現在，讓我們使用 React-TanStack-Query 來簡化這個過程。

改進的方法（React-TanStack-Query）

<code class="language-javascript">import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const fetchMovies = async () => {
  const response = await axios.get("https://api.example.com/movies");
  return response.data;
};

export default function Movies() {
  const { data: movies, error, isLoading } = useQuery(["movies"], fetchMovies);

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

  return (
    <ul>
      {movies.map(movie => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}</code>

---

說明

1. useQuery: 此鉤子處理取得、快取和錯誤管理 - 不再需要手動 useState 或 useEffect！
2. 自動重新取得：資料保持最新狀態，無需手動幹預。
3. Axios 整合： 與原生 fetch API 相比，Axios 簡化了資料擷取。

---

自訂 Axios

現實世界的應用程式通常需要標頭、基本 URL 或身份驗證令牌。 建立可重複使用的 Axios 實例：

<code class="language-javascript">// utils/axios.js
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://api.example.com",
  headers: {
    Authorization: `Bearer ${process.env.API_TOKEN}`,
  },
});

export default axiosInstance;</code>

在查詢中使用此實例：

<code class="language-javascript">import { useQuery } from "@tanstack/react-query";
import axiosInstance from "../utils/axios";

const fetchMovies = async () => {
  const response = await axiosInstance.get("/movies");
  return response.data;
};

// ... rest of the Movies component remains the same</code>

---

React-TanStack-Query 的好處

這就是為什麼它值得升級：

1. 內建快取：資料被緩存，避免不必要的重新取得。
2. 簡化的錯誤處理：不再需要複雜的try/catch塊。
3. Stale-While-Revalidate： 在背景取得更新時顯示快取資料。
4. 廣泛的自訂：輕鬆調整獲取、輪詢、重試等。

---

獎勵：分頁範例

處理分頁 API 非常簡單：

<code class="language-bash">npm install axios @tanstack/react-query</code>

---

結論

採用 React-TanStack-Query 就像升級到高效能係統一樣。 它處理快取、錯誤處理和重新獲取，使您能夠專注於建立卓越的功能。 如果您厭倦了重複的程式碼，請嘗試一下。你不會後悔的！

以上是使用 Axios 和 React-TanStack-Query 在 Next.js 中取得資料的完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！