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.

Practice

1.

What does the first argument do in GraphQL pagination?

easy

A. Limits the number of items returned starting from the beginning or after a cursor

B. Specifies the cursor to start fetching items from

C. Returns all items without limit

D. Sorts the items in ascending order

Solution

1. Step 1: Understand the role of first in pagination

   The first argument tells GraphQL how many items to return in the current page.

2. Step 2: Differentiate from after

   after sets the starting point, but first limits the count of items fetched.

3. Final Answer:

   Limits the number of items returned starting from the beginning or after a cursor -> Option A

4. Quick Check:

   first = limit count [OK]

Hint: Remember: first = how many items to get [OK]

Common Mistakes:

• Confusing first with after
• Thinking first sets the start position
• Assuming first returns all items

2.

Which of the following is the correct syntax to fetch the first 5 items after a cursor "abc123" in GraphQL?

{ posts(first: 5, after: "abc123") { edges { node { id } } } }

easy

A. { posts(first: "5", after: abc123) { edges { node { id } } } }

B. { posts(after: 5, first: "abc123") { edges { node { id } } } }

C. { posts(first: 5, after: "abc123") { edges { node { id } } } }

D. { posts(first: 5 after: "abc123") { edges { node { id } } } }

Solution

1. Step 1: Check argument order and types

   The correct syntax uses first: 5 (number) and after: "abc123" (string) with a comma separating them.

2. Step 2: Identify syntax errors in other options

   { posts(after: 5, first: "abc123") { edges { node { id } } } } swaps argument names incorrectly. { posts(first: "5", after: abc123) { edges { node { id } } } } uses quotes incorrectly and misses quotes around cursor. { posts(first: 5 after: "abc123") { edges { node { id } } } } misses comma between arguments.

3. Final Answer:

   { posts(first: 5, after: "abc123") { edges { node { id } } } } -> Option C

4. Quick Check:

   Correct argument names and types with commas [OK]

Hint: Use commas between args and quotes for cursor strings [OK]

Common Mistakes:

• Missing commas between arguments
• Using wrong argument order
• Not quoting cursor strings

3.

Given this GraphQL query:

{ users(first: 3) { edges { node { name } cursor } pageInfo { hasNextPage endCursor } } }

And the data has 5 users: Alice, Bob, Carol, Dave, Eve. What will be the edges returned?

medium

A. [{name: "Dave"}, {name: "Eve"}]

B. [{name: "Alice"}, {name: "Bob"}, {name: "Carol"}]

C. [{name: "Alice"}, {name: "Bob"}, {name: "Carol"}, {name: "Dave"}, {name: "Eve"}]

D. [] (empty list)

Solution

1. Step 1: Understand first: 3 effect

   The query requests the first 3 users from the start of the list.

2. Step 2: Identify first 3 users in data

   The users are Alice, Bob, Carol, Dave, Eve. The first 3 are Alice, Bob, and Carol.

3. Final Answer:

   [{name: "Alice"}, {name: "Bob"}, {name: "Carol"}] -> Option B

4. Quick Check:

   first 3 users = Alice, Bob, Carol [OK]

Hint: first = number of items from start [OK]

Common Mistakes:

• Returning all users instead of limited
• Confusing first with after
• Returning empty list by mistake

4.

Identify the error in this GraphQL pagination query:

{ comments(first: 10 after: "cursor123") { edges { node { text } } } }

medium

A. Missing comma between first and after arguments

B. Cursor value should not be in quotes

C. The first argument must be a string

D. The edges field is invalid here

Solution

1. Step 1: Check argument syntax

   GraphQL requires commas between arguments. The query misses a comma between first: 10 and after: "cursor123".

2. Step 2: Validate other parts

   Cursor should be a quoted string (correct). first is a number (correct). edges is valid in pagination.

3. Final Answer:

   Missing comma between first and after arguments -> Option A

4. Quick Check:

   Arguments need commas [OK]

Hint: Always separate arguments with commas [OK]

Common Mistakes:

• Omitting commas between arguments
• Not quoting cursor strings
• Misunderstanding argument types

5.

You have a list of 12 products. You want to fetch products in pages of 4 using first and after. After fetching the first 4 products, you get an endCursor value of "cursor4". What query should you use to fetch the next 4 products?

hard

A. { products(first: 4, after: cursor4) { edges { node { id name } } } }

B. { products(after: 4, first: "cursor4") { edges { node { id name } } } }

C. { products(first: 8) { edges { node { id name } } } }

D. { products(first: 4, after: "cursor4") { edges { node { id name } } pageInfo { hasNextPage endCursor } } }

Solution

1. Step 1: Use first to limit items per page

   You want 4 items per page, so first: 4 is correct.

2. Step 2: Use after with the last page's endCursor

   To fetch the next page, use after: "cursor4" with quotes as it is a string cursor.

3. Step 3: Check syntax correctness

   { products(first: 4, after: "cursor4") { edges { node { id name } } pageInfo { hasNextPage endCursor } } } uses correct argument order, types, and includes pageInfo for navigation.

4. Final Answer:

   { products(first: 4, after: "cursor4") { edges { node { id name } } pageInfo { hasNextPage endCursor } } } -> Option D

5. Quick Check:

   Next page = first 4 after last cursor [OK]

Hint: Use last page's endCursor as after with first count [OK]

Common Mistakes:

• Swapping first and after argument values
• Not quoting cursor strings
• Requesting more items than page size