Inline fragments in GraphQL - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an inline fragment in GraphQL?

An inline fragment lets you conditionally include fields in a query based on the type of the object. It helps when querying interfaces or unions to get fields specific to a certain type.

beginner

How do you write an inline fragment in a GraphQL query?

Use three dots followed by on TypeName inside curly braces. For example:

{ ... on User { name } }

This fetches the name field only if the object is of type User.

intermediate

Why use inline fragments instead of separate queries?

Inline fragments let you get different fields for different types in a single query. This saves time and network calls, like ordering different toppings on one pizza instead of ordering many pizzas separately.

intermediate

Can inline fragments be used with interfaces and unions?

Yes! Inline fragments are especially useful with interfaces and unions because these types can represent multiple object types. Inline fragments let you ask for fields specific to each possible type.

beginner

What happens if the inline fragment type does not match the object type?

If the object type does not match the inline fragment type, the fields inside that fragment are ignored and not included in the result. This keeps the query safe and only returns relevant data.

What symbol starts an inline fragment in GraphQL?

A ::

B ...

C --

D ##

Inline fragments start with three dots (...) followed by 'on TypeName'.

Inline fragments are most useful when querying which GraphQL types?

A Input types

B Scalars

C Enums

D Interfaces and Unions

Interfaces and unions can represent multiple types, so inline fragments help fetch fields specific to each type.

If an inline fragment's type does not match the object, what happens?

A The fields inside the fragment are ignored

B All fields are returned anyway

C The query fails

D The server returns an error

Fields inside a non-matching inline fragment are ignored, so only relevant data is returned.

Which of these is a correct inline fragment syntax?

A ... on User { name }

B ... User { name }

C on User ... { name }

D fragment User on { name }

The correct syntax is three dots, 'on', then the type name, followed by the fields in braces.

Why use inline fragments instead of separate queries?

A To avoid using variables

B Because separate queries are not allowed

C To reduce network calls and get different fields in one query

D To make queries longer

Inline fragments let you fetch fields for different types in one query, saving time and network resources.

Explain what inline fragments are and why they are useful in GraphQL queries.

Think about how you get different info for different types in one request.

Write the syntax for an inline fragment that fetches the 'title' field only if the object is of type 'Book'.

Use ... on TypeName { fields } format.

Practice

1. What is the main purpose of using inline fragments in a GraphQL query?

easy

A. To select fields conditionally based on the object type in a mixed list

B. To create new types in the schema

C. To update data on the server

D. To paginate query results

Solution

1. Step 1: Understand inline fragments usage

   Inline fragments allow querying different fields depending on the type of an object in a list or union.

2. Step 2: Identify the purpose in queries

   This lets you get specific fields for each type without separate queries.

3. Final Answer:

   To select fields conditionally based on the object type in a mixed list -> Option A

4. Quick Check:

   Inline fragments = conditional fields by type [OK]

Hint: Inline fragments pick fields by type inside mixed lists [OK]

Common Mistakes:

• Thinking inline fragments create new types
• Confusing inline fragments with mutations
• Using inline fragments for pagination

2. Which of the following is the correct syntax for an inline fragment in GraphQL?

easy

A. ... on { TypeName field1 field2 }

B. ... TypeName { field1 field2 }

C. ... TypeName on { field1 field2 }

D. ... on TypeName { field1 field2 }

Solution

1. Step 1: Recall inline fragment syntax

   The correct syntax uses three dots, then on, then the type name, followed by fields in braces.

2. Step 2: Match options to syntax

   ... on TypeName { field1 field2 } matches this exactly: ... on TypeName { field1 field2 }.

3. Final Answer:

   ... on TypeName { field1 field2 } -> Option D

4. Quick Check:

   Inline fragment syntax = '... on TypeName { fields }' [OK]

Hint: Remember: three dots + 'on' + type name + braces [OK]

Common Mistakes:

• Omitting the 'on' keyword
• Placing type name inside braces incorrectly
• Using wrong order of keywords

3. Given this GraphQL query snippet:

{
  searchItems {
    id
    ... on Book {
      author
    }
    ... on Movie {
      director
    }
  }
}

What fields will be returned for an item of type Movie?

medium

A. id and director

B. id and author

C. only director

D. only id

Solution

1. Step 1: Identify fields outside and inside fragments

   The field id is always returned for all items. For Movie type, the inline fragment selects director.

2. Step 2: Combine fields for Movie type

   So, the result for a Movie item includes id and director.

3. Final Answer:

   id and director -> Option A

4. Quick Check:

   Movie fields = id + director [OK]

Hint: Fields outside fragments always return; inside depends on type [OK]

Common Mistakes:

• Assuming author field returns for Movie
• Ignoring fields outside fragments
• Thinking only fragment fields return

4. Consider this GraphQL query:

{
  items {
    ... on Book {
      title
      author
    }
    ... on Movie {
      title
      director
    }
  }
}

What is the error in this query?

medium

A. Cannot query both Book and Movie in the same query

B. Missing closing brace for the root field

C. Fields inside fragments must be unique across fragments

D. Inline fragments cannot be used without a type condition

Solution

1. Step 1: Check query braces

   The query opens braces for items and two inline fragments but does not close the items field or the root query braces.

2. Step 2: Identify missing closing braces

   Proper GraphQL syntax requires matching closing braces for all opened braces.

3. Final Answer:

   Missing closing brace for the root field -> Option B

4. Quick Check:

   All braces must close properly [OK]

Hint: Count opening and closing braces carefully [OK]

Common Mistakes:

• Forgetting to close braces
• Thinking inline fragments need unique fields
• Believing you cannot query multiple types

5. You have a GraphQL schema with a union type SearchResult = Book | Movie | Author. You want to query a list of searchResults and get the title for Book, director for Movie, and name for Author. Which query correctly uses inline fragments to achieve this?

hard

A. { searchResults { ... { title director name } } }

B. { searchResults { title director name } }

C. { searchResults { ... on Book { title } ... on Movie { director } ... on Author { name } } }

D. { searchResults { ... on SearchResult { title director name } } }

Solution

1. Step 1: Understand union type querying

   For a union, you must use inline fragments with ... on TypeName to get fields specific to each type.

2. Step 2: Evaluate each option

   { searchResults { ... on Book { title } ... on Movie { director } ... on Author { name } } } correctly uses inline fragments for each type. { searchResults { title director name } } tries to get all fields directly, which fails. { searchResults { ... { title director name } } } has invalid syntax. { searchResults { ... on SearchResult { title director name } } } incorrectly uses the union name as a type condition.

3. Final Answer:

   { searchResults { ... on Book { title } ... on Movie { director } ... on Author { name } } } -> Option C

4. Quick Check:

   Use inline fragments per type in unions [OK]

Hint: Use '... on TypeName' for each union member [OK]

Common Mistakes:

• Querying all fields without fragments on unions
• Using union name as type condition
• Incorrect fragment syntax