GraphQL Playground

[00:00:00]
>> Scott Moss: Starting with GraphQL on the frontend, a couple things. One, you need a GraphQL server to interact with. And I'm going to put quotes there, because nowadays you actually don't even need a server, a GraphQL server, to use GraphQL on the front end. It's pretty crazy, you can actually use GraphQL on the frontend to proxy a REST API.

[00:00:20]
And as far as your frontend is concerned, it's just writing queries. So there's so many ways to interact with GraphQL without even fully diving into GraphQL, and rebuilding out your whole infrastructure. So, there's a lot of ways. We're not doing that. We already have a GraphQL server built out for us and we're gonna be using that.

[00:00:38]
You don't have to write any code, or interact with that, it's done for you. I'll just show you the command to run when we get to the exercises to start that server up. And we're gonna focus on the front end. So with that being said, let's just dive in in these slides.

[00:00:51]
So the first thing I wanna talk about is queries and mutations from the client. So if you're familiar with GraphQL on the back end, we know that when we create a schema, which is part of the server that we create, we must, at minimum, we have to create a type definition.

[00:01:08]
Well, actually, we don't even need a type definition. At minimum, we need just a query type and one field that resolves to some type of value, whether it's a scholar or a type definition, object type that you created. So that's a query on the backend, and mutations are pretty much the same.

[00:01:24]
It's a mutation type, you create some fields, they result in some values. Now queries and mutations from the client, when I talk about that, I'm not actually talking about us creating mutation types and query types on the front end. What I'm actually referring to is since we have those queries and mutations defined on the backend, we're now going to issue requests to actually execute those queries and mutations.

[00:01:48]
And that's what I mean by queries and mutations on the frontend. So it's not defining them, it's actually using them. But they're also called queries and mutations. There is a section that we might get to where you can actually define queries and mutations on the frontend. Cuz you can pretty much run GraphQL anywhere, not just the server side.

[00:02:07]
You can also run and execute GraphQL on the frontend, which is something we'll probably get to. Let's pull up GraphQL Playground. So this is GraphQL Playground. This is a tool that we use a lot to interact with GraphQL APIs. If you're familiar with GraphQL on the server side, you've probably used this to build up some APIs before.

[00:02:28]
If not, like I said, this is a tool, you can point it to any GraphQL server, and it's basically going to load up the schema for you and give you some really nice documentation and syntax to interact with that API. So right now I'm pointing it to a public Rick and Morty GraphQL API.

[00:02:43]
Actually just found this one. I think it's pretty legit. Rick and Morty's one my most favorite cartoons, can't wait for season four in November, I think. It's going to be legit. But this is a public API, so we're going to use this one to interact and show some of the capabilities as far as querying and writing mutations on the client side.

[00:03:02]
So just to give you a walk around of the playground. On the left, we have what a client would issue. So this is something from a client, this is something your React app would have or your Vue app. These are the queries and mutations that you would write.

[00:03:14]
And then on the right side here are the results from the server. And that’s basically how it goes. Down here we have this thing called query variables. So we’re going to talk about that later today. And then we have HEADERS if we need to modify some headers to send along the request.

[00:03:27]
If this API needed authentication, this is where you would probably add the authentication. Up here we have tabs where we can store state. All this gets persisted in local storage, so you can just keep track of this. Even if you refresh, your tab should still be there. Prettify cleans up your query.

[00:03:43]
If it looks like crap you can just hit Prettify and it'll clean it up for you. And then history just shows you any history as far as queries and mutations that you have already ran. And you can click on that and it'll take you to that point, and that also gets persisted in local storage.

[00:04:00]
And over here, it's just some settings to change. The themes [INAUDIBLE] which is really cool. So a lot going on in this playground app. Fun fact, this playground app is a implementation on top of something called Graphiql, a play on words using an I, Graphiql. Graph, Q, Graph, I-Q-L, Graphiql.

[00:04:21]
This was built by, I'm pretty sure this was built by the Facebook team. And GraphQL playground is basically like a version, someone forked it and built GraphQL Playground on top of this. So Graphiql is like the first thing, and people still use it, but GraphQL Playground is like a more extended version on top of it.

[00:04:38]
So they both kind of do the same thing. But you can check out Graphiql, if you're interested in that as well. We're going to stick with GraphQL Playground, because I just like the way it looks. Honestly, it just looks great. So we're going to do that. Any questions on GraphQL Playground or Graphiql, any of that stuff?

[00:04:55]
And depending on the server you use, you get this for free. You don't have to set this up. If you're using something like Apollo server on the back end or most server GraphQL frameworks have this built in. You just do a get request to your, by default you do a get request to your GraphQL server and this shows up.

[00:05:11]
That's it. Sometimes you can put it on another route, /docs, /playground, /graphiql, whatever you want. But most times you just do a get request to whatever your GraphQL server is, and it'll just render this app for you by default. So, no more swagger, let's get this. Okay, cool.

[00:05:29]
Enough talking about that, let's get in to the query.