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'.

Practice

1. What is the main purpose of using fragments in GraphQL queries?

easy

A. To define variables for queries

B. To reuse a set of fields in multiple queries or parts of a query

C. To create mutations for updating data

D. To sort the results of a query

Solution

1. Step 1: Understand what fragments do

   Fragments allow you to save a group of fields so you can use them repeatedly without rewriting.

2. Step 2: Identify the purpose in queries

   This helps keep queries clean and avoids repetition by reusing the same field selections.

3. Final Answer:

   To reuse a set of fields in multiple queries or parts of a query -> Option B

4. Quick Check:

   Fragments = reusable fields [OK]

Hint: Fragments save repeated fields for reuse in queries [OK]

Common Mistakes:

• Confusing fragments with variables
• Thinking fragments sort or filter data
• Using fragments to define mutations

2. Which of the following is the correct syntax to include a fragment named UserDetails inside a query?

easy

A. ...UserDetails

B. fragment UserDetails {...}

C. ...UserDetails()

D. include UserDetails

Solution

1. Step 1: Recall how to use fragments in queries

   To include a fragment, you use three dots followed by the fragment name without parentheses.

2. Step 2: Match the correct syntax

   ...UserDetails uses ...UserDetails, which is the correct way to include the fragment.

3. Final Answer:

   ...UserDetails -> Option A

4. Quick Check:

   Include fragment = ...FragmentName [OK]

Hint: Use three dots plus fragment name to include it [OK]

Common Mistakes:

• Adding parentheses after fragment name
• Using 'include' keyword instead of ...
• Trying to redefine fragment inside query

3. Given the fragment definition:

fragment UserInfo on User { id name }

and the query:

{ user(id: 1) { ...UserInfo email } }

What fields will the query return?

medium

A. { id, email }

B. { id, name }

C. { id, name, email }

D. { email }

Solution

1. Step 1: Understand fragment fields

   The fragment UserInfo includes id and name fields.

2. Step 2: Combine fragment with query fields

   The query requests ...UserInfo plus email, so all three fields are returned.

3. Final Answer:

   { id, name, email } -> Option C

4. Quick Check:

   Fragment fields + extra fields = all returned [OK]

Hint: Fragment fields merge with query fields in results [OK]

Common Mistakes:

• Ignoring fields outside the fragment
• Thinking fragment replaces query fields
• Confusing fragment name with field name

4. Identify the error in this GraphQL query using a fragment:

fragment PostFields on Post { title content } query { posts { ...PostFields() } }

medium

A. Fragment spread should not have parentheses

B. Fragments cannot be used inside queries

C. Fragment name must be lowercase

D. Fragment must include an id field

Solution

1. Step 1: Check fragment spread syntax

   Fragment spreads use three dots plus the fragment name without parentheses.

2. Step 2: Identify the mistake

   The query uses ...PostFields() which incorrectly adds parentheses.

3. Final Answer:

   Fragment spread should not have parentheses -> Option A

4. Quick Check:

   Fragment spread = ...FragmentName without () [OK]

Hint: Do not add parentheses when spreading fragments [OK]

Common Mistakes:

• Adding () after fragment name
• Using lowercase fragment names incorrectly
• Thinking id field is mandatory in fragments

5. You want to fetch a list of books with their title and author details (name and email). You have a fragment:

fragment AuthorInfo on Author { name email }

Which query correctly uses this fragment to get books with author info?

hard

A. query { books { title author { ...AuthorInfo() } } }

B. query { books { title author { AuthorInfo } } }

C. query { books { title author { ...AuthorInfo on Author } } }

D. query { books { title author { ...AuthorInfo } } }

Solution

1. Step 1: Recall correct fragment usage inside nested fields

   Fragments are included with three dots and the fragment name without parentheses or extra keywords.

2. Step 2: Check each option

   query { books { title author { ...AuthorInfo } } } correctly uses ...AuthorInfo inside author field. Others have syntax errors or extra invalid parts.

3. Final Answer:

   query { books { title author { ...AuthorInfo } } } -> Option D

4. Quick Check:

   Use ...FragmentName inside nested fields [OK]

Hint: Use ...FragmentName exactly inside nested fields [OK]

Common Mistakes:

• Adding parentheses after fragment name
• Using fragment name as a field
• Adding 'on Type' inside fragment spread