Pagination with first and after in GraphQL - Mini Project: Build & Apply

Pagination with first and after in GraphQL

📖 Scenario: You are building a simple GraphQL API for a bookstore. The bookstore has many books, and you want to allow users to fetch books in small chunks (pages) to avoid loading too many books at once.

🎯 Goal: Create a GraphQL query that supports pagination using first and after arguments to fetch a limited number of books starting after a given cursor.

📋 What You'll Learn

Create a list of books with exact titles and IDs

Add a first argument to limit the number of books returned

Add an after argument to start fetching books after a specific cursor

Return the books along with cursors for pagination

💡 Why This Matters

🌍 Real World

Pagination is used in APIs to load data in small chunks, improving performance and user experience when dealing with large datasets.

💼 Career

Understanding pagination with cursors is essential for backend developers working with GraphQL APIs or any data service that returns large lists.

1

DATA SETUP: Define the list of books

Create a list called books with these exact entries: { id: "1", title: "Book One" }, { id: "2", title: "Book Two" }, { id: "3", title: "Book Three" }, { id: "4", title: "Book Four" }, { id: "5", title: "Book Five" }.

GraphQL

# Your code here
books = [
    # Add book objects here
]

Hint

Use a list of dictionaries with keys id and title.

2

CONFIGURATION: Define pagination arguments

Create two variables: first set to 2 and after set to "1" to represent fetching 2 books after the book with ID "1".

GraphQL

books = [
    { "id": "1", "title": "Book One" },
    { "id": "2", "title": "Book Two" },
    { "id": "3", "title": "Book Three" },
    { "id": "4", "title": "Book Four" },
    { "id": "5", "title": "Book Five" }
]
# Your code here
first = 
after = 

Hint

Set first to 2 and after to "1" exactly.

3

CORE LOGIC: Implement pagination filtering

Create a variable start_index that finds the index of the book with id equal to after. Then create a variable paginated_books that slices the books list starting after start_index and includes first books.

GraphQL

books = [
    { "id": "1", "title": "Book One" },
    { "id": "2", "title": "Book Two" },
    { "id": "3", "title": "Book Three" },
    { "id": "4", "title": "Book Four" },
    { "id": "5", "title": "Book Five" }
]
first = 2
after = "1"
# Your code here
start_index = 
paginated_books = 

Hint

Use enumerate and next to find the index, then slice the list.

4

COMPLETION: Create the paginated response with cursors

Create a list edges where each item is a dictionary with keys cursor set to the book's id and node set to the book object from paginated_books. Then create a dictionary page_info with endCursor as the last book's id in paginated_books and hasNextPage as True if there are more books after the last one, otherwise False.

GraphQL

books = [
    { "id": "1", "title": "Book One" },
    { "id": "2", "title": "Book Two" },
    { "id": "3", "title": "Book Three" },
    { "id": "4", "title": "Book Four" },
    { "id": "5", "title": "Book Five" }
]
first = 2
after = "1"
start_index = next(i for i, book in enumerate(books) if book["id"] == after)
paginated_books = books[start_index + 1 : start_index + 1 + first]
# Your code here
edges = 
page_info = 

Hint

Use a list comprehension for edges and check length for hasNextPage.

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