GraphQL Playground in Apollo Studio

[00:00:00]
>> Scott Moss: And what we're gonna do now is we're gonna hop into the playground. So I have a link here for this Star Wars API, it's like the classic go to GraphQL thing. So click on that, join me here, it's gonna load up this app. This app is, well, actually it's gonna load this web page.

[00:00:15]
And then there's a button that says, run and explore, and that's the app. But if you read the docs here, it just kinda talks about, what is this thing that you're about to see? It's a GraphQL API, for all Star Wars movies and references and things like that, that somebody maintains.

[00:00:29]
It's read only, so you can't write to it. But the cool thing is that it's loaded up in this app right here, which is called, they've remade this thing so many times. I think it's called Apollo Studio now, used to be called graphical and it was GraphQL playground.

[00:00:44]
And now I think it's Apollo studio at RSC, I can't keep up. But this is really cool because the community can create tools like this because your GraphQL API is type check. So this tool can run an inference on your server to figure out all the possible types, all the possible queries, what is possible from this GraphQL, and then it could build tooling around it.

[00:01:04]
And that's what this app is. This app is like, if you ever use Postman or insomnia to issue HTTP requests, it's the graphical equivalent of that. This is how you would, it's like an HTTP client GUI for your graphical server. So this one is in front of the store server.

[00:01:22]
So what we're gonna do is, we're gonna play around a little bit with some of the things that we learned just so you can get a feel of it. There's two ways to interact with this. You can just come in here and write your queries from scratch, if you know what you're doing.

[00:01:32]
It is type checked, so as I start typing, you can see I get autocomplete. Again, type safety all the way down. That's the sweet thing about GraphQL. So you can do that if you're a boss but if you don't know what this API is doing, or you need to explore it a little more, you can come over here and mess around with these types.

[00:01:47]
So you can see here we have a root type called query, you don't really need to know what that means. It just means that, you can think of query as things that you can get. So you can think of these as give requests, right? So I'm gonna click on query, and then these are all the possible queries that I can do.

[00:02:01]
So I can do allFilms, allPeople, allPlanets, a specific film, a specific person, a specific planet. I'm gonna do all films. So what I can do is I can click this + button and it's gonna add it for me. As soon as I click the + button, it adds the code for me.

[00:02:17]
And then I wanna break this down a little bit about what you see right here on the right. So what you see on the right, this first part right here, this wasn't in my example in the notes. This is naming your query, this is giving your query a name.

[00:02:32]
You can you can put whatever name you want here. This part doesn't matter, it's like when you create a function. You can give your function whatever name you want, it doesn't change how it works, it's just a name, right? So this is me naming the query. It has a different purpose, but it doesn't actually change the behavior.

[00:02:50]
The actual query itself is this part, this part actually does matter because it is the name of the actual Query called AllFilms, this part here. But this part appears is, it is the difference between an anonymous function or not an anonymous function. I'm actually giving this function a name.

[00:03:09]
But this is the actual query that runs, so I have that, there's some optional arguments here. So if you wanna do some, looks like pagination, probably. I don't want any of those, I'm just gonna go straight to Fields. So these fields are the things that I wanna get back.

[00:03:26]
I'm gonna click on films, that's an array of films. And then for each film, I wanna get back, when it was created, the director. The id, the title obviously, we need to know what it is, and all the other producers for it. So once I do that, I can click this button, AllFilms, okay and after running that query, you get all the films here and as you can see they have the appropriate fields that I asked for.

[00:03:58]
So we have an id, we have a director, we have a list of producers. And I know it's a list because you can see right here it's an array of string types. It says it right here, and then we have the title of course, so we can see what the actual name of that movie is.

[00:04:14]
And then because I didn't do any other arguments, it should literally be all the films, which are just six of them, should just be six Star Wars films here. So what I wanna do now is demonstrate how arguments might work, right? So what I can do is, I can take, let's just take this id right here, this id of this movie right here.

[00:04:31]
This is for A New Hope, so I'm gonna take that. And I'm gonna go back to our operation here. And I don't want to use this query anymore. So I'm gonna go back and get a different query. So let me shrink this a little bit, there we go.

[00:04:53]
I'm gonna remove this, go back. Go back, and then I'm gonna go to just a single film. So if I click on, well, first remove that one, and then go to single film. Now I have a single film. If I look at it, you can see it takes a film ID and an ID.

[00:05:10]
They're both optional, because they don't have an exclamation mark. I'm just gonna assume that the ID that I copied from here is gonna be film, or it's gonna be the ID. So I'm just gonna select that, you can see that it added this funky syntax. I'll dive into this a lot throughout the course.

[00:05:27]
But the best way I can describe this is, I am creating a argument for a function. I'm calling it film id, and I know that because there's a $ sign in front of it, and then I'm passing that argument into this function called film, whose value is id.

[00:05:42]
So, the best way I can describe it, but again, we'll dive more into it later. And I'm just gonna get the same thing. I want a title, I want the id just to make sure it's the same. Look at the director, and then where are the producers? There we go, there are the producers.

[00:05:55]
So I can do that, and then I just need to make sure I pass in that variable down here, so it's by the same name, filmid here, is the same name as the variable up here, filmid. So I'm gonna do that, passing that id that I copied, get rid of that double string.

[00:06:12]
And if I run this, I should get back the film with that same id. It's New Hope, just like we said in the director and the producers with those same fields, right? So if I delete those two fields and run it, you can see that it also deletes those fields as well.

[00:06:25]
Yes, Mark.
>> Mark: Is your data's type system the same as the database type system or just a server type system?
>> Scott Moss: That's a great question. So the question was, is the data's type system for GraphQL the same as the database type system or is that just for the server?

[00:06:43]
That is up to you, I don't think that has anything to do with GraphQL specifically. I think that just has to do with what you wanna expose to your clients. For instance, I might have on my schema something called password, which we do in this app, but that doesn't mean I want the client to be able to query for a password.

[00:07:03]
So it's like, I won't map everything one for one, from my database schema to what I show my clients, and that's independent of GraphQL that could be with rest, that can be with anything. So I would say for the most part, your GraphQL schema does heavily follow your database schema, because most apps do, but you will have differences between them.

[00:07:27]
There are some fields that are private, some fields need to be transformed, some fields get combined, some fields get renamed. Maybe it's called some weird thing in a database, but in GraphQL you don't want it to be called that weird thing. You want it to be not snake case.

[00:07:42]
You want it to be camel case or you remap the name, so it doesn't have to but it is heavily inspired by your actual database schema, for sure. But the other thing is, GraphQL doesn't only have to talk to your database or any database. It can actually talk to any other service, it can talk to another GraphQL server, it can talk to stripe, it can talk to another API hosted anywhere.

[00:08:07]
So it's not always a database. So you won't always know the shape of something because the thing you might be getting data from is a third party source that you didn't create. So it's not always gonna be one for one, but in the case of a database, yeah, it's heavily gonna follow your schema until it doesn't.