Name: Using GraphQL's GraphiQL Tool
Uploaded: 2016-05-01T14:16:28-05:00
Description: We'll learn how to use GraphQL's GraphiQL tool as an IDE for writing GraphQL queries, covering how to write a query, leverage query variables, perform specific operations, and also how to use the Documentation pane to explore an existing GraphQL schema.

We'll learn how to use GraphQL's GraphiQL tool as an IDE for writing GraphQL queries, covering how to write a query, leverage query variables, perform specific operations, and also how to use the Documentation pane to explore an existing GraphQL schema.

https://app.egghead.io/api/v1/lessons/javascript-using-graphql-s-graphiql-tool/subtitles

Using GraphQL's GraphiQL Tool

[00:00] We're going to be using this project called swapi-graphql. What this is a GraphQL schema that sits around the Star Wars API. The Star Wars API is a restful API that provides us with all the Star Wars data that we ever could have wanted.

[00:18] What we're going to do is we're going to use this tool called GraphiQL to help us explore this GraphQL schema. GraphiQL is this tool put out by the GraphQL team that basically is this in-browser IDE used for exploring GraphQL schemas. We can use this panel on the left-hand side to actually write out queries or mutations.

[00:41] In this case, I'll write a query called My First Query. Then we can use the control and the spacebar combo to bring up this autocomplete pop-up menu, where we can go and choose and explore different types available to us in our schema, and actually pre-populate our query with them.

[00:59] To start off, let's just go and explore the All Films type. We can use Enter to auto-complete that. All Films returns a film connection. Let's just use the films shorthand here to go directly to the nodes that we're interested in, which are just films.

[01:15] We can use control-spacebar again, and bring up a list of all the fields available to us on the film type. For this first query, let's go ahead and just grab the ID of a film, and then also get the title.

[01:32] We can then execute this query by either clicking on this Execute Query button up at the top, and we can see the response on this right-hand side. Or you can actually use your keyboard's modifier key. In my case since I'm on a Mac it's Command, and you can use the modifier key plus Enter to also execute or run the query.

[01:52] Now that we've written our first GraphiQL query and gotten a response from the server, we may want to keep on writing additional queries to help us explore the GraphQL schema. Maybe we'll use the auto-complete pop-up menu that I showed you before. There's also an option though to use the documentation panel found on the right-hand side here.

[02:14] This documentation explorer actually provides us all of the information that we can gather from the schema using something called Introspection. We can explore the data provided to us through Introspection by going through all the types found in this type menu.

[02:30] Here I have a root query type, which is the beginning of our GraphQL schema. On this root query type we have a bunch of fields that we can explore. If we take a look at the Film field, we can see that it takes in two arguments, one is an ID. Another one is just a film ID that corresponds to its ID in the Star Wars API.

[02:52] It has the type of film. The film here is just a single film in the Star Wars universe. We can see what kind of interfaces it implements, and we can also see all the fields available to us in the same way that we see them in the Auto-Complete menu box over in the left-hand pane.

[03:11] Let's go ahead and try and write a film query using this documentation that we found for the Film field. I'll start out by closing the documentation overlay over on the right-hand side, and then start writing out our film query. It's great to see that GraphiQL's autocomplete feature also works for things like arguments inside of our queries.

[03:36] Let's just query for a film by ID. I'll just go ahead and copy the ID for A New Hope over here. Then let's just fill in the rest of the query. Here I'll grab the title of the film, maybe I'll get the director. We can also explore things like character connection, which is just all the characters in the film. Here we'll get all of the characters' names.

[04:01] We can go ahead and run this query. You can see that we get a response for a film when we parse in a specific ID argument.

[04:11] If we're used to using things like query variables, we can actually use this pane down here on the bottom to add query variables into our queries. Let's go and change this query to support a query variable.

[04:25] In this case it will be ID, which will be a type of ID. Then we'll just change our film to instead of use this custom string to use variable ID.

[04:39] The last step is to add the json inside the query variables. In this case the json is just the mapping from the query variable name to its actual value. Here we'll use ID, and then we'll paste in its value, which is just the ID of a film which in our case is A New Hope. Then if we go and execute this query, we'll get the same response.

[05:04] Finally, if we wanted to run multiple queries or operations, we can do that as well inside of GraphiQL by just appending it to the end of our query. Let's go ahead and write a query called My Second Query.

[05:19] In My Second Query we're just going to get information for all the people or characters in the Star Wars films. On the people node itself, we'll just grab the name.

[05:32] Now that we have two queries we actually need to go and click the "Execute Query" button. We'll get a drop-down for all the operations, or in our case queries, that we can execute in our GraphiQL context.

[05:45] Clicking on the highlighted query name we'll just end up running the query and you'll see the result in the right-hand pane here. You can toggle between them by using that same Execute Query button.

[05:57] If you want to quickly execute the last run query, all you have to do is use that command, or modifier key plus Enter shortcut that I was talking about earlier.

Using GraphQL's GraphiQL Tool

Share this video with your friends