Fragments are the primary unit of composition in GraphQL. Fragments allow for the reuse of common repeated selections of fields, reducing duplicated text in the document. query noFragments { user(id: 4) { friends(first: 10) { id name profilePic(size: 50) } mutualFriends(first: 10) { id name profilePic(size: 50) } } } The repeated fields could be extracted into a fragment and composed by a parent fragment or operation. query withFragments { user(id: 4) { friends(first: 10) { ...friendFields } mutualFriends(first: 10) { ...friendFields } } } fragment friendFields on User { id name profilePic(size: 50) } Fragments are consumed by using the spread operator (...). All fields selected by the fragment will be added to the field selection at the same level as the fragment invocation. This happens through multiple levels of fragment spreads. For example: query withNestedFragments { user(id: 4) { friends(first: 10) { ...friendFields } mutualFriends(first: 10) { ...friendFields } } } fragment friendFields on User { id name ...standardProfilePic } fragment standardProfilePic on User { profilePic(size: 50) }

What are fragments?

Difficulty: 5/10

reusability, query composition, type safety

Fragments let you construct sets of fields, and then include them in queries where needed.

Operation Name:

1
Fragments are the primary unit of composition in GraphQL.
2
Fragments allow for the reuse of common repeated selections of fields, reducing duplicated text in the document.

if we wanted to fetch some common information about mutual friends as well as friends of some user:

Scenario Questions

0-2 years experience

1You need to fetch a user's id, name, and email in two different components. How would you use a GraphQL fragment to avoid repeating the field selections?
2If you accidentally include a field in a fragment that doesn't exist on the target type, what error does the server return and how would you fix it?
3Given a simple query that repeats address fields, rewrite it using a named fragment for the address.

Follow-up Questions

Can you walk me through a concrete fragment you wrote recently?
What are the main advantages and potential downsides of using fragments versus repeating fields?
How do fragments interact with GraphQL caching or client code generation?