Infinite queries trong React Query là gì? Dùng cho pagination như thế nào?

useInfiniteQuery quản lý nhiều pages trong 1 query — getNextPageParam quyết định cursor page tiếp theo, fetchNextPage() load thêm khi user scroll tới cuối. useInfiniteQuery là hook chuyên biệt cho infinite scroll và load-more pagination — thay vì fetch 1 page, nó quản lý nhiều pages trong 1 query.

  • Cấu hình: queryFn nhận pageParam (cursor hoặc page number), getNextPageParam trả về param cho page tiếp theo (return undefined khi hết data).
  • Kết quả: data.pages là mảng chứa data từng page, data.pageParams lưu params đã dùng.
  • Gọi fetchNextPage() khi user scroll tới cuối (dùng IntersectionObserver).

Ví dụ: social feed, product listing, chat history.

Xem toàn bộ State Management cùng filter theo level & chủ đề con.

Mở danh sách State Management