Un guide complet pour récupérer des données dans Next.js avec Axios et React-TanStack-Query

Soyons honnêtes : vous connaissez probablement l'API fetch, couplée à useState et useEffect. Cela fonctionne, mais devient vite lourd. Gestion des erreurs ? Une corvée. Mise en cache ? Un cauchemar. Gérer les mises à jour des données ? Oubliez ça !

Mais et si la récupération de données pouvait être plus simple ? Entrez Axios et React-TanStack-Query, transformant la gestion des données d'un acte de jonglage en un processus fluide et efficace.

Envisagez une application de liste de films. Au lieu d'un code répétitif, ces outils vous permettent de vous concentrer sur la création de fonctionnalités. Prêt pour une mise à niveau ? Commençons !

---

Pourquoi abandonner fetch useState useEffect ?

Avant de plonger dans les solutions, passons en revue les limites de l'approche traditionnelle :

1. Redondance : Chaque récupération de données implique un code répétitif pour les états de chargement, la gestion des erreurs et l'appel de récupération lui-même.
2. Inefficacité de la mise en cache : fetch ne met pas automatiquement en cache les données. Revenir à une page signifie tout récupérer.
3. Récupérations manuelles : Les mises à jour des données nécessitent une intervention manuelle pour déclencher les rechargements.

Abordons ces problèmes.

---

Étape 1 : Installer Axios et React-TanStack-Query

Ajoutez ces packages à votre projet :

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

Ensuite, configurez un Query Client, un assistant pour gérer vos données :

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

C'est la configuration. Récupérons quelques données !

---

Récupération de données avec React-TanStack-Query

Refactorisons un exemple de récupération simple en utilisant React-TanStack-Query. Nous allons créer une application de film récupérant une liste de films :

L'approche traditionnelle (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>

Maintenant, rationalisons cela avec React-TanStack-Query.

L'approche améliorée (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>

---

Explication

1. useQuery : Ce hook gère la récupération, la mise en cache et la gestion des erreurs – plus besoin de manuel useState ou useEffect !
2. Récupérations automatiques : Les données restent à jour sans intervention manuelle.
3. Intégration Axios : Axios simplifie la récupération de données par rapport à l'fetch API native.

---

Personnalisation d'Axios

Les applications du monde réel nécessitent souvent des en-têtes, des URL de base ou des jetons d'authentification. Créez une instance Axios réutilisable :

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

Utilisez cette instance dans votre requête :

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

---

Avantages de React-TanStack-Query

Voici pourquoi c'est une mise à niveau intéressante :

1. Mise en cache intégrée : Les données sont mises en cache, évitant ainsi les récupérations inutiles.
2. Gestion simplifiée des erreurs : Plus de blocs try/catch complexes.
3. Stale-While-Revalidate : Affiche les données mises en cache lors de la récupération des mises à jour en arrière-plan.
4. Personnalisation étendue : Ajustez facilement la récupération, l'interrogation, les tentatives et bien plus encore.

---

Bonus : Exemple de pagination

La gestion des API paginées est simple :

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

---

Conclusion

Adopter React-TanStack-Query, c'est comme passer à un système hautes performances. Il gère la mise en cache, la gestion des erreurs et la récupération, vous permettant de vous concentrer sur la création de fonctionnalités exceptionnelles. Si vous en avez assez du code répétitif, essayez-le. Vous ne le regretterez pas !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!