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.

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