Pagination with first and after in GraphQL - Step-by-Step Execution

Concept Flow - Pagination with first and after

Start Query

↓

Check 'first' parameter

↓

Check 'after' cursor

↓

Fetch items after cursor

↓

Limit results to 'first' count

↓

Return paginated results with pageInfo

↓

End Query

The query starts by checking the 'first' count and 'after' cursor, then fetches items after the cursor limited by 'first', and returns results with pagination info.

Execution Sample

GraphQL

query {
  users(first: 3, after: "cursor2") {
    edges {
      node { id name }
      cursor
    }
    pageInfo { hasNextPage endCursor }
  }
}

Fetch 3 users after the cursor 'cursor2' with their ids, names, and pagination info.

Execution Table

Step	Action	Cursor	Items Fetched	Result Count	pageInfo
1	Start query with first=3, after='cursor2'	cursor2	-	-	-
2	Find position of 'cursor2' in data	cursor2	-	-	-
3	Fetch next 3 items after 'cursor2'	cursor2	[user3, user4, user5]	3	-
4	Check if more items exist after fetched	cursor5	[user3, user4, user5]	3	hasNextPage: true, endCursor: 'cursor5'
5	Return edges with nodes and cursors, plus pageInfo	cursor5	[user3, user4, user5]	3	hasNextPage: true, endCursor: 'cursor5'
6	End query	cursor5	[user3, user4, user5]	3	hasNextPage: true, endCursor: 'cursor5'

💡 Query ends after returning requested 3 items following 'cursor2' with pageInfo indicating more items exist.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
first	3	3	3	3	3
after	"cursor2"	"cursor2"	"cursor2"	"cursor5"	"cursor5"
fetchedItems	[]	[]	[user3, user4, user5]	[user3, user4, user5]	[user3, user4, user5]
pageInfo	{}	{}	{}	{hasNextPage: true, endCursor: 'cursor5'}	{hasNextPage: true, endCursor: 'cursor5'}

Key Moments - 2 Insights

Why do we need the 'after' cursor to fetch the next page?

The 'after' cursor tells the query where to start fetching items. Without it, the query would always return the first items. See execution_table step 2 where the cursor position is found.

What happens if there are fewer items than 'first' after the cursor?

The query returns all remaining items after the cursor, fewer than 'first'. The pageInfo's hasNextPage will be false. This is implied in step 4 where hasNextPage is checked.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, how many items are fetched?

A 3

B 2

C 4

D 0

💡 Hint

Check the 'Result Count' column at step 3 in the execution_table.

At which step does the query determine if more items exist after the fetched ones?

A Step 2

B Step 4

C Step 1

D Step 6

💡 Hint

Look at the 'Action' column describing checking for more items in the execution_table.

If the 'after' cursor was 'cursor5' instead of 'cursor2', what would change in the execution_table?

A pageInfo would be empty

B The 'first' value would change

C Fetched items would start after 'cursor5', so different users fetched

D No items would be fetched

💡 Hint

Refer to the 'Cursor' and 'Items Fetched' columns in the execution_table.

Concept Snapshot

Pagination with first and after in GraphQL:
- 'first' limits number of items returned
- 'after' cursor tells where to start fetching
- Query fetches items after cursor, up to 'first'
- Returns edges (items + cursors) and pageInfo
- pageInfo shows if more pages exist and last cursor
- Enables efficient forward pagination

Full Transcript

This visual execution shows how GraphQL pagination works using 'first' and 'after'. The query starts by reading the 'first' count and the 'after' cursor. It finds the position of the cursor in the data, then fetches the next 'first' items after that cursor. It checks if more items exist beyond those fetched and returns the items with their cursors and pageInfo indicating if more pages are available. Variables like 'first', 'after', fetched items, and pageInfo update step-by-step. Key moments include understanding why the 'after' cursor is needed and what happens if fewer items remain than requested. The quiz tests understanding of fetched item counts, when more items are checked, and how changing the cursor affects results.