Standard offset-based pagination (?page=2&limit=10) works fine for simple tables, but for modern infinite scroll feeds (Twitter, Instagram, Reddit style), offset pagination fails because:

  • New items inserted at the top shift the entire list, causing duplicate items or skipped entries when scrolling down.
  • Database OFFSET queries degrade severely on large datasets.

Modern production APIs use Cursor-Based Pagination (?cursor=<base64>&limit=10), returning a pointer to the last item seen (nextCursor) and a boolean hasMore flag.

Playground API now provides native Cursor-Based Pagination across all endpoints!

1. The Cursor Endpoint Contract

Make a request with cursor and limit:

curl "https://playground.nileslabs.com/posts?cursor=eyJpZCI6MTB9&limit=10"

JSON Response: 

{ "data": [ { "id": 11, "title": "Next Post Title", "body": "..." }, { "id": 12, "title": "Another Post", "body": "..." } ], "pagination": { "nextCursor": "eyJpZCI6MjB9", "hasMore": true, "total": 100 } }

When reaching the end of the collection, hasMore returns false and nextCursor returns null.

2. Integrating with TanStack React Query (useInfiniteQuery) 

import { useInfiniteQuery } from '@tanstack/react-query'; async function fetchPosts({ pageParam = null }: { pageParam?: string | null }) { const url = pageParam ? `https://playground.nileslabs.com/posts?cursor=${pageParam}&limit=10` : 'https://playground.nileslabs.com/posts?limit=10'; const res = await fetch(url); return res.json(); } export function InfiniteFeed() { const { data, fetchNextPage, hasNextPage, isFetchingNextPage, } = useInfiniteQuery({ queryKey: ['infinite-posts'], queryFn: fetchPosts, getNextPageParam: (lastPage) => lastPage.pagination.nextCursor, initialPageParam: null, }); return ( <div> {data?.pages.map((page, i) => ( <div key={i}> {page.data.map((post: any) => ( <div key={post.id} className="post-card"> <h4>{post.title}</h4> </div> ))} </div> ))} {hasNextPage && ( <button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}> {isFetchingNextPage ? 'Loading more...' : 'Load More'} </button> )} </div> ); }

3. Interactive Pagination Studio

Explore cursor tokens, page parameters, and infinite scrolling in the documentation:
👉 https://playground.nileslabs.com/docs/pagination

Conclusion

Test real infinite scroll feeds and TanStack Query caching seamlessly with Playground API!