Infinite Query

React 🟡 Mid

Definition

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

#data-fetching#ux