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.