Fragments for reusable selections in GraphQL - Mini Project: Build & Apply

Using GraphQL Fragments for Reusable Selections

📖 Scenario: You are building a simple GraphQL query to fetch user information from a social media app. You want to reuse parts of the query to avoid repeating the same fields multiple times.

🎯 Goal: Create a GraphQL fragment named UserInfo that selects the id, name, and email fields from a User type. Then use this fragment in two queries: one to get the current logged-in user and another to get a list of friends.

📋 What You'll Learn

Create a fragment called UserInfo selecting id, name, and email from User.

Write a query called GetCurrentUser that uses the UserInfo fragment to fetch the current user.

Write a query called GetFriends that uses the UserInfo fragment to fetch a list of friends.

💡 Why This Matters

🌍 Real World

In real apps, GraphQL fragments help you avoid repeating the same field lists in many queries, making your code easier to read and update.

💼 Career

Knowing how to use fragments is important for frontend and backend developers working with GraphQL APIs to write efficient and maintainable queries.

1

Create the UserInfo fragment

Write a GraphQL fragment named UserInfo on the User type that selects the fields id, name, and email.

GraphQL

# Your code here

Hint

Use the fragment keyword followed by the fragment name, the on keyword, and the type name. Then list the fields inside curly braces.

2

Write the GetCurrentUser query using the fragment

Write a GraphQL query named GetCurrentUser that fetches the currentUser field and uses the UserInfo fragment to select its fields.

GraphQL

fragment UserInfo on User {
  id
  name
  email
}

# Your code here

Hint

Use the query keyword with the query name, then select currentUser and spread the fragment inside it with ...UserInfo.

3

Write the GetFriends query using the fragment

Write a GraphQL query named GetFriends that fetches the friends field (a list of users) and uses the UserInfo fragment to select each friend's fields.

GraphQL

fragment UserInfo on User {
  id
  name
  email
}

query GetCurrentUser {
  currentUser {
    ...UserInfo
  }
}

# Your code here

Hint

Similar to the previous query, use query GetFriends, select friends, and spread the fragment ...UserInfo inside.

4

Complete the GraphQL document with both queries and the fragment

Ensure the GraphQL document includes the UserInfo fragment, the GetCurrentUser query, and the GetFriends query all together.

GraphQL

fragment UserInfo on User {
  id
  name
  email
}

query GetCurrentUser {
  currentUser {
    ...UserInfo
  }
}

query GetFriends {
  friends {
    ...UserInfo
  }
}

# Your code here

Hint

Make sure all parts are included in the same document so you can reuse the fragment in both queries.

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