Cursor-based pagination in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output of this GraphQL cursor-based pagination query?

Given a GraphQL query requesting the first 3 items after a cursor, what will be the returned edges' node IDs?

GraphQL

query {
  items(first: 3, after: "cursor2") {
    edges {
      node {
        id
      }
    }
  }
}

A ["4", "5", "6"]

B ["3", "4", "5"]

C ["2", "3", "4"]

D ["1", "2", "3"]

💡 Hint

The after cursor means start after the item with that cursor.

The query asks for 3 items after cursor2, so it returns items with IDs 3, 4, and 5.

🧠 Conceptual

intermediate

Which statement best describes cursor-based pagination?

Choose the correct description of cursor-based pagination in GraphQL.

A It only supports fetching the first page of data.

B It fetches pages by specifying page numbers and page size.

C It loads all data at once and then slices the results on the client side.

D It uses a unique cursor to mark the position and fetches items after or before that cursor.

💡 Hint

Think about how the cursor helps to continue fetching data.

Cursor-based pagination uses a unique cursor to mark the current position and fetches items after or before that cursor, unlike page number pagination.

📝 Syntax

advanced

Identify the syntax error in this GraphQL cursor-based pagination query

Which option contains a syntax error in the pagination arguments?

GraphQL

query {
  items(first: 5, after: "cursor123") {
    edges {
      node {
        id
      }
    }
  }
}

A Missing quotes around the cursor value in the 'after' argument.

B Missing 'edges' field in the query.

C Using 'first' instead of 'limit' for pagination.

D Using 'after' argument without 'first'.

💡 Hint

Check how string values are passed in GraphQL arguments.

Cursor values must be strings and require quotes. Missing quotes cause a syntax error.

❓ optimization

advanced

How to optimize cursor-based pagination for large datasets?

Which option best improves performance when paginating large datasets with cursors?

A Use offset-based pagination instead of cursors.

B Fetch all data and paginate on the client side.

C Use indexed columns for cursor values to speed up database lookups.

D Increase the page size to reduce the number of queries.

💡 Hint

Think about how databases find rows quickly.

Indexing the column used as the cursor allows the database to quickly locate the starting point for pagination, improving performance.

🔧 Debug

expert

Why does this cursor-based pagination query return duplicate items?

A GraphQL query with cursor-based pagination returns some items twice when fetching pages. What is the likely cause?

GraphQL

query {
  items(first: 2, after: "cursor5") {
    edges {
      node {
        id
      }
    }
  }
}

# The cursor is generated from the item's 'createdAt' timestamp.
# Some items have identical 'createdAt' values.

A Using a non-unique cursor (like 'createdAt') causes duplicates when multiple items share the same cursor value.

B The 'first' argument is too small, causing overlap.

C The server does not support cursor-based pagination.

D The query is missing the 'before' argument to prevent duplicates.

💡 Hint

Consider what happens if multiple items have the same cursor value.

If the cursor is not unique, items with the same cursor value can appear in multiple pages, causing duplicates.

Practice

1. What is the main purpose of cursor-based pagination in GraphQL?

easy

A. To fetch all data at once without limits

B. To sort data alphabetically

C. To fetch data in small parts using a cursor to mark position

D. To delete data from the database

Solution

1. Step 1: Understand pagination purpose

   Pagination is used to split large data into smaller parts for easier handling.

2. Step 2: Identify cursor role

   Cursor marks the position in the data to fetch the next part without overlap or missing items.

3. Final Answer:

   To fetch data in small parts using a cursor to mark position -> Option C

4. Quick Check:

   Cursor-based pagination = fetch data in parts [OK]

Hint: Cursor marks position to fetch next data chunk [OK]

Common Mistakes:

• Thinking pagination fetches all data at once
• Confusing cursor with sorting
• Assuming pagination deletes data

2. Which of the following is the correct way to request the first 5 items after a cursor in GraphQL?

easy

A. { items(fetch: 5, cursor: "cursor123") { edges { node } } }

B. { items(limit: 5, startAfter: "cursor123") { edges { node } } }

C. { items(take: 5, afterCursor: "cursor123") { edges { node } } }

D. { items(first: 5, after: "cursor123") { edges { node } } }

Solution

1. Step 1: Recall GraphQL cursor pagination syntax

   The standard uses first to limit items and after to specify the cursor.

2. Step 2: Match options with correct syntax

   { items(first: 5, after: "cursor123") { edges { node } } } uses first and after correctly; others use incorrect argument names.

3. Final Answer:

   { items(first: 5, after: "cursor123") { edges { node } } } -> Option D

4. Quick Check:

   Use first and after arguments [OK]

Hint: Use first and after arguments for cursor pagination [OK]

Common Mistakes:

• Using limit instead of first
• Using startAfter or afterCursor which are invalid
• Confusing argument names

3. Given this GraphQL query:
{ users(first: 3, after: "YXJyYXljb25uZWN0aW9uOjE=") { edges { node { id name } } pageInfo { hasNextPage endCursor } } }
What does the endCursor represent in the result?

medium

A. The cursor of the last item in the current page

B. The total number of items in the database

C. The cursor of the first item in the current page

D. The number of pages available

Solution

1. Step 1: Understand pageInfo fields

   endCursor marks the cursor of the last item returned in the current page.

2. Step 2: Differentiate from other fields

   hasNextPage shows if more pages exist; endCursor is not a count or first item cursor.

3. Final Answer:

   The cursor of the last item in the current page -> Option A

4. Quick Check:

   endCursor = last item cursor [OK]

Hint: endCursor points to last item fetched [OK]

Common Mistakes:

• Confusing endCursor with total count
• Thinking endCursor is first item cursor
• Assuming endCursor is page count

4. You wrote this GraphQL query for cursor pagination:
{ posts(first: 10, afterCursor: "abc123") { edges { node { title } } } }
Why does this query fail?

medium

A. The argument should be named after, not afterCursor

B. The first argument must be a string, not a number

C. The edges field is invalid in cursor pagination

D. The cursor value cannot be a string

Solution

1. Step 1: Check argument names for cursor pagination

   The correct argument to specify the cursor is after, not afterCursor.

2. Step 2: Validate other parts

   first accepts a number; edges is valid; cursor values are strings.

3. Final Answer:

   The argument should be named after, not afterCursor -> Option A

4. Quick Check:

   Use 'after' argument name [OK]

Hint: Use 'after' not 'afterCursor' for cursor argument [OK]

Common Mistakes:

• Using incorrect argument names
• Thinking first must be string
• Misunderstanding edges field usage

5. You want to fetch all comments in batches of 4 using cursor-based pagination. The first query is:
{ comments(first: 4) { edges { node { id text } } pageInfo { hasNextPage endCursor } } }
To fetch the next batch, which query should you use?

hard

A. { comments(limit: 4, after: "endCursor_value") { edges { node { id text } } } }

B. { comments(first: 4, after: "endCursor_value") { edges { node { id text } } pageInfo { hasNextPage endCursor } } }

C. { comments(last: 4, after: "endCursor_value") { edges { node { id text } } } }

D. { comments(first: 4, before: "endCursor_value") { edges { node { id text } } } }

Solution

1. Step 1: Understand how to continue pagination

   Use the after argument with the endCursor value from the previous page to fetch the next batch.

2. Step 2: Check argument correctness

   first: 4 limits to 4 items; after moves cursor forward; before or last are for backward pagination.

3. Final Answer:

   { comments(first: 4, after: "endCursor_value") { edges { node { id text } } pageInfo { hasNextPage endCursor } } } -> Option B

4. Quick Check:

   Use first and after with endCursor for next batch [OK]

Hint: Use first and after with endCursor to paginate forward [OK]

Common Mistakes:

• Using before instead of after for next page
• Using last instead of first for forward pagination
• Using limit instead of first argument