Relay specification compliance in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Relay-compliant node interface with the correct field name.

GraphQL

interface Node { id: ID! [1] }

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

Aidentifier

BnodeId

Cid

DuniqueId

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different field name like 'nodeId' instead of 'id'.

Omitting the exclamation mark to make the ID non-nullable.

The Relay specification requires the node interface to have a field named id of type ID!.

2fill in blank

medium

Complete the code to define a Relay-compliant connection type with the correct field name for edges.

GraphQL

type UserConnection { [1]: [UserEdge] }

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

Anodes

Bresults

Citems

Dedges

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'nodes' instead of 'edges' in the connection type.

Naming the field something unrelated like 'items'.

Relay connections use the field edges to represent the list of edge objects.

3fill in blank

hard

Fix the error in the connection type by choosing the correct field name for the cursor.

GraphQL

type UserEdge { node: User cursor: [1] }

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

Acursor

Bid

Ctoken

Dposition

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' or 'token' instead of 'cursor'.

Omitting the cursor field entirely.

Relay edges must have a cursor field to support pagination.

4fill in blank

hard

Fill both blanks to define a Relay-compliant pageInfo type with correct field names.

GraphQL

type PageInfo { has[1]Page: Boolean! has[2]Page: Boolean! }

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

ANext

BPrevious

CFirst

DLast

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'First' or 'Last' instead of 'Next' and 'Previous'.

Omitting the 'has' prefix.

Relay's PageInfo type includes hasNextPage and hasPreviousPage fields to indicate pagination status.

5fill in blank

hard

Fill all three blanks to define a Relay-compliant mutation payload with correct field names.

GraphQL

type AddUserPayload { [1]: UserEdge [2]: PageInfo! [3]: String }

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

AuserEdge

BpageInfo

CclientMutationId

DuserNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'userNode' instead of 'userEdge'.

Omitting 'clientMutationId' or naming it incorrectly.

Relay mutation payloads typically include userEdge for the new edge, pageInfo for pagination info, and clientMutationId for client tracking.