Cursor-based pagination in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to request the first 5 items using cursor-based pagination.

GraphQL

query { items(first: [1]) { edges { node { id name } } pageInfo { hasNextPage endCursor } } }

Drag options to blanks, or click blank then click option'

A0

B5

C10

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 returns no items.

Using null is invalid syntax.

Using a number too large may fetch too many items.

The first argument specifies how many items to fetch from the start. Using 5 fetches the first 5 items.

2fill in blank

medium

Complete the code to fetch the next page of items after a given cursor.

GraphQL

query { items(first: 5, after: "[1]") { edges { node { id name } } pageInfo { hasNextPage endCursor } } }

Drag options to blanks, or click blank then click option'

Anull

B5

Ccursor123

DendCursor

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number instead of a cursor string.

Using null as a string is invalid here.

Using the literal 'endCursor' instead of its value.

The after argument takes a cursor string to fetch items after that cursor.

3fill in blank

hard

Fix the error in the query to correctly request items after a cursor.

GraphQL

query { items(first: 5, after: [1]) { edges { node { id name } } pageInfo { hasNextPage endCursor } } }

Drag options to blanks, or click blank then click option'

Anull

Bcursor123

C5

D"cursor123"

Attempts:

3 left

💡 Hint

Common Mistakes

Not putting quotes around the cursor string.

Using a number or null without quotes.

Using the variable name without quotes.

The cursor value must be a string, so it needs quotes around it in GraphQL queries.

4fill in blank

hard

Fill both blanks to request the last 3 items before a cursor.

GraphQL

query { items(last: [1], before: "[2]") { edges { node { id name } } pageInfo { hasPreviousPage startCursor } } }

Drag options to blanks, or click blank then click option'

A3

B5

CcursorXYZ

DcursorABC

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping last and before values.

Not quoting the cursor string.

Using first instead of last.

The last argument fetches the last N items before the cursor given in before.

5fill in blank

hard

Fill all three blanks to request items with filtering and pagination.

GraphQL

query { items(first: [1], after: "[2]", filter: { status: [3] }) { edges { node { id name status } } pageInfo { hasNextPage endCursor } } }

Drag options to blanks, or click blank then click option'

A10

Bcursor789

C"ACTIVE"

D"INACTIVE"

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the status string.

Using a number instead of a cursor string for after.

Mixing up the order of arguments.

This query fetches the first 10 items after a cursor, filtering only those with status "ACTIVE".