Services
Success Stories
Prestations et tarifs
Utiliser la puissance de SWR pour la pagination ou le scroll infini
Agence Drylead
16 oct. 2023
Utiliser la puissance de SWR pour la pagination ou le scroll infini
useSWRInfinite est un hook de la bibliothèque SWR qui permet de gérer des requêtes paginées ou infinies.
Comment mettre 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.
Voici un tutoriel pour l'utiliser :
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 pageconst 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 pagesconst 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.
Agence Drylead
16 oct. 2023
Articles récents