“Rick and Morty” adventure in GraphQL queries
Query in GraphQL right away with the Rick and Morty API
With GraphQL’s in-browser tool, GraphiQL, we send queries to the Rick and Morty API. We explore simple fields and arguments then move to aliases and fragments.
There is no need to build a server. This article is great for a variety of GraphQL users, even if you have very little to no experience.
In Rick’s own words, “I know that new situations can be intimidating. You’re lookin’ around and it’s all scary and different, but y’know … meeting them head-on, charging into ’em like a bull — that’s how we grow as people” (Season 1 Episode 1).
Let’s get started!
Simply put, GraphQL asks for specific fields on objects. We set up those asks in GraphiQL. Open up a new browser tab and access the URL here: https://rickandmortyapi.com/graphql
First, we run a simple query for the names of characters in the show and inspect the results. Enter the following and hit the play arrow.
The alt text in each image below often contains the exact query in most cases. However, I encourage you to type the query in yourself to get a feel for how it works.
Inspecting the query results reveals a couple important pieces of GraphQL.
- We get what we expect in GraphQL. The result has the same shape as the query. In this sample, we ask the server for the results of the characters type. Specifically, we want the names of each character. The name field returns a string.
- We can interact with the above query and change it as we like to get exactly what we want. Playing around with the query reveals some important tools at our disposal.
To find out what other fields besides name that we can return from the characters results, we explore the Docs tab on the right side of the browser window. Choose characters(…) from the list of queries, then in the sidebar that opens up, select results: [Character], and finally we see our list.
Close the Docs tab. Add another field to the query. I will add species and origin. Place them right below name in our query.
We get an error because querying a character’s origin location returns a Location type, not a string. We have not asked the server which key-value pair we want to return from the location.
Feel free to explore options in the Docs tab by following the same processes as above, this time going further into the location type details.
GraphQL reinforces that we know exactly what we want when querying. Rather than being limiting, this actually opens up a lot of possibilities down the road. GraphQL is a viable REST alternative.
In this first example, I will update my origin field to request the dimension in which the location is located. Dimension returns a string.
GraphQL is an intriguing alternative to REST because it lets clients fetch lots of related data in one request, instead of in multiple round trips as within REST architecture. Let’s explore that now by querying a field that refers to an array of items.
Clear out your query and input the following to get results of each episode’s name, air date, and a list of characters featured.
In this example, the characters field again returns an array of items. Queries for both single items and lists of items look the same in GraphQL. Below the Docs tab, click the Schema tab to explore what to expect based on the indicated schema.
Looking at the schema shows us a lot of useful information that we can use to set up more complex queries.
Another useful tool is the History tab in the upper left of the browser window. Here, we have our very own time machine that lets us return to any of our previous queries. Rick would be proud! Or, maybe, just drunk and grumpy but you get the point.
Beyond data fetching, GraphQL also allows every field and nested object to get its own set of arguments. Multiple API fetches can be accomplished in our one request.
By adding an id argument of “1” to a query for character name and species, we start to see the power of GraphQL in action.
We cannot directly query for the same field without different arguments, though. Say, for example, we want to see the same results for an id argument of “2”.
For this, GraphQL provides aliases that let us rename the field’s results to anything we want. To demonstrate, I query twice for field name in character without any conflicts.
Again, the aliases (named first and last in this case) allow us to query for the same field with different arguments.
Say we want to compare Morty’s direct family. This includes mom Beth, sister Summer, and dad Jerry. In our non-existent app, we hope to look at them side by side and see which episodes they are in. This could get complicated quickly. We would be asking for the same fields over again.
GraphQL’s answer for reusable units is called a fragment. With fragments, we construct a set of fields once and use them in queries as needed. See my example below, which first establishes three aliases that query for character with an id argument.
Just below, I define the comparisonFields fragment that we implied with the ellipses.
With whatever app we build, we now have the power to make just one fetch request and get only the information we need for our complicated requirements.
We are at the end of this tutorial and hopefully you got a decent feel for the basics of GraphQL. I will be exploring schemas and will present another article sometime soon with more advanced concepts in GraphQL.
Do not forget to take a break and check out an episode of Rick and Morty. Season 4 is available for free online streaming on www.adultswim.com
Cheers.
