Inline fragments in GraphQL - Step-by-Step Execution

Concept Flow - Inline fragments

Start Query

↓

Check Type Condition?

↓

Apply Inline Fragment

↓

Collect Fields

↓

Return Result

The query starts and checks if the current data matches the inline fragment's type condition. If yes, it applies the fragment fields; if no, it skips them, then collects all fields and returns the result.

Execution Sample

GraphQL

query {
  search(text: "apple") {
    ... on Fruit {
      color
    }
    ... on Vegetable {
      size
    }
  }
}

This query searches for items named 'apple' and returns 'color' if the item is a Fruit, or 'size' if it is a Vegetable, using inline fragments.

Execution Table

Step	Current Item Type	Check Inline Fragment Type	Match?	Action	Fields Collected
1	Fruit	Fruit	Yes	Apply fragment	color
2	Fruit	Vegetable	No	Skip fragment	color
3	Vegetable	Fruit	No	Skip fragment	[]
4	Vegetable	Vegetable	Yes	Apply fragment	size
5	Grain	Fruit	No	Skip fragment
6	Grain	Vegetable	No	Skip fragment
7	-	-	-	Return collected fields	color or size or empty

💡 All inline fragments checked for each item type; fields collected accordingly; query execution ends.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
Current Item Type	None	Fruit	Fruit	Vegetable	Vegetable	Grain
Fields Collected	[]	[color]	[color]	[]	[size]	[]

Key Moments - 2 Insights

Why does the query skip some inline fragments for certain item types?

Because inline fragments only apply if the current item's type matches the fragment's type condition, as shown in execution_table rows where 'Match?' is 'No' and action is 'Skip fragment'.

What happens if the item type does not match any inline fragment?

No fields from inline fragments are collected for that item, resulting in empty fields, as seen in execution_table rows 5 and 6.

Visual Quiz - 3 Questions

Look at the execution_table, what fields are collected when the current item type is 'Fruit'?

A size

B color

C color and size

D none

💡 Hint

Check rows 1 and 2 in execution_table where Current Item Type is 'Fruit' and see which fragment matched.

At which step does the inline fragment for 'Vegetable' get applied for a 'Vegetable' item?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at execution_table row 4 where Current Item Type is 'Vegetable' and fragment type is 'Vegetable'.

If a new item type 'Berry' is added without a matching inline fragment, what will happen to fields collected?

A Fields from Fruit fragment will be collected

B Fields from Vegetable fragment will be collected

C No fields will be collected

D All fragment fields will be collected

💡 Hint

Refer to execution_table rows 5 and 6 where no fragment matches result in empty fields.

Concept Snapshot

Inline fragments let you conditionally select fields based on the type of the data.
Syntax: ... on TypeName { fields }
If the data matches TypeName, fields inside the fragment are included.
If not, those fields are skipped.
Useful for querying interfaces or unions with different types.

Full Transcript

Inline fragments in GraphQL allow you to ask for fields only if the data is of a certain type. When the query runs, it checks each item’s type against the inline fragment’s type condition. If they match, it collects the fields inside that fragment. If not, it skips them. This way, you can write one query that works for different types of data, like Fruits and Vegetables, and get the right fields for each. The execution table shows how for each item type, the query checks fragments and collects fields accordingly. If no fragment matches, no fields from fragments are collected. This helps you get exactly the data you want depending on the type.