Abstract type resolution in GraphQL - Step-by-Step Execution

Concept Flow - Abstract type resolution

Query with abstract type

↓

Identify abstract type (Interface/Union)

↓

Fetch possible concrete types

↓

For each result item:

↓

Determine actual concrete type

↓

Resolve fields specific to concrete type

↓

Return resolved data to client

This flow shows how GraphQL resolves abstract types by identifying the concrete type of each result and fetching the correct fields.

Execution Sample

GraphQL

query {
  search(text: "cat") {
    ... on Animal {
      name
      sound
    }
    ... on Vehicle {
      model
      wheels
    }
  }
}

This query searches for items that can be either Animal or Vehicle and requests fields based on the actual type.

Execution Table

Step	Action	Abstract Type	Concrete Type Determined	Fields Resolved	Output Data
1	Receive query with abstract type 'search'	search (Union: Animal | Vehicle)	N/A	N/A	N/A
2	Fetch results matching 'cat'	search	N/A	N/A	[Item1, Item2]
3	Check Item1 type	search	Animal	name, sound	{"name": "Cat", "sound": "Meow"}
4	Check Item2 type	search	Vehicle	model, wheels	{"model": "CatMobile", "wheels": 4}
5	Return combined results	search	Animal, Vehicle	name, sound, model, wheels	[{"name": "Cat", "sound": "Meow"}, {"model": "CatMobile", "wheels": 4}]

💡 All items resolved to concrete types and fields returned.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
results	[]	[Item1, Item2]	[Item1, Item2]	[Item1, Item2]	[Item1, Item2]
Item1_type	N/A	N/A	Animal	Animal	Animal
Item2_type	N/A	N/A	N/A	Vehicle	Vehicle
resolved_fields_Item1	N/A	N/A	{name, sound}	{name, sound}	{name, sound}
resolved_fields_Item2	N/A	N/A	N/A	{model, wheels}	{model, wheels}

Key Moments - 2 Insights

How does GraphQL know which concrete type to use for each item?

GraphQL uses the __typename field or type resolver functions to determine the actual concrete type of each item, as shown in execution_table rows 3 and 4.

Why do we need to resolve fields differently for each concrete type?

Because abstract types can represent multiple types with different fields, GraphQL must resolve only the fields valid for the concrete type, as seen in execution_table rows 3 and 4.

Visual Quiz - 3 Questions

Look at the execution_table, what concrete type is determined for Item2 at step 4?

A Animal

B Vehicle

C Unknown

D Interface

💡 Hint

Check the 'Concrete Type Determined' column at step 4 in the execution_table.

At which step does GraphQL return the combined results to the client?

A Step 2

B Step 3

C Step 5

D Step 4

💡 Hint

Look for the step where 'Return combined results' is the action in the execution_table.

If the query requested a field not present on Vehicle, what would happen during resolution?

A GraphQL returns an error for Vehicle items

B GraphQL ignores the field for Vehicle items

C GraphQL returns null for that field on Vehicle items

D GraphQL treats Vehicle as Animal

💡 Hint

Consider how GraphQL enforces field validity per concrete type as shown in the key moments.

Concept Snapshot

Abstract type resolution in GraphQL:
- Abstract types: Interface or Union
- Query requests fields on abstract type
- Server determines concrete type per item
- Resolves only fields valid for that concrete type
- Returns combined results with correct fields

Full Transcript

In GraphQL, abstract type resolution happens when a query requests data from an abstract type like an interface or union. The server fetches all matching items, then for each item, it determines the actual concrete type. Based on this type, it resolves only the fields valid for that type. Finally, it returns the combined results to the client. This ensures the client gets the correct data shape depending on the actual type of each item.

Practice

1. What is the main purpose of the __resolveType function in GraphQL when using interfaces or unions?

easy

A. To fetch data from the database

B. To validate the query syntax before execution

C. To define new scalar types

D. To determine the specific object type to return for an abstract type

Solution

1. Step 1: Understand abstract types in GraphQL

   Abstract types like interfaces or unions can represent multiple object types.

2. Step 2: Role of __resolveType

   This function tells GraphQL which concrete type to use for the returned data.

3. Final Answer:

   To determine the specific object type to return for an abstract type -> Option D

4. Quick Check:

   Abstract type resolution = determine specific type [OK]

Hint: Remember: __resolveType picks the exact type [OK]

Common Mistakes:

• Confusing __resolveType with data fetching
• Thinking it validates query syntax
• Assuming it defines scalar types

2. Which of the following is the correct way to define a __resolveType function in a GraphQL resolver object?

easy

A. resolveType(obj) { return obj.typeName; }

B. __resolveType(obj) { return obj.kind; }

C. __resolveType(obj) { return obj.__typename; }

D. __resolveType(obj) { return obj.type; }

Solution

1. Step 1: Check the naming and return value

   The function must be named exactly __resolveType and return a string matching a type name.

2. Step 2: Match the returned value to the data field

   Commonly, the field __typename holds the type name, so returning obj.__typename is correct.

3. Final Answer:

   __resolveType(obj) { return obj.__typename; } -> Option C

4. Quick Check:

   Correct function name and return field = __resolveType(obj) { return obj.__typename; } [OK]

Hint: Function must be named exactly __resolveType [OK]

Common Mistakes:

• Using wrong function name like resolveType
• Returning incorrect property like type
• Returning undefined or wrong field

3. Given this resolver snippet for a union type:

__resolveType(obj) {
  if (obj.price) return 'Book';
  if (obj.author) return 'Author';
  return null;
}

What will be the resolved type for { price: 20, author: 'John' }?

medium

A. Book

B. Author

C. null

D. Error

Solution

1. Step 1: Check conditions in order

   The function first checks if obj.price exists, which is true here.

2. Step 2: Return first matching type

   Since obj.price is true, it returns 'Book' immediately without checking further.

3. Final Answer:

   Book -> Option A

4. Quick Check:

   First true condition returns 'Book' [OK]

Hint: Check conditions top to bottom, first match wins [OK]

Common Mistakes:

• Assuming it returns 'Author' because author field exists
• Thinking it returns null if multiple fields exist
• Expecting an error for multiple matches

4. You wrote this __resolveType function:

__resolveType(obj) {
  if (obj.kind === 'User') return 'User';
  if (obj.kind === 'Admin') return 'Admin';
}

But your GraphQL query returns null for the type. What is the likely problem?

medium

A. Function name should be resolveType without underscores

B. Missing a return statement for unmatched cases

C. The kind field does not exist in obj

D. GraphQL does not support __resolveType for interfaces

Solution

1. Step 1: Check function completeness

   The function lacks a return for cases when obj.kind is neither 'User' nor 'Admin'.

2. Step 2: Understand GraphQL behavior

   If no type is returned, GraphQL resolves the type as null, causing query issues.

3. Final Answer:

   Missing a return statement for unmatched cases -> Option B

4. Quick Check:

   Always return a type or null explicitly [OK]

Hint: Always return a type or null in __resolveType [OK]

Common Mistakes:

• Using wrong function name without underscores
• Assuming missing return defaults to a type
• Believing GraphQL doesn't support __resolveType

5. You have a GraphQL interface Vehicle implemented by types Car and Bike. Your __resolveType function is:

__resolveType(obj) {
  return obj.wheels === 4 ? 'Car' : 'Bike';
}

If an object has { wheels: 0 }, what will happen when querying this interface?

hard

A. It will resolve to 'Bike' because wheels is not 4

B. It will resolve to 'Car' because 0 is falsy

C. It will cause a runtime error due to invalid wheels

D. It will return null and cause query failure

Solution

1. Step 1: Evaluate the ternary condition

   The condition checks if obj.wheels === 4. For 0, this is false.

2. Step 2: Determine returned type

   Since condition is false, it returns 'Bike'.

3. Final Answer:

   It will resolve to 'Bike' because wheels is not 4 -> Option A

4. Quick Check:

   Condition false returns 'Bike' [OK]

Hint: Check exact equality, not truthiness, in __resolveType [OK]

Common Mistakes:

• Confusing falsy 0 with true condition
• Expecting runtime error for zero wheels
• Assuming null return causes failure