What are GraphQL fragments and why are they useful?
Learn what GraphQL fragments are, how to declare and spread them, inline fragments for unions/interfaces, and why they keep queries DRY and consistent.
Expected Interview Answer
A GraphQL fragment is a named, reusable set of fields defined on a specific type that you can spread into multiple queries, mutations, or other fragments to avoid repeating the same field selections.
Fragments are declared with the fragment keyword on a type (fragment Name on Type { fields }) and inserted with the spread syntax (...Name). They keep field selections consistent across queries and are central to how client libraries like Apollo and Relay colocate data requirements with the components that use them. Inline fragments (... on Type { fields }) additionally let you select fields conditionally based on the concrete type returned by an interface or union.
- Eliminates duplicated field selections across queries
- Keeps data requirements consistent and easy to update in one place
- Enables component-colocated data (Relay/Apollo fragment colocation)
- Handles interfaces and unions via inline fragments on concrete types
- Improves readability of large, nested queries
AI Mentor Explanation
Think of a standard player-profile card format that every match report reuses — name, batting average, bowling figures — defined once as a template. Rather than rewriting those fields in each report, reporters stamp the same card in. A GraphQL fragment is that reusable card: a named bundle of fields declared once and spread into every query that needs a player's profile, so a change to the template updates every report consistently.
Step-by-Step Explanation
Step 1
Identify repetition
Notice the same field selection appearing in several queries on the same type.
Step 2
Declare a fragment
Define it with fragment Name on Type { field1 field2 } listing the shared fields.
Step 3
Spread it
Insert the fields into a query with the spread operator: ...Name.
Step 4
Compose fragments
Fragments can spread other fragments to build up nested selections.
Step 5
Use inline fragments
For interfaces/unions, select type-specific fields with ... on ConcreteType { ... }.
What Interviewer Expects
- Correct fragment declaration and spread syntax
- Understanding fragments are typed (defined on a specific type)
- Difference between named and inline fragments
- How inline fragments handle interfaces and unions
- Awareness of fragment colocation in Relay/Apollo
Common Mistakes
- Defining a fragment on the wrong type for the fields selected
- Confusing fragment spread (...Name) with JavaScript spread
- Not knowing inline fragments are used for unions/interfaces
- Thinking fragments change what data is fetched rather than just reuse selections
- Forgetting fragments must ultimately resolve to concrete fields
Best Answer (HR Friendly)
“A GraphQL fragment is a reusable, named group of fields you can drop into many queries so you do not repeat yourself. It keeps requests consistent and lets teams update the fields a component needs in just one place.”
Code Example
fragment UserFields on User {
id
name
avatarUrl
}
query GetProfile {
me {
...UserFields
email
}
}
query GetAuthors {
authors {
...UserFields
}
}query Search {
search(term: "graphql") {
__typename
... on Article {
title
wordCount
}
... on User {
name
followers
}
}
}Follow-up Questions
- What is the difference between a named fragment and an inline fragment?
- How do inline fragments help when querying interfaces or unions?
- What does fragment colocation mean in Relay or Apollo?
- Can a fragment be defined on an interface type?
- Do fragments change what data the server fetches or just how you write the query?
MCQ Practice
1. Which syntax spreads a named fragment into a query?
The spread operator ...FragmentName inserts the fragment's fields into the selection set.
2. What are inline fragments primarily used for?
Inline fragments (... on Type) let you request type-specific fields when a field returns an interface or union.
3. A fragment must be defined on:
Fragments are typed — declared with 'on <Type>' — so their fields are valid only for that type.
Flash Cards
What is a GraphQL fragment? — A named, reusable set of fields defined on a type that you spread into queries.
Fragment spread syntax? — ...FragmentName inside a selection set.
Declaration syntax? — fragment Name on Type { field1 field2 }
What is an inline fragment? — ... on ConcreteType { fields } — selects type-specific fields for interfaces/unions.
Why use fragments? — Reuse selections, keep them consistent, and colocate data needs with components.