Fragments for reusable selections in GraphQL - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a fragment in GraphQL?

A fragment is a reusable piece of a query that lets you define a set of fields once and include them in multiple queries or mutations to avoid repetition.

beginner

How do you define a fragment in GraphQL?

You define a fragment using the fragment keyword, followed by a name, the type it applies to, and the fields inside curly braces. Example:

fragment userFields on User { id name email }

beginner

How do you use a fragment inside a GraphQL query?

You include a fragment in a query by using three dots followed by the fragment name. Example:

{ user(id: 1) { ...userFields } }

intermediate

Why are fragments useful in GraphQL?

Fragments help keep queries clean and consistent by reusing field selections. They reduce errors and make it easier to update fields in many places at once.

intermediate

Can fragments be used with different types in GraphQL?

Fragments are defined for a specific type. To reuse fields across different types, you can use interfaces or unions with fragments on those types, but a fragment itself applies to one type only.

What keyword is used to define a fragment in GraphQL?

A fragment

B select

C include

D use

The fragment keyword defines reusable field selections in GraphQL.

How do you include a fragment named userFields inside a query?

A ...userFields

B ... on userFields

C ...userFields()

D ...fragment userFields

You include a fragment by writing three dots followed by the fragment name, like ...userFields.

Fragments in GraphQL help to:

A Create new types

B Reuse field selections to avoid repetition

C Define mutations

D Change the schema

Fragments let you reuse sets of fields in queries to keep them clean and consistent.

Can a fragment be used on multiple different types directly?

A Yes, but only in mutations

B Yes, fragments are universal

C Only if types share the same name

D No, a fragment applies to one specific type

Fragments are defined for one type; to share fields across types, interfaces or unions are used.

Which of the following is a correct fragment definition?

A fragment userFields { id name }

B fragment on User { id name }

C fragment userFields on User { id name }

D fragment userFields User { id name }

The correct syntax includes the fragment name, the type with 'on', and the fields inside braces.

Explain what GraphQL fragments are and how they help when writing queries.

Think about how you might copy-paste fields in many queries and how fragments solve that.

Describe the syntax to define and use a fragment in a GraphQL query.

Remember the three dots when including a fragment.

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