Drylead

DRYLEAD

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


Agence Drylead

16 oct. 2023


Articles récents