Imagine you're at a party where people can be either dancers or singers. Each type of guest has unique attributes: dancers have a dance style, and singers have a favorite song. When you meet someone at the party, you might not know if they are a dancer or a singer, so you need a way to ask for their specific attributes once you know their type.
Union Types:
In GraphQL, a union type allows you to query for a field that can return different types. It's like saying, "I want to meet a guest at the party, but they could be either a dancer or a singer."
Inline Fragments:
Inline fragments let you specify fields for each possible type in the union. It's like saying, "If the guest is a dancer, ask them about their dance style. If they are a singer, ask them about their favorite song."
Example:
Let's define a GraphQL schema for our party:
In this schema:
Guest is a union type that can be either Dancer or Singer.
Dancer has fields name and danceStyle.
Singer has fields name and favoriteSong.
Query Using Inline Fragments:
When querying, you can use inline fragments to handle the different types:
Breaking Down the Query:
guests: This field can return a list of either Dancer or Singer objects.
... on Dancer { ... }: If the guest is a dancer, retrieve their name and danceStyle.
... on Singer { ... }: If the guest is a singer, retrieve their name and favoriteSong.
Analogy Example:
If you meet a guest (union type), you ask:
"Are you a dancer?" (inline fragment on Dancer)
If yes, "What's your dance style?"
"Are you a singer?" (inline fragment on Singer)
If yes, "What's your favorite song?"
By using inline fragments, you can handle each possible type within the union, ensuring you get the right information based on the specific type of the object you're dealing with.
Shaza’s Substack is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.
Share this post
Inline Fragments with Union Types in GraphQL: A Simple Explanation
Share this post
Analogy:
Imagine you're at a party where people can be either dancers or singers. Each type of guest has unique attributes: dancers have a dance style, and singers have a favorite song. When you meet someone at the party, you might not know if they are a dancer or a singer, so you need a way to ask for their specific attributes once you know their type.
Union Types:
In GraphQL, a union type allows you to query for a field that can return different types. It's like saying, "I want to meet a guest at the party, but they could be either a dancer or a singer."
Inline Fragments:
Inline fragments let you specify fields for each possible type in the union. It's like saying, "If the guest is a dancer, ask them about their dance style. If they are a singer, ask them about their favorite song."
Example:
Let's define a GraphQL schema for our party:
In this schema:
Guest
is a union type that can be eitherDancer
orSinger
.Dancer
has fieldsname
anddanceStyle
.Singer
has fieldsname
andfavoriteSong
.Query Using Inline Fragments:
When querying, you can use inline fragments to handle the different types:
Breaking Down the Query:
guests
: This field can return a list of eitherDancer
orSinger
objects.... on Dancer { ... }
: If the guest is a dancer, retrieve theirname
anddanceStyle
.... on Singer { ... }
: If the guest is a singer, retrieve theirname
andfavoriteSong
.Analogy Example:
If you meet a guest (union type), you ask:
"Are you a dancer?" (inline fragment on Dancer)
If yes, "What's your dance style?"
"Are you a singer?" (inline fragment on Singer)
If yes, "What's your favorite song?"
By using inline fragments, you can handle each possible type within the union, ensuring you get the right information based on the specific type of the object you're dealing with.
Shaza’s Substack is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.