Server-Side GraphQL in Node.js GraphQL Server

[00:00:40]
>> Scott Moss: Type definitions, you can use a .GraphQL file, you can put them in the stream. If you wanna use a file server side you have to like set that up, use the file system, read it, do all that stuff. I don't feel like doing all of that. So we're just gonna use what's called a GraphQL template tag.

[00:00:54] So I'm just gonna say gql equals and you're gonna have this package called GraphQL-tag. [SOUND] And I'm just going to make some typedefs here. And who's here has used template tags and JavaScript? It kind of looks like this. Right okay yeah. So that's what we're doing. Basically what this is gonna do is going to take whatever we put in this string, and it's going to compile it into an AST graph QST that can be understood by the server.

[00:01:24] That's basically what it's doing, it allows us to do it in a declarative way. And if you have like a plugin and VS code or whatever editor you're using, you'll get some nice syntax highlighting too. So the first thing is we need to create some types. So to create a type, use the type keyword.

[00:01:40] You then give it a name. Let's just call this a user. All API's have users. So we'll make a type called user. And then you notice this kind of looks like JavaScript here or Java or any C based language with these brackets here. And then we can just start adding some fields.

[00:01:55] So I'll say user has an email and this is where you would use the scholars that I talked about. So GraphQL has some built in scholars. The main one that you'll use the most is probably gonna be string. So I'm gonna say type user has an email field and it expects that email field to be a string.

[00:02:14] I can also say this user has a avatar, which is also a string. And let's say in our database that a user always has an email, which they should, and they always have an avatar because maybe you set a default one. So you should let your graphical API to know that hey, these are non no, these will always be here and the way you can do that is using the exclamation mark.

[00:02:38] And by doing this, you're telling GraphQL that the email field on the user is expected to always have a value. If it doesn't, then GraphQL is gonna break because it's a strong read type language. It's not going to allow a query to complete if that condition is not satisfied.

[00:02:55] So if you were to return a no for an email field on a user then GraphQL would just break. It will literally tell you there is a no value here so I'm not gonna complete what you want me to do. Same thing that avatar if I were to do that.

[00:03:11] So we got that, let's also say a user has friends. This is a social network. And the way we can handle this is we can use the array syntax here just like in JavaScript. And we can say, friends are an array of users. It's that simple. And if I wanted the friends to always be an array, I can put exclamation there.

[00:03:34] This would say a user has friends, that's an array and the array itself not the not the items in the array but the actual array should be non no as in there should always be an array there. But if I also want to say that that array should always have users in it as well then I can put an exclamation mark inside of it like that.

[00:03:50] And this would say a user has friends. And the friends is always an array, and that array always has something in it. So you can get pretty crazy with it. And again, if these conditions aren't satisfied, GraphQL will break during a query or during a mutation. And we'll get to the point where how do you satisfy these things?

[00:04:10] And that's where resolvers come in. Cool, so we have a type. The next thing is what we can do, and again, and again there's more scholars here. So we talked about string, but we also have things like ints, which for integer, float for decimal based numbers. We have boolean for obviously a boolean, and then you have ID, which is basically a string, but meant to be used as a unique identifier.

[00:04:37] But it's basically a string. And those are the built in scholars in GraphQL and you can get to the point where you can make your own custom scholars. We're not going to do that today. But you can. You can make your own custom scholar to do whatever you want.

[00:04:49] I mean, one of the biggest hacks that people do in the graphical community is they make a JSON scholar to get around the strongly typed nature of GraphQL. So I was like, I'll just add a JSON field here. I was like. What's the point of GraphQL if you just add a JSON field.

[00:05:02] So it's a big hack. I used it before, so that's how I know. [LAUGH] Okay, so now that we have our user type. We now need to at minimum a schema needs a query. So you can make a type. But if you don't need a query, then how is someone gonna access it?

[00:05:19] You need to describe how a client can access this type. And that's what a query is for. So at minimum, a schema always needs a query. You don't need a mutation, but you also you'll always need a query so to do that we'll just say type query. And by default, that's what GraphQL is expecting, if you were to call this something else and expect this to be the query, then you would have to tell GraphQL when you set up the server, that the query type is now called something.

[00:05:49] I don't recommend doing that. I always recommend just calling it query. By default, it's looking for a type called query to be the query type. So I don't recommend deviating from that. You're just gonna confuse everyone at your company. They're not gonna know what you're doing. So just call it query.

[00:06:05] And the query type is no different than a user type. It has fields that resolved to values. The only difference with this is, for instance, let's say I wanted to get myself so I'll make a query called me. Maybe instead of returning a scholar here, like a string, I don't want to do that actually want to return a user.

[00:06:25] So now I can, I can say that the type query has a field called me. And it's value is expected to be a non null user. And we know that a user has the email avatar to friends. So therefore this query should be like an object with these fields on it.

[00:06:40] That will always be there. So that's what this is saying. So now I created a query, I have a type, this is the basic stuff that I need. All I have to do now is write some resolvers and create a server. So resolvers, there's a whole section of resolvers that we're going to go over later.

[00:06:58] So if you have questions, you need to save them for that or you can ask me now, but I'm not going to go too deep in resolvers, other than just making some to satisfy this query. So if I were going to make some resolvers here so it's gonna be an object.

[00:07:10] The way resolvers work is you have to name them the same as they are in your type definitions. So I have to make a resolver for the query type for the me field. So resolvers query me and resolvers are just gonna be a function. Like I said we're gonna talk more about it; I'm not gonna talk about the arguments till I get past here just yet.

[00:07:30] But what we're gonna do is this, this resolver it's job is literally just to return something that looks like this. And what does the user look like, it has email, avatar and a friend. So that's what we're gonna do. We're just gonna hearts code, an object here that has an email.

[00:07:49]
>> Scott Moss: And we have an avatar.
>> Scott Moss: And then we have some friends that also I'm gonna get rid of that excavation there. I don't feel like an adding object, but a friend is an array. Cool so now we have our resolvers. Yes, question.
>> Speaker 2: You named the part that's supposed to be friend?

[00:08:14]
>> Scott Moss: Sorry. Yes, thank you. Apollo server. And this is going to take a few things. One is going to take the type definitions, which I believe is just typed def the same way that I have it here. Then it's going to take some resolvers, which is spelled the same that I have it here.

[00:08:36] And once we have that, we can just say server.listen, and I can give it a port. I'm just gonna say 4000, and I believe this is a promise. So, I'll just say, console.log on port 4000.
>> Scott Moss: So this should be all we need to create a GraphQL. Sorry, if you're just looking at it, I mean this only 34 lines of codes.

[00:09:05] This is one of the most simplest servers I ever had to create. I think this is even more simpler than Express, in my opinion. Pretty simple, very declarative. If you were looking at an Express server, you wouldn't know what data it exposed by looking at the route definitions.

[00:09:20] You'd have to go to another file, go look at the database models, go look at the schemas. So you have to do a lot of stuff to figure out, but just by looking here, I know exactly what my API is capable of doing. Cool so if I run this, let's see what happens?

[00:09:35] So I can say node api/demo.js, okay? ApolloServers now it's okay. It's I think it is named important like that, let's check that out. Yeah, there we go. Okay, so it says we're on port 4000 and this is where you're about to see something really cool if you never seen GraphQL before.

[00:10:05] So I go to 4000. So this is called graphical playground GraphQL Playground is one of many tools that allow you to explore a GraphQL API. And because you are on a strongly typed system like GraphQL, you get really cool stuff like this like automated generated documentation. So you can see when I click on docs it shows me all the queries that my API is capable of doing which is only one at this point, it's called me.

[00:10:31] And it returns a user. I can also click on the schema and see the entire schema. You'll see some stuff that I didn't create in here and that's because this is what Apollo's doing Apollo's adding, like this. A brand new scholar called upload. It's adding a something called a directive called cache control is doing all that stuff for you.

[00:10:49] So this is why you would use a server and not do it yourself. But yeah, you get that for free. So now that we have that, what we can do is we can just run a query. And don't worry too much about queries right now. We're gonna talk about that later.

[00:11:01] But this is how you would execute a query. So I wanted to run the me query, pull that up, run the me query, and I wanted to get my email. I can do that. And you can see, I get a response back that's exactly the same. That's GraphQL in a nutshell.

[00:11:20] This is just the complete overview of how you would go from nothing to something in two minutes. So now the whole point of this course is we're gonna be covering how all of this works in detail from the front end and the back end. I just wanted to demystify how simple it is to actually make a server and if you don't know what the hell is going on.

[00:11:35]
>> Speaker 3: Yeah, I was curious as to why you didn't need to put commas in your type desk for user when you have comments and other places that look like objects.
>> Scott Moss: You use JavaScript a lot, don't you?
>> Speaker 3: I do.
>> Scott Moss: Yeah, [LAUGH] I did the same thing when I was learning JavaScript.

[00:11:48] I was like, wait, you got to put commas here? No, it's not JavaScript, it just looks like it. Just like, have you ever used TypeScript before?
>> [INAUDIBLE]
>> Scott Moss: Yeah, so in TypeScript I think you don't have to put commas after the fields if you make a type in TypeScript.

[00:12:02] So it's basically the same thing. It's object like but it's not an object. This is not JavaScript like you can run this and it would not execute, it will definitely fail. So there are no commas here. In fact I think if you put a comma here, it just ignores it.

[00:12:19] So it's not that you can't it just doesn't matter. So I think they did that for JavaScript developers who put commas there. But you would never see, you will never see someone put commas in their graphical schema. I've never seen it before so.