Connection pattern (edges, nodes, pageInfo) in GraphQL - Step-by-Step Execution

Concept Flow - Connection pattern (edges, nodes, pageInfo)

Client requests connection

↓

Server fetches data list

↓

Wrap data in edges with cursor

↓

Extract nodes from edges

↓

Create pageInfo with cursors and hasNextPage

↓

Return connection object

↓

Client receives edges, nodes, pageInfo

The client asks for a list with pagination info; the server wraps items as edges with cursors, extracts nodes, builds pageInfo, and returns all.

Execution Sample

GraphQL

query {
  users(first: 2, after: "cursor1") {
    edges {
      cursor
      node {
        id
        name
      }
    }
    nodes {
      id
      name
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

This query asks for the first 2 users after a cursor, requesting edges with cursors and nodes, plus pageInfo.

Execution Table

Step	Action	Data State	Output Part
1	Receive query with first=2, after='cursor1'	No data fetched yet	Start processing
2	Fetch users after cursor1	Fetched users: [{id:3,name:'C'}, {id:4,name:'D'}, {id:5,name:'E'}]	Data ready for pagination
3	Select first 2 users	Selected users: [{id:3,name:'C'}, {id:4,name:'D'}]	Subset for response
4	Create edges with cursors	Edges: [{cursor:'cursor3', node:{id:3,name:'C'}}, {cursor:'cursor4', node:{id:4,name:'D'}}]	Edges array
5	Extract nodes from edges	Nodes: [{id:3,name:'C'}, {id:4,name:'D'}]	Nodes array
6	Build pageInfo	pageInfo: {hasNextPage:true, endCursor:'cursor4'}	Pagination info
7	Return connection object	Edges, Nodes, pageInfo ready	Complete response sent
8	Client receives response	Edges with cursors, nodes, pageInfo	Query result

💡 All requested data prepared and returned to client

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
fetchedUsers	[]	[{id:3,name:'C'},{id:4,name:'D'},{id:5,name:'E'}]	[{id:3,name:'C'},{id:4,name:'D'}]	[{id:3,name:'C'},{id:4,name:'D'}]	[{id:3,name:'C'},{id:4,name:'D'}]	[{id:3,name:'C'},{id:4,name:'D'}]	[{id:3,name:'C'},{id:4,name:'D'}]
edges	[]	[]	[]	[{cursor:'cursor3',node:{id:3,name:'C'}},{cursor:'cursor4',node:{id:4,name:'D'}}]	[{cursor:'cursor3',node:{id:3,name:'C'}},{cursor:'cursor4',node:{id:4,name:'D'}}]	[{cursor:'cursor3',node:{id:3,name:'C'}},{cursor:'cursor4',node:{id:4,name:'D'}}]	[{cursor:'cursor3',node:{id:3,name:'C'}},{cursor:'cursor4',node:{id:4,name:'D'}}]
nodes	[]	[]	[]	[]	[{id:3,name:'C'},{id:4,name:'D'}]	[{id:3,name:'C'},{id:4,name:'D'}]	[{id:3,name:'C'},{id:4,name:'D'}]
pageInfo	{}	{}	{}	{}	{}	{hasNextPage:true,endCursor:'cursor4'}	{hasNextPage:true,endCursor:'cursor4'}

Key Moments - 3 Insights

Why do we have both edges and nodes in the response?

Edges include cursors for pagination and the node data; nodes are just the data items. This lets clients use cursors for paging (see execution_table step 4 and 5).

What does pageInfo's hasNextPage mean?

It tells if more data exists after the current page. In step 6, we set hasNextPage true because more users remain beyond the selected ones.

Why do we use cursors instead of page numbers?

Cursors point to exact positions in data, making pagination reliable even if data changes. This is shown in step 4 where each edge has a cursor.

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what does each edge contain?

A Only the user data without cursor

B A cursor and the user data node

C Only the cursor string

D PageInfo information

💡 Hint

Check the 'Output Part' column at step 4 in execution_table

At which step does the server decide how many users to return?

A Step 3

B Step 2

C Step 5

D Step 6

💡 Hint

Look at 'Action' and 'Data State' columns in execution_table for step 3

If there were no more users after the selected ones, what would pageInfo.hasNextPage be?

A null

B true

C false

D undefined

💡 Hint

Refer to pageInfo meaning in key_moments and execution_table step 6

Concept Snapshot

Connection pattern returns paginated lists.
Data is wrapped in edges with cursors.
Nodes are extracted data items.
pageInfo shows pagination state (hasNextPage, endCursor).
Clients use cursors to fetch next pages reliably.

Full Transcript

The connection pattern in GraphQL helps clients get lists with pagination. The client sends a query asking for a number of items after a cursor. The server fetches the full list, then selects the requested slice. It wraps each item in an edge object that includes a cursor and the node data. Nodes are extracted as a simple list of data items. The server also creates pageInfo with information like whether more pages exist and the cursor of the last item. This connection object is returned to the client. The client uses edges and pageInfo to navigate pages smoothly. This pattern avoids problems with page numbers and changing data. The execution table shows each step from receiving the query, fetching data, slicing, wrapping edges, extracting nodes, building pageInfo, and returning the response. Variables track the data state at each step. Key moments clarify why edges and nodes both exist, what pageInfo means, and why cursors are used. The quiz tests understanding of edges content, when slicing happens, and pageInfo meaning. The snapshot summarizes the pattern in a few lines for quick recall.

Practice

1. What is the main purpose of the pageInfo field in the GraphQL connection pattern?

easy

A. To define the schema of the connection

B. To list all the nodes in the connection

C. To provide information about pagination like if there are more pages

D. To store the actual data items

Solution

1. Step 1: Understand the role of pageInfo

   The pageInfo field contains metadata about pagination such as whether there are more pages available.

2. Step 2: Differentiate from edges and nodes

   Unlike edges or nodes which hold data items, pageInfo only provides pagination status.

3. Final Answer:

   To provide information about pagination like if there are more pages -> Option C

4. Quick Check:

   pageInfo = pagination info [OK]

Hint: Remember pageInfo tells if more pages exist [OK]

Common Mistakes:

• Confusing pageInfo with nodes or edges
• Thinking pageInfo holds actual data items
• Ignoring pagination metadata role

2. Which of the following is the correct way to query the edges and node fields in a GraphQL connection?

easy

A. { users { edge { node { id name } } } }

B. { users { nodes { id name } } }

C. { users { pageInfo { hasNextPage } } }

D. { users { edges { node { id name } } } }

Solution

1. Step 1: Recall correct field names in connection pattern

   The connection pattern uses edges (plural) and inside each edge a node (singular) holds the data.

2. Step 2: Check each option's syntax

   { users { edges { node { id name } } } }

   correctly uses edges and node.

   { users { nodes { id name } } }

   uses nodes which is valid but not with edges.

   { users { pageInfo { hasNextPage } } }

   queries only pageInfo.

   { users { edge { node { id name } } } }

   uses edge singular which is incorrect.

3. Final Answer:

   { users { edges { node { id name } } } } -> Option D

4. Quick Check:

   edges plural, node singular inside edges [OK]

Hint: Edges is plural; node is singular inside edges [OK]

Common Mistakes:

• Using 'edge' instead of 'edges'
• Mixing nodes and edges syntax
• Querying pageInfo instead of data fields

3. Given this GraphQL query:

{ posts(first: 2) { edges { cursor node { id title } } pageInfo { hasNextPage } } }

And the server returns two posts with ids 101 and 102, what will pageInfo.hasNextPage be if there are more posts after these two?

medium

A. true

B. false

C. null

D. undefined

Solution

1. Step 1: Understand the meaning of hasNextPage

   hasNextPage is true if more items exist beyond the current page.

2. Step 2: Apply to given scenario

   Since the server returns 2 posts but more posts exist after them, hasNextPage must be true.

3. Final Answer:

   true -> Option A

4. Quick Check:

   More posts after current page means hasNextPage = true [OK]

Hint: More items after current page means hasNextPage true [OK]

Common Mistakes:

• Assuming hasNextPage is false when items equal page size
• Confusing hasNextPage with hasPreviousPage
• Expecting null or undefined instead of boolean

4. You wrote this GraphQL query:

{ comments { edge { node { id text } } } }

But it returns an error. What is the likely cause?

medium

A. The field 'node' should be 'nodes'

B. The field should be 'edges' not 'edge'

C. Missing 'pageInfo' field causes error

D. The query must include 'pageInfo' and 'nodes' together

Solution

1. Step 1: Check the connection field names

   The connection pattern uses edges (plural) not edge (singular).

2. Step 2: Identify the error cause

   Using edge causes a field not found error because the schema expects edges.

3. Final Answer:

   The field should be 'edges' not 'edge' -> Option B

4. Quick Check:

   edges plural required, edge singular causes error [OK]

Hint: Use 'edges' plural, not 'edge' singular [OK]

Common Mistakes:

• Using 'edge' instead of 'edges'
• Thinking 'node' should be plural
• Assuming pageInfo is mandatory for query success

5. You want to fetch a list of products with their IDs and names using the connection pattern. You only need the list of products without pagination info. Which query is best?

hard

A. { products { nodes { id name } } }

B. { products { edges { node { id name } } pageInfo { hasNextPage } } }

C. { products { pageInfo { hasPreviousPage } } }

D. { products { edges { cursor } } }

Solution

1. Step 1: Understand the difference between nodes and edges

   nodes gives a simple list of items without pagination details, while edges includes cursors for pagination.

2. Step 2: Choose the query matching the need

   Since pagination info is not needed, querying nodes directly is simpler and efficient.

3. Final Answer:

   { products { nodes { id name } } } -> Option A

4. Quick Check:

   Use nodes for simple list without pagination [OK]

Hint: Use nodes for simple lists without pagination [OK]

Common Mistakes:

• Using edges and pageInfo when not needed
• Querying only pageInfo without data
• Ignoring simpler nodes field for lists