Fragments for reusable selections in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

What is the output of this GraphQL query using fragments?

Given the following GraphQL schema and query, what will be the result of the query?

fragment userFields on User {
  id
  name
}

query {
  users {
    ...userFields
    email
  }
}

GraphQL

fragment userFields on User {
  id
  name
}

query {
  users {
    ...userFields
    email
  }
}

A [{"id": "1", "name": "Alice", "email": "[e-mail]"}, {"id": "2", "name": "Bob", "email": "[e-mail]"}]

B [{"id": "1", "name": "Alice"}, {"id": "2", "name": "Bob"}]

C [{"email": "[e-mail]"}, {"email": "[e-mail]"}]

D SyntaxError: Fragment 'userFields' is not defined

💡 Hint

Fragments allow you to reuse fields. The query includes the fragment and adds the email field.

The fragment userFields selects id and name. The query also selects email. So each user object includes id, name, and email.

🧠 Conceptual

intermediate

Why use fragments in GraphQL queries?

What is the main benefit of using fragments in GraphQL queries?

A To speed up the server response time by caching fragments

B To automatically generate mutations from queries

C To encrypt sensitive data in the query

D To reuse sets of fields across multiple queries or parts of a query

💡 Hint

Think about how fragments help avoid repeating the same fields.

Fragments let you define a group of fields once and reuse them in many places, making queries easier to maintain and less error-prone.

📝 Syntax

advanced

Identify the syntax error in this fragment usage

Which option correctly fixes the syntax error in this GraphQL query?

fragment userFields on User {
  id
  name
}

query {
  users {
    ...userFields
    email
  }
  ...userFields
}

GraphQL

fragment userFields on User {
  id
  name
}

query {
  users {
    ...userFields
    email
  }
  ...userFields
}

A Remove the spread outside the users field; fragments can only be spread inside fields of matching type

B Change 'fragment userFields on User' to 'fragment userFields on Query'

C Add parentheses after ...userFields like ...userFields()

D Move the fragment definition inside the query block

💡 Hint

Fragments must be spread only inside fields of the correct type.

The spread ...userFields outside the users field is invalid because userFields applies to User type, not the root query type.

❓ optimization

advanced

How do fragments improve query performance?

Which statement best describes how using fragments can improve GraphQL query performance?

A Fragments automatically batch multiple queries into one request

B Fragments reduce the size of the query sent over the network by avoiding repeated fields

C Fragments enable the server to cache and reuse parsed query parts internally

D Fragments compress the response data to reduce bandwidth

💡 Hint

Think about how the server processes queries with fragments.

Fragments allow the server to parse and cache parts of the query, which can speed up query execution internally, though they do not reduce the query size sent over the network.

🔧 Debug

expert

Why does this fragment cause a runtime error?

Given this fragment and query, why does the query fail at runtime?

fragment postFields on Post {
  id
  title
  author {
    id
    name
  }
}

query {
  posts {
    ...postFields
    author {
      email
    }
  }
}

GraphQL

fragment postFields on Post {
  id
  title
  author {
    id
    name
  }
}

query {
  posts {
    ...postFields
    author {
      email
    }
  }
}

A The fragment 'postFields' is missing the 'email' field for author, causing a null pointer error

B The query tries to select 'author' fields twice with conflicting selections, causing a merge conflict error

C Fragments cannot contain nested fields, so 'author' inside the fragment is invalid

D The query is missing a required argument for 'posts', causing a validation error

💡 Hint

Consider how GraphQL merges fields with the same name but different selections.

The query selects author twice with different subfields (id, name in the fragment and email in the query). GraphQL requires these selections to be compatible, so this causes a conflict error.

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