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.