React Query Infinite Query Example

Back to Home

Understanding Infinite Queries

How Infinite Queries Work:

  • •Initial Data: Only the first page (10 items) is prefetched on the server
  • •Pagination Structure: Each response includes a "nextPage" parameter telling React Query what to fetch next
  • •Data Preservation: All pages are kept in memory, not replaced like with regular queries
  • •Scroll Detection: IntersectionObserver API automatically loads more data as you scroll

Key Differences from Regular Queries:

  • •Data Structure: Returns pages array instead of a simple data object
  • •Fetching: Use fetchNextPage() instead of refetch()
  • •Cache Behavior: Pages accumulate in cache rather than replacing previous data
  • •Server Prefetching: Only the first page is prefetched, client handles the rest

Live Query Status

Total Items
100
Loaded
10
Status
success
Has More
Yes

10of 100 Shoes

Nike Black 1

Out of Stock
NikeRunning
👟
Color: Black$50

Adidas Black 2

In Stock
AdidasRunning
👟
Color: Black$60

New Balance Black 3

In Stock
New BalanceRunning
👟
Color: Black$70

Puma White 4

In Stock
PumaRunning
👟
Color: White$80

Reebok White 5

In Stock
ReebokRunning
👟
Color: White$90

Converse White 6

Out of Stock
ConverseRunning
👟
Color: White$100

Vans Red 7

In Stock
VansRunning
👟
Color: Red$110

Under Armour Red 8

In Stock
Under ArmourCasual
👟
Color: Red$120

Asics Red 9

In Stock
AsicsCasual
👟
Color: Red$130

Brooks Blue 10

In Stock
BrooksCasual
👟
Color: Blue$140
Scroll for more