Renaming Fields with GraphQL Aliases

Eve Porcello
InstructorEve Porcello
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

When writing GraphQL queries, you may want to query the same field with different arguments. In this lesson, we’ll show the problem with naming collisions in GraphQL queries and how they can be solved with aliases.

To follow along with these queries, go to the Pet Library GraphQL Playground.

Instructor: [00:00] Our query is telling us how many pets are checked out, but I also want to see how many pets are available. I'm going to add the totalPets query to line two, and I'll add the statusAvailable as an argument.

[00:13] If we try to hit play on this, we're going to see some errors returned. It lets us know that fields totalPets conflict, because they but have differing arguments, and it recommends that we use different aliases on these fields.

[00:24] If I scroll down a little further, we're going to see where this is happening, line two, column three, and line three, column three. We also see this little faint hit of red, letting us know that there's some sort of a problem.

[00:36] We have a naming collision here. What we'll need to do is preface both of these queries with an alias. I can pick a new name for this field. I'll call it available and add a colon. Then I'll add checkedOut with a colon in front of that.

[00:52] I can hit play, and now, I see that available and checkedOut are returned. The query is successful, and I've renamed these fields in our JSON response. This means that I could also grab the totalPets without any filters.

[01:04] This will tell us that 25 total pets are part of the library, all bundled in the same query. Aliases can be added to any field, so I added them to top-level queries, like totalPets, before. If you wanted to add them to more nested fields, you could do so.

[01:20] I could rename the photo field with an alias called petPhoto, and this is going to rename that in the response in all cases.

egghead
egghead
~ 7 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today