Fragments for reusable selections in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a fragment named 'userFields' for selecting 'id' and 'name'.

GraphQL

fragment userFields [1] User { id name }

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

Atype

Bon

Cfragment

Dselect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'select' instead of 'on' after the fragment name.

Omitting the 'on' keyword.

Using 'type' instead of 'on'.

The keyword on is used to specify the type the fragment applies to.

2fill in blank

medium

Complete the query to use the fragment 'userFields' inside the 'users' field.

GraphQL

{ users { [1]userFields } }

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

A...

B#

C$

D@

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' or '$' instead of '...'.

Omitting the '...' before the fragment name.

To include a fragment in a selection set, use the spread operator ... followed by the fragment name.

3fill in blank

hard

Fix the error in the fragment usage by completing the code correctly.

GraphQL

query { user(id: 1) { id name [1]userFields } } fragment userFields on User { email }

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

A...

B#

C@

D$

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the '...' before the fragment name.

Using invalid symbols like '#' or '@' instead of '...'.

The fragment must be included with the spread operator ... before the fragment name.

4fill in blank

hard

Fill the blank to define and use a fragment named 'postFields' selecting 'id' and 'title'.

GraphQL

fragment [1] on Post { id title } query { posts { ...postFields } }

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

ApostField

BuserFields

CpostFields

Dpost_fields

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'userFields' instead of 'postFields'.

Mismatching fragment names.

The fragment name must be consistent. Use postFields to match the usage in the query.

5fill in blank

hard

Fill all three blanks to create a fragment 'commentFields' selecting 'id', 'text', and use it in a query for 'comments'.

GraphQL

fragment [1] on Comment { [2] [3] text } query { comments { ...commentFields } }

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

AcommentFields

Bid

CuserId

DcommentId

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect fragment names.

Selecting fields that don't exist on the type.

The fragment name is 'commentFields'. Inside the fragment, 'id' and 'userId' are fields selected along with 'text'.