Pagination with first and after in GraphQL - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the first argument do in GraphQL pagination?

The first argument limits the number of items returned from the start of the list. It tells the server to return only the first N items.

beginner

What is the purpose of the after argument in GraphQL pagination?

The after argument specifies a cursor. It tells the server to return items that come after this cursor, enabling you to fetch the next page of results.

intermediate

How do first and after work together in pagination?

You use <code>first</code> to set how many items you want, and <code>after</code> to say where to start from. Together, they let you get a specific page of results.

beginner

What is a cursor in GraphQL pagination?

A cursor is a unique identifier for a specific item in a list. It marks a position so you can fetch items after it when paginating.

intermediate

Why is cursor-based pagination preferred over offset-based pagination?

Cursor-based pagination is more reliable because it avoids issues with data changing between requests. It uses stable positions (cursors) instead of numeric offsets.

What does the first argument specify in GraphQL pagination?

A Number of items to return from the start

B Cursor to start after

C Total number of items in the list

D Sort order of items

first limits how many items you get starting from the beginning or after a cursor.

What is the role of the after argument?

A Specifies the cursor after which to fetch items

B Limits items to the first N

C Sorts items alphabetically

D Filters items by date

after tells the server to return items after the given cursor.

If you want the next 5 items after a cursor, which arguments do you use?

A <code>limit: 5</code>

B <code>first: 5</code> and <code>after: cursor</code>

C <code>offset: 5</code>

D <code>last: 5</code> and <code>before: cursor</code>

Use first to set count and after to set starting point.

What does a cursor represent in pagination?

A A page number

B The total count of items

C A unique position in the list

D A filter condition

A cursor marks a unique position to continue fetching items.

Why might cursor-based pagination be better than offset-based?

A It is faster to write queries

B It uses less memory

C It requires no arguments

D It handles data changes between requests better

Cursor-based pagination avoids skipping or repeating items when data changes.

Explain how you would use first and after to get the second page of results in a GraphQL query.

Think about how you move forward in a list using a marker.

Describe what a cursor is and why it is important in pagination.

Imagine a bookmark in a book.

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