Interface types in GraphQL - Step-by-Step Execution

Concept Flow - Interface types

Define Interface

↓

Implement Interface in Types

↓

Query Using Interface

↓

Return Objects Matching Interface

↓

Client Uses Interface Fields

This flow shows how a GraphQL interface is defined, implemented by types, queried, and returns objects that share the interface fields.

Execution Sample

GraphQL

interface Animal {
  id: ID!
  name: String!
}

type Dog implements Animal {
  id: ID!
  name: String!
  barkVolume: Int
}

query {
  animals {
    id
    name
  }
}

Defines an Animal interface, a Dog type implementing it, and queries animals returning id and name fields.

Execution Table

Step	Action	Evaluation	Result
1	Define interface Animal with fields id and name	Interface created	Animal interface ready
2	Define type Dog implementing Animal	Dog has id, name, barkVolume	Dog type ready
3	Query animals field returning list of Animal	Server resolves animals list	[Dog{id:1, name:'Rex', barkVolume:5}, Dog{id:2, name:'Fido', barkVolume:3}]
4	Return only interface fields id and name for each animal	Fields id and name extracted	[{id:1, name:'Rex'}, {id:2, name:'Fido'}]
5	Client receives list of animals with id and name	Query complete	Client sees animals with id and name

💡 Query completes after returning all animals with interface fields

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
animals	undefined	[Dog{id:1, name:'Rex', barkVolume:5}, Dog{id:2, name:'Fido', barkVolume:3}]	[{id:1, name:'Rex'}, {id:2, name:'Fido'}]	[{id:1, name:'Rex'}, {id:2, name:'Fido'}]

Key Moments - 2 Insights

Why does the query only return id and name fields, not barkVolume?

Because the query requests only the interface fields id and name, the server returns only those fields even though Dog has barkVolume. See execution_table step 4.

Can multiple types implement the same interface?

Yes, many types can implement the same interface. The query returns all objects matching the interface fields regardless of their specific type. This is implied in step 2 and 3.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of animals?

A undefined

B [Dog{id:1, name:'Rex', barkVolume:5}, Dog{id:2, name:'Fido', barkVolume:3}]

C [{id:1, name:'Rex'}, {id:2, name:'Fido'}]

D null

💡 Hint

Check the 'Evaluation' column at step 3 in execution_table

At which step does the server extract only the interface fields from the objects?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for the step mentioning 'Fields id and name extracted' in execution_table

If the query requested barkVolume field, what would change in the execution_table?

A Step 4 would include barkVolume in the returned fields

B Step 3 would return no animals

C Step 5 would fail

D No change

💡 Hint

Consider how requested fields affect the returned data in execution_table steps 3 and 4

Concept Snapshot

GraphQL Interface Types:
- Define interface with common fields
- Types implement interface
- Query interface to get all implementing types
- Response includes only requested interface fields
- Enables polymorphic queries

Full Transcript

This visual execution shows how GraphQL interface types work. First, an interface named Animal is defined with fields id and name. Then, a type Dog implements this interface and adds a field barkVolume. When querying animals, the server returns a list of Dog objects. However, since the query requests only id and name, the server extracts and returns only those fields for each animal. This allows clients to query multiple types through a common interface and get consistent fields. The execution table traces each step from defining the interface to returning the query result. Variable tracking shows how the animals variable changes from undefined to a list of full Dog objects, then to a list of objects with only interface fields. Key moments clarify why only interface fields are returned and that multiple types can implement the same interface. The quiz tests understanding of these steps and the effect of requested fields on the output.