Connection pattern (edges, nodes, pageInfo) in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What does this GraphQL query return?

Given this GraphQL query using the connection pattern, what is the structure of the returned data?

{
  users(first: 2) {
    edges {
      node {
        id
        name
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

A {"users":{"nodes":[{"id":"1","name":"Alice"},{"id":"2","name":"Bob"}],"pageInfo":{"hasNextPage":true,"endCursor":"cursor2"}}}

B {"users":{"edges":[{"node":{"id":"1","name":"Alice"}},{"node":{"id":"2","name":"Bob"}}],"pageInfo":{"hasNextPage":true,"endCursor":"cursor2"}}}

C {"users":[{"id":"1","name":"Alice"},{"id":"2","name":"Bob"}],"pageInfo":{"hasNextPage":true,"endCursor":"cursor2"}}

D {"users":{"edges":[{"id":"1","name":"Alice"},{"id":"2","name":"Bob"}],"pageInfo":{"hasNextPage":true,"endCursor":"cursor2"}}}

💡 Hint

Remember the connection pattern returns edges containing node objects, not just nodes directly.

The connection pattern wraps each item inside an edges array, where each edge contains a node object. The pageInfo provides pagination details.

🧠 Conceptual

intermediate

Why use edges and nodes in the connection pattern?

What is the main reason the connection pattern uses edges wrapping nodes instead of returning a simple list of nodes?

A To make the query syntax simpler and shorter.

B To reduce the size of the response by nesting nodes inside edges.

C Because GraphQL requires all lists to be wrapped in edges.

D To allow adding metadata like cursors or relationship info on each edge besides the node data.

💡 Hint

Think about what extra information might be needed for pagination or relationships.

Edges allow attaching extra data like cursors or relationship properties to each connection, which is not possible with a plain list of nodes.

📝 Syntax

advanced

Identify the syntax error in this connection pattern query

Which option contains a syntax error in this GraphQL connection pattern query?

{
  posts(first: 3) {
    edges {
      node {
        id
        title
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

A { posts(first: 3) { edges { node { id title } } pageInfo { hasNextPage endCursor } }

B { posts(first: 3) { edges { node { id title } } pageInfo { hasNextPage endCursor } } }

C } } } rosruCdne egaPtxeNsah { ofnIegap } } eltit di { edon { segde { )3 :tsrif(stsop {

D posts(first: 3) { edges { node { id title } } pageInfo { hasNextPage endCursor } } }

💡 Hint

Check for matching braces in the query.

Option A is missing the closing brace for the root query, causing a syntax error.

❓ optimization

advanced

Optimizing pagination with pageInfo

You want to fetch the next page of users after a cursor. Which query correctly uses pageInfo and after to get the next page?

A { users(first: 5, after: "cursor5") { edges { node { id name } } pageInfo { hasNextPage endCursor } } }

B { users(last: 5, before: "cursor5") { edges { node { id name } } pageInfo { hasNextPage endCursor } } }

C { users(first: 5) { edges { node { id name } } pageInfo { hasNextPage endCursor } } }

D { users(after: "cursor5") { edges { node { id name } } pageInfo { hasNextPage endCursor } } }

💡 Hint

To get the next page, use first with after cursor.

Option A correctly uses first with after cursor to fetch the next page. Option A uses last and before which fetches previous pages. Option A misses first argument.

🔧 Debug

expert

Why does this connection query return an empty edges array?

Given this query:

{
  comments(first: 3, after: "cursor10") {
    edges {
      node {
        id
        content
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

But the edges array is empty in the response, even though there are comments after cursor10. What is the most likely cause?

A The <code>first</code> argument must be larger than 3 to get results.

B The query is missing the <code>nodes</code> field, so edges are empty.

C The cursor "cursor10" is invalid or does not exist in the data, so no results are returned after it.

D The server does not support the connection pattern and returns empty edges.

💡 Hint

Think about what happens if the cursor is not found in the dataset.

If the cursor provided in after does not match any item, the server returns no results after it, resulting in empty edges.