Pagination with first and after in GraphQL

Introduction

Pagination helps you get a small part of a big list at a time. This makes loading data faster and easier to handle.

When showing a list of products on a website page by page.

When loading messages in a chat app little by little.

When displaying search results in chunks instead of all at once.

When you want to save data and speed by not loading everything.

When users scroll and you want to load more items after the current ones.

Syntax

GraphQL

query {
  items(first: Int, after: String) {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

first tells how many items to get.

after is a cursor that tells where to start after.

Examples

Get the first 5 items from the list.

GraphQL

query {
  items(first: 5) {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

Get 3 items after the item with cursor "YXJyYXljb25uZWN0aW9uOjQ=".

GraphQL

query {
  items(first: 3, after: "YXJyYXljb25uZWN0aW9uOjQ=") {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

Sample Program

This query asks for the first 2 items from the list. It also gets the cursor of the last item and if there are more items after.

GraphQL

query {
  items(first: 2) {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

Important Notes

The cursor is a unique string that marks a position in the list.

Use after with the endCursor from the last query to get the next page.

Always check hasNextPage to know if more items exist.

Summary

Pagination with first and after helps load data in small parts.

first sets how many items to get, after sets where to start.

Use cursor and pageInfo to navigate pages smoothly.

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