Pagination with first and after in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch the first 5 items in a paginated GraphQL query.

GraphQL

query { items([1]: 5) { edges { node { id name } } } }

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

Afirst

Blast

Cafter

Dbefore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'last' instead of 'first' fetches items from the end, not the start.

Using 'after' without a cursor does not fetch the first items.

The first argument fetches the first N items in a paginated list.

2fill in blank

medium

Complete the code to fetch items after a given cursor in a paginated GraphQL query.

GraphQL

query { items(first: 5, [1]: "cursor123") { edges { node { id name } } } }

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

Aafter

Bfirst

Cbefore

Dlast

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'before' instead of 'after' fetches items before the cursor.

Using 'last' instead of 'after' does not specify a cursor position.

The after argument specifies the cursor after which to fetch items.

3fill in blank

hard

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

GraphQL

query { items([1]: 5, after: "cursor123") { edges { node { id name } } } }

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

Alast

Bbefore

Cfirst

Dafter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'last' with 'after' causes errors because 'last' fetches items from the end.

Omitting 'first' results in no limit on items fetched.

The first argument must be used with after to fetch the next set of items after the cursor.

4fill in blank

hard

Fill both blanks to fetch the first 10 items after a cursor in a GraphQL query.

GraphQL

query { items([1]: 10, [2]: "cursor456") { edges { node { id name } } } }

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

Afirst

Blast

Cafter

Dbefore

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping 'first' and 'after' arguments.

Using 'last' or 'before' instead of 'first' and 'after'.

Use first to specify the number of items and after to specify the cursor after which to fetch.

5fill in blank

hard

Fill all three blanks to fetch the first 3 items after a cursor and request their id, name, and createdAt fields.

GraphQL

query { items([1]: 3, [2]: "cursor789") { edges { node { id [3] createdAt } } } }

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

Afirst

Bafter

Cname

Dlast

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'last' instead of 'first' for number of items.

Using 'before' instead of 'after' for cursor.

Omitting the 'name' field in the selection set.

Use first and after for pagination, and include name as a requested field.