Fragments for reusable selections in GraphQL - Time & Space Complexity
When using fragments in GraphQL, we want to understand how the time to get data changes as the data grows.
We ask: How does using fragments affect the work done when fetching repeated fields?
Analyze the time complexity of the following GraphQL query using fragments.
query GetUsers {
users {
...UserDetails
}
}
fragment UserDetails on User {
id
name
email
}
This query fetches a list of users and reuses the same set of fields for each user using a fragment.
Look for repeated actions in the query execution.
- Primary operation: Fetching the fields inside the fragment for each user.
- How many times: Once for each user in the list.
As the number of users grows, the work to fetch their details grows too.
| Input Size (n) | Approx. Operations |
|---|---|
| 10 | Fetching details for 10 users |
| 100 | Fetching details for 100 users |
| 1000 | Fetching details for 1000 users |
Pattern observation: The work grows directly with the number of users.
Time Complexity: O(n)
This means the time to get data grows in a straight line as the number of users grows.
[X] Wrong: "Using fragments makes the query run faster because it avoids repeating fields."
[OK] Correct: Fragments only help organize the query and avoid rewriting fields, but the server still fetches data for each user separately.
Understanding how repeated data fetching scales helps you explain performance in real projects and shows you know how queries behave as data grows.
What if the fragment included a nested list of posts for each user? How would the time complexity change?
Practice
fragments in GraphQL queries?Solution
Step 1: Understand what fragments do
Fragments allow you to save a group of fields so you can use them repeatedly without rewriting.Step 2: Identify the purpose in queries
This helps keep queries clean and avoids repetition by reusing the same field selections.Final Answer:
To reuse a set of fields in multiple queries or parts of a query -> Option BQuick Check:
Fragments = reusable fields [OK]
- Confusing fragments with variables
- Thinking fragments sort or filter data
- Using fragments to define mutations
UserDetails inside a query?Solution
Step 1: Recall how to use fragments in queries
To include a fragment, you use three dots followed by the fragment name without parentheses.Step 2: Match the correct syntax
...UserDetails uses...UserDetails, which is the correct way to include the fragment.Final Answer:
...UserDetails -> Option AQuick Check:
Include fragment = ...FragmentName [OK]
- Adding parentheses after fragment name
- Using 'include' keyword instead of ...
- Trying to redefine fragment inside query
fragment UserInfo on User { id name }and the query:
{ user(id: 1) { ...UserInfo email } }What fields will the query return?
Solution
Step 1: Understand fragment fields
The fragmentUserInfoincludesidandnamefields.Step 2: Combine fragment with query fields
The query requests...UserInfoplusemail, so all three fields are returned.Final Answer:
{ id, name, email } -> Option CQuick Check:
Fragment fields + extra fields = all returned [OK]
- Ignoring fields outside the fragment
- Thinking fragment replaces query fields
- Confusing fragment name with field name
fragment PostFields on Post { title content } query { posts { ...PostFields() } }Solution
Step 1: Check fragment spread syntax
Fragment spreads use three dots plus the fragment name without parentheses.Step 2: Identify the mistake
The query uses...PostFields()which incorrectly adds parentheses.Final Answer:
Fragment spread should not have parentheses -> Option AQuick Check:
Fragment spread = ...FragmentName without () [OK]
- Adding () after fragment name
- Using lowercase fragment names incorrectly
- Thinking id field is mandatory in fragments
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?
Solution
Step 1: Recall correct fragment usage inside nested fields
Fragments are included with three dots and the fragment name without parentheses or extra keywords.Step 2: Check each option
query { books { title author { ...AuthorInfo } } } correctly uses...AuthorInfoinsideauthorfield. Others have syntax errors or extra invalid parts.Final Answer:
query { books { title author { ...AuthorInfo } } } -> Option DQuick Check:
Use ...FragmentName inside nested fields [OK]
- Adding parentheses after fragment name
- Using fragment name as a field
- Adding 'on Type' inside fragment spread
Ready to prove it?
Pass the test and this pattern moves unknown
