Configuring the API Server

[00:00:00]
>> Scott: Let's get into the actual app, we're just gonna be cruising through it. We're gonna make it work now that we know all the tools so follow along. We're gonna get this app to work. We're gonna start with authentication. We're gonna talk about that and how it works, and we're gonna implement it and get it going.

[00:00:14]
First thing is we need to create our API, and then, what you should do is checkout to server/0.
>> Scott: If you have any commits, make sure you commit them or stash them before you checkout.
>> Scott: And one thing to note, I think we had a question earlier during the break, is someone had mentioned in Next.js, Next.js has a config file where I'm doing a bunch of stuff, this is really just me adding cores.

[00:00:56]
If you don't know what cores is, it's just a way for us to enable cross-origin resource sharing for our server, which allows clients like browsers to access us if we give them the right. It basically just lets the server describe who can access it and what headers they can use.

[00:01:11]
So this is just saying anybody can use this. Obviously you can still have like authentication through like, other means, but this is just just cores. But someone asked a question about like, well, how do I configure a web pack in here? Well, it's the same. I don't know exactly, or remember exactly how you do it with Next.js on web pack, but it's got to be the same thing.

[00:01:28]
And the reason they're asking that is because, so far, we've been writing our schemas in a string, but you can also write your schemas in a .GraphQL file, right? And for that file to be used, you have two ways. You can read the file using the file system, I don't recommend doing that in a serverless environment because the file system is, it's just not guaranteed.

[00:01:49]
It's ephemeral. The paths aren't where you think they are. So I don't recommend doing the file system in a serverless environment. The second way is you can teach web pack how to load that file through a custom loader. So if you do want to make your schema and a .GraphQL file, instead of putting it in a string in a JavaScript file, you can do that.

[00:02:08]
You just need to configure Next.js to use the GraphQL loader when it sees a .GraphQL or .GQL file so when it when you import that file, it will basically transform it into either a string or realistically a GraphQL document that you can then use. So that is a workflow that you can use.

[00:02:27]
I don't really care to put it in the file, I actually prefer it in JavaScript that way I can do dynamic things. I don't like myself in graphical files, but a lot of people do. So, you could totally do that if you want. And yeah, you would just configure it here.

[00:02:43]
Okay, so let's get into it. As you can see, you have an API folder that says GraphQL, there's only one thing in it and it's route.ts. There's literally nothing else in this. So the first step of this is setting up our GraphQL server. That was already done for you in the demo, so this is your first time setting it up.

[00:03:02]
Let's get that going. I have the code here for it. So to set up a GraphQL server, we need at least two things. We need a schema and we need a resolver. Those are the least two things that we need, right? So let's make our schema. You can literally put whatever you want because we're gonna be making a lot of this stuff.

[00:03:19]
So I'm just gonna go make a schema, make a file inside the GraphQL folder called schema.ts,
>> Scott: And make a schema. So I'm just gonna say export const schema =,
>> Scott: Back ticks like this. I'm gonna do my comment for GraphQL, so I get my syntax highlighting and I'm just gonna make a quick little schema right quick.

[00:03:47]
Something to satisfy it so it actually works. There we go. I'm not even gonna make it require it. So I got my schema, you can do whatever you want here. The next thing I need to do, I just need to make a quick resolver that resolves that, so I'm gonna do the same thing.

[00:04:02]
I'm gonna make a file in the same GraphQL folder, call it resolvers.
>> Scott: And I'm gonna say, export const resolvers = an object that has the query type with the field of me, and it just returns me.
>> Scott: Super simple. Not that crazy, you can put whatever you want.

[00:04:32]
>> Scott: And now we need to bring it all together inside the route.ts. So if you've never used Next.js, you can think of this as like, this one file is the equivalent, if you used Express or Django or Flask or something like that, this will be the equivalent of like, you know how you can make a route verb combination.

[00:04:50]
So when someone does a get request to /api/ this, run this code. Okay, this is like, this file is where you would set up all the verbs for this one route at /api/graphql. So this is the equivalent. So run this function when someone does a get request to /api/graphql.

[00:05:11]
Run this function when someone does a post request to /api/graphql. These are the handlers for those verbs inside of this route, api/graphql. We need to do some bindings here for our Apollo service, so that's what we're gonna do. You scroll down, I actually have all the code here on which we need to do.

[00:05:33]
And I'm gonna walk through pretty much all of it. It's a lot simpler just to copy all these imports than writing them yourself, I'm just gonna do that. I think for me, the biggest difference, what I just did is I had named exports. So we'll put brackets around my stuff because they're names.

[00:05:49]
And I think this one's called the schema of mine, yours might be different. So I'll have that. I'm just going to consolidate my imports. That's the same imports, I'm going to get rid of it. There we go, so we got that. The next part really is not that important, it's very framework specific.

[00:06:04]
This is what, you know, when we go to the browser, we go to /api/graphql on the app loads up, the Apollo Studio? This is how we get it. They have a plugin called Apollo Server plugin landing page, so long, that's what this is. This is a landing page for your GraphQL API, this is what enables it.

[00:06:21]
So you can honestly just copy that, this part is really not that important. And really all I'm doing here is just like, hey, if you're in production, this graphRef thing, this has nothing to do with GraphQL, this is if you use Apollo's service, for your GraphQL API to do like tracing or whatever they give you like a graph or ref, and you can put that here.

[00:06:39]
Otherwise, we're on local hosts, just embed it with auto graphRef and use the local and not the production plug-in. This is really just to start up that app for us. Your server will work without this, you just won't be able to go and to play with it if you don't add this.

[00:06:54]
Okay, and then the next part is the part that really matters. So first we need to make a server, we got to pass it our resolvers, our type definitions which are our schema and then the plugins, which is this stuff. So let's do that. So we'll say const server,
>> Scott: Okay, there we go.

[00:07:13]
It's for some reason I can't type at this angle. Server = new ApolloServer. We're gonna pass in our resolvers. We're gonna pass in our plugins, and then we're gonna pass in our type definitions, which for me is called schema. I guess technically it's not a schema. I guess technically the typeDefs together plus the resolvers is the schema, but it's the schema.

[00:07:45]
Cool, so now we have our server.
>> Scott: What we need to do now is we need to create a handler, right? So the handler is what we're gonna replace. Right now these functions don't do anything but return a a basic object, so we need to create a handler and we can use these startServer and createNextHandler function from Apollo.

[00:08:04]
So I'll say,
>> Scott: Handler equals startServer and CreateNextHandler. I'm using Typescript here and I'm just gonna pass in this generic. A generic is basically like an argument for types. So I can say NextRequest, so that way the request object is type checked according to Next.js. It takes the argument of server, I'm going to pass that in.

[00:08:37]
>> Scott: So now we have our handler.
>> Scott: There's a second options argument. I think I have trouble if I didn't put an empty object, so I'm gonna put an empty object.
>> Scott: And then from there, we just need to supply our handler to our get in our posts, right?

[00:08:52]
So we're gonna return handler and passing the request. So I'm just gonna copy both of these, return handler and then pass in the request. There we go, now we have a GraphQL server. Depending on the technology that you use, like Next.js, or Node, or Express, this part is slightly different.

[00:09:14]
Everything up is the same, it's this handler part that will be different. You're always going to create, if you use Apollo, there's more than one GraphQL server framework, but if you use Apollo, this is always the same. You're always gonna make a new Apollo server, you're always gonna pass in these things.

[00:09:31]
It's this part that's specific to the framework. So literally just one line.
>> Scott: This is why I said you don't really need to know Next.js to get a benefit from this, this is the only Next.js specific thing is this.
>> Scott: Okay, any questions on that?
>> Scott: Well, okay, so we did this right, should be able to run this.

[00:09:55]
>> Scott: Let's see, npm run.
>> Scott: Hopefully this works. So now we can go to the same thing right here, /GraphQL, and ta-da, it works. And now if we go look at our schema, we can see that whatever you're putting your schema, you should see that there. Yours is different than mine, you should see something different, but there we go.

[00:10:23]
We have a server, we created it, it's literally gonna be the same for everything that you make. So congrats, you now know how to make a Hello World GraphQL server from scratch, you graduated.