Utiliser la puissance de SWR pour la pagination ou le scroll infini

Installer SWR : Assurez-vous d'avoir SWR installé dans votre projet React. Si ce n'est pas le cas, vous pouvez l'installer à l'aide de npm ou yarn :

npm install swr
# ou
yarn add swr

Importez les dépendances

import useSWRInfinite from 'swr/infinite';
import axios from 'axios'; // Ou tout autre bibliothèque pour les requêtes HTTP

Créer une fonction de chargement des données

Vous devez créer une fonction qui prend un paramètre pageIndex et retourne une promesse contenant les données de cette page. Voici un exemple avec Axios:

const fetcher = (url) => axios.get(url).then((res) => res.data);
const fetchPage = (pageIndex) => fetcher(`/api/data?page=${pageIndex}`);

Utiliser useSWRInfinite

const PAGE_SIZE = 10; // Définir la taille de chaque page
const getKey = (pageIndex, previousPageData) => {
  // Retourner la clé pour la page demandée
  if (previousPageData && !previousPageData.length) return null; // Fin de la pagination
  return /api/data?page=${pageIndex + 1};
};
const { data, error, size, setSize } = useSWRInfinite(getKey, fetchPage, { initialSize: 1 });
// data contiendra les données paginées
// error contiendra les erreurs s'il y en a
// size représente le nombre de pages chargées
// setSize est une fonction pour charger plus de pages
const isLoadingInitialData = !data && !error;
const isLoadingMore = isLoadingInitialData || (size > 0 && data && typeof data[size - 1] === 'undefined');
// Vous pouvez utiliser ces indicateurs de chargement dans votre interface utilisateur

Rendu dans votre composant

if (error) return <div>Erreur: {error.message}</div>;
if (!data) return <div>Chargement en cours...</div>;

// Concaténez les pages de données en une seule liste
const allData = [].concat(...data);
return (
  <div>
    {allData.map((item) => (
      <div key={item.id}>{/* Affichez vos éléments ici */}</div>
    ))}
    {isLoadingMore && <div>Chargement de plus de données...</div>}
    <button
      onClick={() => {
        setSize(size + 1); // Charge la page suivante
      }}
      disabled={isLoadingMore}
    >
      Charger plus
    </button>
  </div>
);

C'est tout ! Vous avez maintenant un système de pagination ou de chargement infini fonctionnant avec SWR. Assurez-vous d'ajuster les URL et les fonctions selon vos besoins spécifiques.