GraphQL Fragments

# CHAPTER 12

GraphQL Fragments #

1. Introduction #

2. Learning Objectives #

• Define what a GraphQL Fragment is.

• Understand the syntax for creating and spreading fragments in queries.

• Apply fragments to keep frontend queries DRY.

• Utilize Inline Fragments for working with interfaces or union types.

3. Beginner-Friendly Explanation #

When you plan a trip to Paris, your packing list just says: "Clothes, Camera, + *[Travel Essentials]*". When you go to Tokyo, your list says: "Business Suit, Laptop, + *[Travel Essentials]*".

A Fragment is that sticky note. It is a reusable list of fields that you can insert (or "spread") into any query that needs them, rather than typing out id, name, email, avatarUrl every single time you query a User.

4. Real-World Examples #

• UI Components: In modern frameworks like React, you build a UserProfileCard component. You define a fragment containing the exact fields that card needs. Whenever a parent component queries data, it just includes the UserProfileCard fragment, ensuring the component always gets the data it requires.

• Standardized Responses: If you have multiple mutations (e.g., updateUser, changePassword, updateAvatar), they all likely return the updated User object. Instead of writing the same 10 fields in every mutation response, you use a UserDetails fragment.

5. Detailed Code Examples #

The Problem (Repetitive Code):

query GetUserA {
  user(id: "1") {
    id
    username
    email
    profilePic
  }
}

query GetUserB {
  user(id: "2") {
    id
    username
    email
    profilePic
    role
  }
}

The Solution (Using a Fragment): We define a fragment using the fragment keyword, give it a name, and specify which Type it belongs to using the on keyword.

# 1. Define the fragment
fragment CoreUserInfo on User {
  id
  username
  email
  profilePic
}

# 2. Use (spread) the fragment in queries using three dots (...)
query GetUserA {
  user(id: "1") {
    ...CoreUserInfo
  }
}

query GetUserB {
  user(id: "2") {
    ...CoreUserInfo
    role # You can still add specific fields alongside the fragment!
  }
}

6. Mutation Examples with Fragments #

mutation UpdateEmail($id: ID!, $email: String!) {
  changeEmail(id: $id, newEmail: $email) {
    ...CoreUserInfo
  }
}

7. Inline Fragments (Advanced) #

query GetFeed {
  feedItems {
    id
    createdAt
    
    # If the item is a Photo, fetch the url
    ... on Photo {
      imageUrl
      resolution
    }
    
    # If the item is an Article, fetch the text
    ... on Article {
      headline
      content
    }
  }
}

8. Schema Requirements for Fragments #

9. Best Practices #

• Name Fragments Clearly: A fragment name should describe its purpose or the UI component it fuels, e.g., AuthorCardDetails or NavMenuUser.

• Co-locate Fragments: If you are using a component-based frontend framework (Vue/React), define the fragment in the exact same file as the component that uses it.

• Don't Over-Fragment: If a fragment is only used once, there is no need to create it. Only extract fields into a fragment if they are reused in multiple places.

10. Common Mistakes #

• Forgetting the on keyword: A fragment *must* declare what Schema Type it belongs to (e.g., fragment Details on Product).

• Spreading on the wrong type: You cannot use ...CoreUserInfo (which is on User) inside a query that returns a Product. GraphQL will throw a validation error.

11. Mini Exercises #

1. 1. What three characters are used to "spread" a fragment into a query?

1. 2. Look at this definition: fragment ItemDetails on Product { price }. What does Product represent?

12. Coding Challenges #

1. 1. Create a fragment called BookSummary on the Book type that includes title and isbn.

1. 2. Write a query called GetLibrary that fetches allBooks, and spread your BookSummary fragment inside the selection set.

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the concept of DRY code and how GraphQL Fragments help achieve it.

• Q: Where are fragments defined: on the server's Schema or by the frontend client?

• Q: What is an Inline Fragment and in what specific scenario is it used?

15. FAQs #

Q: Are fragments sent to the server? A: Yes. When the client makes the HTTP request, the fragment definitions are sent alongside the query string so the server can parse and expand them before executing.

16. Summary #

17. Next Chapter Recommendation #