Check out a free preview of the full Introduction to GraphQL course:
The "GraphQL Playground" Lesson is part of the full, Introduction to GraphQL course featured in this preview video. Here's what you'd learn in this lesson:

Scott demonstrates some of the capabilities of the GraphQL playground.

Get Unlimited Access Now

Transcript from the "GraphQL Playground" Lesson

[00:00:00]
>> Scott Moss: On the REST course, we use something called insomnia to interact with our REST API. That also supports GraphQL, and it's really good. But there's a better tool that I like to use. It's called GraphQL Playground. And luckily for us, Apollo Server has it built in for us.

[00:00:14] All we have to do is just go to our browser and type in this URL, and it'll open up a nice Playground with documentation for us. So I'm going ahead and do that. And you can see here this application just loaded up for us. So Apollo Server created this for us.

[00:00:28] I didn't make this. It's called GraphQL playground, it's really cool. There's other tools like it, call like graphical and stuff like that. But it loaded it up, it has our URL here for our API. And let's just check out a couple things here, let me bump this file so we can check it out a little more.

[00:00:45] If I click on this schema tab here, here's my schema. There's a query called myCat. And if I look at it, it resolves to a type called Cat, whose name is string. This is the only thing I can do in this API, is I can do a query for myCat.

[00:01:01] That's it, I can't do anything else because that's all I defined. So now what I do is I can is I can issue a query to try to get a cat. So over here in the left, I'm gonna go ahead and write a query. And this is what clients will do to interact with your API, they're going to write queries and mutations.

[00:01:15] So you have the server side of GraphQL which is where you create schemas and resolvers. But then you have the client side GraphQL where you issue queries. So over here, I'm gonna go ahead write a query for my cat. I'm just gonna use the shorthand method so I can just open up these object brackets like this.

[00:01:34] I can type in myCat and you can see it's already autocompleting for me and you could see, I get an error that says myCat of type cat must have a semi colon or subfield. The reason it is saying that is because the cat type is an object and you have to ask for some fields otherwise it doesn't know what to give you.

[00:01:52] And there's only one field on cat and it's called name. So it's freaking out because this returns an object so what fields do you want on it. Okay, cool, I want to get the name field. You can see it's auto completing for me right now. So we'll go ahead and get the name field here, and I'll go ahead and hit run and boom.

[00:02:09] I get back this response that says data followed by myCat and then name. So a couple things to look at here. Data, GraphQL always returns a data property, if there's data. If there's an error, it'll return an error property, but for data it always returns a data property.

[00:02:26] And then the next property's gonna be whatever the name of the query that you sent, in this case it's called myCat, so that's why this is called myCat. And then it's gonna return the fields that you asked for. In this case, I asked for the name field, so it returned the name field, Garfield.

[00:02:40] But where did it get that from? Well, If we go back to our example, it got that from our resolver. I said, whenever someone does the myCat query, always return a name called Garfield.
>> Scott Moss: So that's where that came from. So this resolver executed because I asked for this query.

[00:02:58] And I asked for this query here.