Introduction to Union Types

So far, we have looked at two queries that return consistent data types. Both the books and booksWithTitle fields return an array of Book objects. But how do we make our client support cases where a GraphQL field could potentially return different types of objects for the same query? Union types help us solve this problem.

What is a union type?

In this lesson, we will look at how to conditionally render a UserProfile component, depending on the type of data that is returned from our GraphQL API. Let’s start by looking at a query that can return either one type or another. In GraphQL, these are referred to as union types.

Let’s take a look at an example of a union type from our GraphQL server API we have been using for our Books application: