Why Cursor-based pagination in GraphQL? - Purpose & Use Cases

The Big Idea

Discover how to browse endless lists without losing your place or waiting forever!

The Scenario

Imagine you have a huge list of friends on a social app. You want to see them 10 at a time. Without a smart way, you might try to load all friends at once or jump to a page by counting manually.

The Problem

Loading all friends at once is slow and uses too much memory. Counting pages manually can cause mistakes, like missing or repeating friends when new ones join or leave.

The Solution

Cursor-based pagination uses a unique marker (cursor) to remember where you left off. It fetches the next set of friends smoothly, even if the list changes, making browsing fast and reliable.

Before vs After

✗ Before

query { friends(page: 3, size: 10) { id name } }

✓ After

query { friends(after: "cursor123", first: 10) { edges { node { id name } cursor } pageInfo { hasNextPage endCursor } } }

What It Enables

It enables smooth, efficient browsing through large or changing lists without missing or repeating items.

Real Life Example

Scrolling through Instagram posts where new posts appear anytime, but you still see a continuous, seamless feed without confusion.

Key Takeaways

Manual page counting is slow and error-prone.

Cursor-based pagination remembers your place with a unique marker.

This method handles changing data smoothly and efficiently.