Interface types in GraphQL - Mini Project: Build & Apply

GraphQL Interface Types Project

📖 Scenario: You are building a simple GraphQL API for a library system. The library has different types of items: books and magazines. Both share some common fields like id and title, but also have their own unique fields.

🎯 Goal: Create a GraphQL schema using interface types to define common fields for library items, then implement two types Book and Magazine that implement this interface. Finally, create a query to fetch all library items.

📋 What You'll Learn

Define an interface called LibraryItem with fields id (ID!) and title (String!)

Create a type Book that implements LibraryItem and adds a author field (String!)

Create a type Magazine that implements LibraryItem and adds an issueNumber field (Int!)

Create a query libraryItems that returns a list of LibraryItem interface

💡 Why This Matters

🌍 Real World

Interfaces in GraphQL help model real-world entities that share common features but also have unique details, like different types of library items.

💼 Career

Understanding GraphQL interfaces is important for building flexible and scalable APIs that serve diverse data types with shared structure.

1

Define the LibraryItem interface

Create a GraphQL interface called LibraryItem with two fields: id of type ID! and title of type String!.

GraphQL

# Define the LibraryItem interface with id and title fields

Hint

Use the interface keyword followed by the interface name and define the fields inside curly braces.

2

Create the Book and Magazine types implementing LibraryItem

Create a type called Book that implements LibraryItem and adds a field author of type String!. Also create a type called Magazine that implements LibraryItem and adds a field issueNumber of type Int!.

GraphQL

interface LibraryItem {
  id: ID!
  title: String!
}

# Define Book and Magazine types implementing LibraryItem

Hint

Use the type keyword with implements LibraryItem and add the extra fields inside the type.

3

Add the libraryItems query returning a list of LibraryItem

Add a Query type with a field called libraryItems that returns a list of LibraryItem interface (use square brackets and exclamation mark for non-null list).

GraphQL

interface LibraryItem {
  id: ID!
  title: String!
}

type Book implements LibraryItem {
  id: ID!
  title: String!
  author: String!
}

type Magazine implements LibraryItem {
  id: ID!
  title: String!
  issueNumber: Int!
}

# Define Query type with libraryItems field returning [LibraryItem!]!

Hint

Define a Query type with a field returning a non-null list of non-null LibraryItem.

4

Complete the schema with a union resolver placeholder

Add a placeholder comment inside the schema for resolvers to handle the LibraryItem interface type resolution (e.g., __resolveType). This completes the schema structure for interface usage.

GraphQL

interface LibraryItem {
  id: ID!
  title: String!
}

type Book implements LibraryItem {
  id: ID!
  title: String!
  author: String!
}

type Magazine implements LibraryItem {
  id: ID!
  title: String!
  issueNumber: Int!
}

type Query {
  libraryItems: [LibraryItem!]!
}

# Add a comment placeholder for interface resolver

Hint

Resolvers for interfaces need a __resolveType function to tell GraphQL which type to use.

Practice

1. What is the main purpose of an interface in GraphQL?

easy

A. To define a set of fields that multiple types must implement

B. To create a new scalar type

C. To specify a query operation

D. To define a mutation resolver

Solution

1. Step 1: Understand the role of interfaces

   Interfaces in GraphQL define common fields that multiple types share.

2. Step 2: Compare options with interface purpose

   Only To define a set of fields that multiple types must implement correctly states that interfaces define shared fields for multiple types.

3. Final Answer:

   To define a set of fields that multiple types must implement -> Option A

4. Quick Check:

   Interface = shared fields [OK]

Hint: Interfaces define shared fields for multiple types [OK]

Common Mistakes:

• Confusing interfaces with scalar types
• Thinking interfaces define queries or mutations
• Assuming interfaces can be instantiated directly

2. Which of the following is the correct syntax to declare an interface named Node with a field id of type ID!?

easy

A. interface Node { id: ID! }

B. interface Node { id: ID }

C. interface Node id: ID!

D. interface Node { id: String! }

Solution

1. Step 1: Recall GraphQL interface syntax

   Interfaces are declared with the keyword interface, followed by the name and fields with types.

2. Step 2: Check field type correctness

   The field id must be non-nullable ID!, so interface Node { id: ID! } matches exactly.

3. Final Answer:

   interface Node { id: ID! } -> Option A

4. Quick Check:

   Correct interface syntax = interface Node { id: ID! } [OK]

Hint: Use 'interface Name { field: Type! }' syntax exactly [OK]

Common Mistakes:

• Omitting the exclamation mark for non-nullable
• Using wrong scalar type like String instead of ID
• Missing braces around fields

3. Given the interface and types below, what will the query { search { id name } return?

interface SearchResult {
  id: ID!
}
type User implements SearchResult {
  id: ID!
  name: String!
}
type Product implements SearchResult {
  id: ID!
  name: String!
  price: Float!
}

medium

A. A list of objects each with fields id and name

B. A list of objects with only id fields

C. An error because price is missing in the interface

D. A syntax error because name is not in the interface

Solution

1. Step 1: Review the interface definition

   The SearchResult interface only defines id: ID!. The name field is present in implementing types but not in the interface.

2. Step 2: Analyze the query against the interface

   Querying name directly on search (SearchResult) fails because it is not defined on the interface. GraphQL requires inline fragments for type-specific fields like ... on User { name }.

3. Final Answer:

   A syntax error because name is not in the interface -> Option D

4. Quick Check:

   Directly query only interface fields; use fragments for type-specific [OK]

Hint: Query only interface fields directly; use fragments for type-specific fields [OK]

Common Mistakes:

• Assuming only interface fields can be queried
• Expecting error if extra fields exist in types
• Confusing interface fields with type-specific fields

4. Consider the following schema snippet:

interface Vehicle {
  id: ID!
  speed: Int!
}
type Car implements Vehicle {
  id: ID!
  speed: Int!
  brand: String!
}
type Bike implements Vehicle {
  id: ID!
  brand: String!
}

What is the error in this schema?

medium

A. Car type has an extra field brand not in Vehicle interface

B. Bike type is missing the required speed field from Vehicle interface

C. Vehicle interface cannot have fields of type Int

D. Interface Vehicle must be a type, not an interface

Solution

1. Step 1: Check interface field requirements

   All types implementing an interface must have all interface fields with matching types.

2. Step 2: Verify Bike type fields

   Bike implements Vehicle but lacks the speed field required by Vehicle, causing an error.

3. Final Answer:

   Bike type is missing the required speed field from Vehicle interface -> Option B

4. Quick Check:

   Implementing types must have all interface fields [OK]

Hint: Check all interface fields are implemented in each type [OK]

Common Mistakes:

• Thinking extra fields in types cause errors
• Ignoring missing interface fields in types
• Confusing interface with type declaration rules

5. You want to design a GraphQL schema where multiple types like Book and Movie share fields id and title, but each has unique fields too. How should you use interfaces to achieve this?

hard

A. Use scalar types for id and title in each type separately

B. Create a union type of Book and Movie without shared fields

C. Define an interface Item with id and title, then have Book and Movie implement Item and add their unique fields

D. Define Book and Movie as separate types without interfaces

Solution

1. Step 1: Identify shared fields and unique fields

   Both Book and Movie share id and title, but have unique fields.

2. Step 2: Use interface for shared fields

   Defining an interface Item with shared fields and implementing it in Book and Movie allows reuse and flexibility.

3. Step 3: Add unique fields in each type

   Book and Movie can add their own fields beyond the interface.

4. Final Answer:

   Define an interface Item with id and title, then have Book and Movie implement Item and add their unique fields -> Option C

5. Quick Check:

   Interfaces = shared fields + types add unique fields [OK]

Hint: Use interfaces for shared fields, types add unique fields [OK]

Common Mistakes:

• Using union types instead of interfaces for shared fields
• Duplicating shared fields in each type without interface
• Misusing scalar types for shared fields