Infinite Query
React 🟡 MidDefinition
Pattern TanStack Query pour le scroll infini ou le 'charger plus'. useInfiniteQuery gere automatiquement les pages, le curseur et la concatenation des resultats.
Analogie
Comme un rouleau de papier toilette : tu en deroules plus quand tu en as besoin, page apres page.
Exemple de code
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
queryKey: ['posts'],
queryFn: ({ pageParam = 0 }) => fetchPosts(pageParam),
getNextPageParam: (lastPage) => lastPage.nextCursor,
});
// data.pages contient toutes les pages chargees
Cas d'usage
Feeds sociaux, listes de produits, tout contenu pagine avec scroll infini ou bouton 'charger plus'.