This course has been updated! We now recommend you take the Advanced GraphQL, v2 course.
Transcript from the "GraphQL Recap: Schema Definitions" Lesson
[00:00:00]
>> Scott Moss: So we're gonna write our GraphQL queries in a GraphQL file because it's the best practice. People used to do it in JavaScript, they no longer do that unless you're doing advanced things. So we're going to take advantage of a graphQL file here. And the first thing you need to do is you need to make a type.
[00:00:15] So I'm going to make a typed called person and again, that type is basically like a custom shape that describes fields and what types of data those fields have. So I'm gonna make a custom type called person with a field called name, and the custom type of that field is gonna be a string.
[00:00:33] And then I put this exclamation at the end, which means that whenever I'm resolving a person type, its name is always gonna be there. And if it's not, I want GraphQL to error out. If I get rid of that it's just like, it might be there, it might not be there.
[00:00:49] It's basically null or not null. Just putting this exclamation means name can never be null. There has to be something there, otherwise GraphQL, I need you to freak out. So that's like the strong type safety we get from GraphQL, so that's the first thing that we're going to do.
[00:01:04] And then now, I need to expose a way to actually access this person type, so there's two things I have to do. One, I need to create a query so I can actually query for this, and then two, I need to resolve that query. So to create the query, I'm going to make a new type here and I'm gonna call it Query.
[00:01:24]
>> Scott Moss: And then for that, I need to actually add a field on this Query type. And this could be whatever I want. I'm actually just gonna call it onePerson.
>> Scott Moss: And the sweet thing about GraphQL is that, you can actually define arguments for fields, that will be passed on to your resolvers to help you resolve those types.
[00:01:47] So for this onePerson field on the Query type, I'm going to say that I need an ID as an argument, so that I know what person you're trying to access. And I'm going to say that's typeID. Type ID is a type that built in the GraphQL but it's basically just a string.
[00:02:03] But we use it to identify that this is a unique identifier, but at the end of the day, it's really just treated as a string. So I'm gonna say this one person field takes an argument by the name of ID whose type is a non-null ID. And it returns the type of person that is non-null.
[00:02:25] So what this is saying is I'm making a type called Query that has a field on it called onePerson, who takes an argument of the name id whose type is ID, and it returns a type of Person. That's what this is saying. And this is like the super basic, all we need to get started to actually start writing a resolver.
[00:02:46] Any questions on this, I move really fast on this, but I just want to put it out there so we can get going to the good stuff.
>> Scott Moss: Nope, everybody's good here? And by the way, you do not need to follow along with this, this is just me showing you all.
[00:03:01] You're gonna have an exercise after this. So if you're like, I'm trying to keep up, don't worry about it. This is for me to show you, you don't have to follow along on this part unless you want to, go ahead for sure.
>> Scott Moss: All right, the next thing we need to do is, we need to create some resolvers.
[00:03:15] So I'm gonna keep this open on this side, then I'm gonna need to open up the resolvers over here. This is where it can get kinda tricky, depending on the framework you're using. So we're using graphql-yoga, which is based off of Apollo GraphQL, or whatever their package name is called.
[00:03:31] And the way that you export resolvers with them is, I think it's really intuitive, but I remember when i was first learning it was kind of confusing, so it can be a learning curve here. But basically, you're gonna just export an object whose keys match the types that you're trying to resolve.
[00:03:48] So if we go back and look at this graph here I have two types. I have a type called Person and I have a type called Query. Each one of those types have their own field. Person has a name field. Query has a onePerson field. So each key needs to be a type in a GraphQL file, then I have two types.
[00:04:05] So I'm just gonna resolve the query type here. That's a key, and it's an object. And then inside this object, I can then write a method that's gonna match the equivalent field on the type, in the GraphQL file. So in this query right here, I have a field called onePerson.
[00:04:22] If I want to resolve that onePerson, I give it the exact same name, it's a method. And now whatever this onePerson method returns, it needs to be the shape of whatever is described here. Does that make sense? So, it's a complete match. So I have a Query, which is a type and I'm trying to resolve the onePerson field on the Query.
[00:04:44] So whatever I return here has to match the exact shape of whatever the return value is here, which is basically an object with a name property. So let's do that. I'm just gonna return an object with a name property, and I'm gonna say, I'm just gonna put a name there.
[00:05:01] Everybody following me here?
>> Scott Moss: All right. And then the next thing is, if we go to server.js, I already got all this stuff hooked up. Again, you don't have access to this repo, this is not the same repo you have. This is something that I made just for this example.
[00:05:14] And I could just walk through what's happening here. But basically, because you cannot require a GraphQL file in node natively, because it's a GraphQL file. I have to use a file system to require it, so that's where the file system's coming in. I'm reading the GraphQL file from disk using the FS module.
[00:05:35] And then once I have that, I'm gonna also grab the resolvers, and then at that point, it's just doing whatever this framework wants you to do. Which it just needs those GraphQL files, in this case it's just one, and your resolvers, and then you just start the server.
[00:05:49] You pass at a few options like this, and you're good to go. So we're gonna start the server on port 4000. And we're just going to check it out. Let me bump that up. Actually, I was going to go to another terminal window for this one. There we go, and node server.js.
[00:06:10] So port 4000, I'm gonna go over to a new tab here. And actually let's hit back, so if you notice I have this thing called playground and I put /docs, that's gonna come in handy because now I can come to localhost:4000/docs. And it loads up this GraphQL Playground which is basically a documentation for this GraphQL API that I just made.
[00:06:41] I didn't have to make this, this was free. This was totally free. So now, if I click on schema on the right here, you'll see our schema. Look, we have a Query called onePerson and it returns a type of Person. So if I click on this, it will show me what the shape of the person looks like.
[00:06:56] So now, I can actually run that and I'm just gonna say onePerson. It takes an ID but I don't have one right, so I'm just not gonna pass it. I'm just gonna run that, and we get an error because I actually have to pass something in. I'm just gonna make up something, there we go.
[00:07:13] And there we go. And that's how we create our first resolver with GraphQL. Any questions on any of this stuff? Playground, the server, yes?
>> Speaker 2: Do you know what library is this playground? I'm familiar with graphical, but this is a little different and it looks a little bit more full feature.
[00:07:36]
>> Scott Moss: Yeah, basically so Prisma, or it used to be GraphCool, what they did was they took Graphical and then they just added all this stuff on top of it. This is basically Graphical at the end of the day with all the cool stuff that Prisma did. So just a tour of this app, some of the different things that you can do that Graphical couldn't do is that, you have tabs here that keep track of state.
[00:07:56] So that it saves us in local stores, so even if you refresh, it's still here. They have this tracing capability here which is really cool. Tracing basically, if you enable it on your server, your Graphical server, it'll allow you to see how long each resolver takes. It'll show you the overall request, and then how long each resolver took, so you can figure out how to speed things up.
[00:08:20] So that's really cool for production, and trying to speed things up like that. And I'd say the biggest feature is this Share Playground ability, which I've never used. But if you click on this button, it loads up a public URL of this instance, so you can share to coworkers.
[00:08:34] So I think that can be kind of dangerous but at the same time useful. So, yeah. So that's some of the biggest features, and then they iterated on this stuff on here on the side. You can search for it and what not, and okay, they build this for HTTP headers.
[00:08:47] I don't think that was in Graphical either, so they added that. But everything else is pretty much the same and there's tons of apps that do a lot of this stuff. This is just one of my favorite ones. It's called GraphQL Playground. They have a desktop app too.
[00:09:01] I highly recommend checking that out. Any other questions on this stuff?