Why Connection pattern (edges, nodes, pageInfo) in GraphQL? - Purpose & Use Cases

The Big Idea

Discover how breaking data into pages can turn a slow app into a lightning-fast experience!

The Scenario

Imagine you have a huge list of friends on a social app. You want to show them page by page, but you try to load all at once in a simple list.

This makes your app slow and confusing because it tries to handle too much data at once.

The Problem

Loading all data manually means waiting a long time and using lots of memory.

It's easy to make mistakes like missing some friends or showing duplicates.

Also, scrolling through a long list without clear pages is frustrating for users.

The Solution

The connection pattern breaks the list into small, easy-to-handle pages.

It uses edges to hold each friend with extra info, nodes for the actual friend data, and pageInfo to know if more pages exist.

This makes loading fast, smooth, and reliable.

Before vs After

✗ Before

query { friends { id name } }

✓ After

query { friendsConnection(first: 5, after: "cursor") { edges { node { id name } } pageInfo { hasNextPage endCursor } } }

What It Enables

This pattern lets apps load data bit by bit, making user experience fast and smooth even with huge lists.

Real Life Example

On a shopping site, showing product reviews page by page so users can easily browse without waiting for all reviews to load at once.

Key Takeaways

Manual loading of big lists is slow and error-prone.

Connection pattern organizes data into edges, nodes, and pageInfo for easy paging.

This makes apps faster and user-friendly when handling large data sets.