Eine vollständige Anleitung zum Abrufen von Daten in Next.js mit Axios und React-TanStack-Query

Seien wir ehrlich: Sie kennen wahrscheinlich die fetch-API in Verbindung mit useState und useEffect. Es funktioniert, wird aber schnell unhandlich. Fehlerbehandlung? Eine lästige Pflicht. Zwischenspeichern? Ein Albtraum. Datenaktualisierungen verwalten? Vergiss es!

Aber was wäre, wenn der Datenabruf einfacher sein könnte? Geben Sie Axios und React-TanStack-Query ein und verwandeln Sie die Datenverwaltung von einem Jonglierakt in einen reibungslosen, effizienten Prozess.

Denken Sie an eine Filmlisten-App. Anstelle von sich wiederholendem Code können Sie sich mit diesen Tools auf die Erstellung von Funktionen konzentrieren. Bereit für ein Upgrade? Fangen wir an!

---

Warum aufgeben fetch useState useEffect?

Bevor wir uns mit Lösungen befassen, werfen wir einen Blick auf die Einschränkungen des traditionellen Ansatzes:

1. Redundanz: Jeder Datenabruf umfasst sich wiederholenden Code für Ladezustände, Fehlerbehandlung und den Abrufaufruf selbst.
2. Caching-Ineffizienz: fetch Daten werden grundsätzlich nicht zwischengespeichert. Wenn Sie zu einer Seite zurücknavigieren, müssen Sie alles erneut abrufen.
3. Manuelle erneute Abrufe: Datenaktualisierungen erfordern einen manuellen Eingriff, um erneute Ladevorgänge auszulösen.

Lassen Sie uns diese Probleme angehen.

---

Schritt 1: Axios und React-TanStack-Query installieren

Fügen Sie diese Pakete zu Ihrem Projekt hinzu:

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

Als nächstes konfigurieren Sie einen Abfrage-Client, einen Helfer für die Verwaltung Ihrer Daten:

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

Das ist das Setup. Lasst uns ein paar Daten abrufen!

---

Daten mit React-TanStack-Query abrufen

Lassen Sie uns ein einfaches Abrufbeispiel mit React-TanStack-Query umgestalten. Wir erstellen eine Film-App, die eine Filmliste abruft:

Der traditionelle Ansatz (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>

Lassen Sie uns dies nun mit React-TanStack-Query optimieren.

Der verbesserte Ansatz (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>

---

Erklärung

1. useQuery: Dieser Hook übernimmt das Abrufen, Zwischenspeichern und Fehlermanagement – ​​kein manuelles useState oder useEffect mehr!
2. Automatische Neuabrufe: Die Daten bleiben ohne manuelles Eingreifen aktuell.
3. Axios-Integration: Axios vereinfacht den Datenabruf im Vergleich zur nativen fetch API.

---

Axios anpassen

Reale Apps erfordern häufig Header, Basis-URLs oder Authentifizierungstoken. Erstellen Sie eine wiederverwendbare Axios-Instanz:

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

Verwenden Sie diese Instanz in Ihrer Abfrage:

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

---

Vorteile von React-TanStack-Query

Hier erfahren Sie, warum sich ein Upgrade lohnt:

1. Integriertes Caching:Daten werden zwischengespeichert, wodurch unnötige erneute Abrufe vermieden werden.
2. Vereinfachte Fehlerbehandlung:Keine komplexeren try/catchBlöcke mehr.
3. Stale-While-Revalidate: Zeigt zwischengespeicherte Daten an, während Aktualisierungen im Hintergrund abgerufen werden.
4. Umfangreiche Anpassung: Einfaches Anpassen von Abrufen, Abfragen, Wiederholungsversuchen und mehr.

---

Bonus: Paginierungsbeispiel

Der Umgang mit paginierten APIs ist unkompliziert:

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

---

Fazit

Die Einführung von React-TanStack-Query ist wie ein Upgrade auf ein Hochleistungssystem. Es übernimmt Caching, Fehlerbehandlung und erneutes Abrufen, sodass Sie sich auf die Entwicklung außergewöhnlicher Funktionen konzentrieren können. Wenn Sie genug von sich wiederholendem Code haben, probieren Sie es aus. Sie werden es nicht bereuen!

Das obige ist der detaillierte Inhalt vonEine vollständige Anleitung zum Abrufen von Daten in Next.js mit Axios und React-TanStack-Query. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!