Panduan Lengkap untuk Mengambil Data dalam Next.js dengan Axios dan React-TanStack-Query

Sejujurnya: Anda mungkin biasa dengan fetch API, ditambah dengan useState dan useEffect. Ia berfungsi, tetapi dengan cepat menjadi sukar digunakan. Ralat pengendalian? satu kerja kerja. Caching? Mimpi ngeri. Menguruskan kemas kini data? Lupakan sahaja!

Tetapi bagaimana jika pengambilan data boleh menjadi lebih mudah? Masukkan Axios dan React-TanStack-Query, mengubah pengurusan data daripada tindakan juggling kepada proses yang lancar dan cekap.

Pertimbangkan apl penyenaraian filem. Daripada kod berulang, alatan ini membolehkan anda menumpukan pada ciri membina. Bersedia untuk naik taraf? Mari mulakan!

---

Kenapa Parit fetch useState useEffect?

Sebelum menyelami penyelesaian, mari semak semula batasan pendekatan tradisional:

1. Lewahan: Setiap pengambilan data melibatkan kod berulang untuk keadaan pemuatan, pengendalian ralat dan panggilan pengambilan itu sendiri.
2. Ketidakcekapan Caching: fetch tidak menyimpan data secara semula jadi. Menavigasi kembali ke halaman bermakna mengambil semula segala-galanya.
3. Pengambilan Semula Manual: Kemas kini data memerlukan campur tangan manual untuk mencetuskan muat semula.

Mari kita selesaikan isu ini.

---

Langkah 1: Memasang Axios dan React-TanStack-Query

Tambahkan pakej ini pada projek anda:

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

Seterusnya, konfigurasikan Klien Pertanyaan, pembantu untuk mengurus data anda:

<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>

Itulah persediaannya. Mari ambil beberapa data!

---

Mengambil Data dengan React-TanStack-Query

Mari kita memfaktorkan semula contoh pengambilan mudah menggunakan React-TanStack-Query. Kami akan membina apl filem yang mengambil senarai filem:

Pendekatan Tradisional (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>

Sekarang, mari kita perkemaskan perkara ini dengan React-TanStack-Query.

Pendekatan yang Diperbaiki (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>

---

Penjelasan

1. useQuery: Cangkuk ini mengendalikan pengambilan, caching dan pengurusan ralat—tiada lagi manual useState atau useEffect!
2. Pengambilan Semula Automatik: Data kekal terkini tanpa campur tangan manual.
3. Penyepaduan Axios: Axios memudahkan pengambilan data berbanding API fetch asli.

---

Menyesuaikan Axios

Apl dunia sebenar selalunya memerlukan pengepala, URL asas atau token pengesahan. Cipta contoh Axios yang boleh diguna semula:

<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>

Gunakan contoh ini dalam pertanyaan anda:

<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>

---

Faedah React-TanStack-Query

Inilah sebabnya peningkatan yang berbaloi:

1. Caching Terbina dalam: Data dicache, mengelakkan pengambilan semula yang tidak perlu.
2. Pengendalian Ralat Ringkas: Tiada lagi try/catch blok yang kompleks.
3. Stale-While-Revalidate: Memaparkan data cache semasa mengambil kemas kini di latar belakang.
4. Penyesuaian Luas: Laraskan pengambilan, tinjauan pendapat, percubaan semula dan banyak lagi dengan mudah.

---

Bonus: Contoh Penomboran

Mengendalikan API bernombor adalah mudah:

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

---

Kesimpulan

Mengguna pakai React-TanStack-Query adalah seperti menaik taraf kepada sistem berprestasi tinggi. Ia mengendalikan caching, pengendalian ralat dan pengambilan semula, membolehkan anda menumpukan pada membina ciri yang luar biasa. Jika anda bosan dengan kod berulang, cubalah. Anda tidak akan menyesal!

Atas ialah kandungan terperinci Panduan Lengkap untuk Mengambil Data dalam Next.js dengan Axios dan React-TanStack-Query. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!