Introduction

[00:00:00]
>> Scott Moss: How's it going, everybody? Welcome to Server Side GraphQL. I'm your instructor Scott Moss, thanks for tuning in. And in this course, we're gonna be covering all types of things with GraphQL, but specifically on the server side. We actually shot a client-side version of this course that covers pretty much everything on the client-side.

[00:00:19]
So I highly recommend checking that out if you want the full stack of what GraphQL is. But in this course, it's specifically gonna be server side. So GraphQL is one of those technologies that I've used pretty much my whole career as an engineer since it's been adopted, in some way or some capacity.

[00:00:38]
From creating headless CMSs with dynamic GraphQL, APIs on the fly, to building tooling around it. At one point, people were using GraphQL for developing static websites and querying file systems. It's like GraphQL is just a powerful language. So I'm super excited to talk about how to take advantage of it on the server side, which I think is where all the power is, but also where a lot of the confusion is.

[00:01:02]
So we're gonna demystify some of that in my own perspective. So we'll dive into that. And just a little bit more about me, if you're new to any of my courses here at Frontend Masters, I've been an engineer for over ten years, working at various companies like Netflix, starting a few companies.

[00:01:21]
Also had a stint as a VC where I took a lot of startup pitches in San Francisco. Currently I'm in the middle of starting another startup right now, it's AI startup, and we use a lot of these technologies. So I'm using Next.js, I'm using GraphQL, I'm using even the database that we're gonna use today, you're gonna see.

[00:01:38]
I'm using all of these things, which is why I'm so excited to talk about them because I use them every day. So this is the app that we're gonna be building. It's called Parallel. It's a play on a really cool app that I like called Linear. And on the client side course, we took care of all the client-side queries and GraphQL stuff on the frontend with React, we take advantage of it.

[00:01:58]
Here, we're gonna be doing the server side. How do we actually enable that? So the framework of choice along with GraphQL is gonna be Next.js. So when it comes to Next.js, you don't actually need to be an expert at Next.js to take advantage of this course. We're just using it because it's the simplest way to get some API service functions going.

[00:02:18]
We're not gonna be doing anything Next.js-specific here. It's gonna be strictly GraphQL. Everything that I show you here is 99% gonna be the same if you were using Node.js with something like Express. Or even if you're using something like Deno, or Bun, it's pretty much gonna be the same.

[00:02:33]
Next.js is just the quickest way to spin up a server, that's why I chose it. So you don't need to know Next.js here, you don't need to know React here. We're not doing anything on the frontend, it's all backend. So if you know Node, you know how APIs work, you've ever interacted with any type of database, you're gonna do fine in this course.

[00:02:50]
But yeah, here's the app. So you can do things like create an issue. So I can make an issue here. I am teaching a course today, so I'm gonna make that. And I can click Create Issue, and then it pops up here. I can change the status of it, I can refresh, I can get them all back.

[00:03:05]
There's also some authentication that's involved here where you can sign in and sign up. So we need to enable all of that by creating a GraphQL experience on the backend. So that's what we're gonna be doing today. So if you go to the repo, which is gonna be here on my GitHub, which is, I'm gonna zoom in on that a little bit.

[00:03:23]
It's /Hendrixer, which is a play on my son's name, whose name is Hendrix, and /server-side-gql. So go there, fork that if you want, and then clone it down into your computer. You'll notice in the read me here, there's a link at the bottom, it says, Course Notes. These are the notes that we'll be using to follow along.

[00:03:44]
If you ever take any of my courses, you know the notes are mostly for me because I go on tangents and I start talking about random stuff. So it's a way for me to stay on track and reel myself in, but they're also a place for you to look at the code that I'll be writing.

[00:03:57]
So if you want to copy it and stay ahead, you can use it. One note on the course notes, I'm actually gonna pull it up real quick, is I wrote the course notes in Notion cuz these days I pretty much live in Notion 24/7, so I decided to do that.

[00:04:14]
And you'll notice that there's gonna be code here, these code examples. For the most part, you can copy and paste this code, and it'll work just fine. But there are some gotchas with some of it. So for instance, with the GraphQL code blocks, you'll notice when we get into it, we're gonna be writing GraphQL in a string.

[00:04:31]
And Notion puts hidden tab characters in the string. And if you don't have your editor set up to when you hit Save to automatically format it and to get rid of the tabs and replace it with spaces, those tab characters will get interpolated by the GraphQL parser and you'll have errors.

[00:04:45]
So basically what you can do is, if you're copying from here, you just wanna be safe. Don't copy the GraphQL code from here, but that's fine because I'm gonna have it on the GitHub repo. Everything's gonna be there, I'm gonna be pushing things up as I teach. But to get the best experience, just follow along.

[00:05:01]
Try to follow along, I won't be going too fast, I'll stop if I need to. But this is here, the repo will be there. And then also I'll be doing this from scratch. So you'll have three different ways to kinda figure out what's going on, but just a note on that.

[00:05:15]
The repo will be set up to have the right configuration to fix that if you hit Save, but you have to enable it on your editor side. I think there's a prettier integration or something like that. So just a quick note there. Other than that, we should dive right in and kinda get to it.

[00:05:33]
Let's get into some of the prerequisites and the things you're gonna need on your computer to actually do this course. Promise you, it's not extensive. If you've taken the client-side course, it's exactly the same. So if you've taken that course and you went through that course and have everything downloaded and installed, you won't actually need to do anything here other than pull the repo down.

[00:05:52]
So it should be fine here, but I'm just gonna walk through it. Kinda talked about it already. You need to know JavaScript. We're doing this in JavaScript. GraphQL is not specific to JavaScript. It actually does not care what language you decide to write your backend in, because there's so many ways you can use GraphQL, as we'll talk about soon.

[00:06:09]
But we're gonna be doing it in JavaScript. Technically, we were doing it in TypeScript, but types are optional, you don't need to use them. You'll see in the code that I use types sometimes, sometimes I don't use types. I don't have a good reason for that [LAUGH] other than, sometimes I feel like it, and sometimes I don't.

[00:06:24]
I'm not consistent with it. But these days, I kinda just use AI for types cuz it's just so much better at it than I am. You need to understand APIs, talked a little bit about that. So if you've ever built an API before, whether it's in Node or some other language, that's really all you need.

[00:06:41]
Maybe you've never built one, but you kinda know how they work because you've interacted with them in so many ways, that's also fine. And then a little bit about databases. You won't be designing database schemas and things like that. But we will be using a database ORM, specifically Drizzle, to interact with a SQLite database.

[00:07:01]
So if you've never done a database query before in your life, that might be a little uncomfortable. But then again, the whole point of the course is not to teach you about databases. So you can just follow along with that part and just trust that it works. But having some familiarity with a database and how it works and how you query it is gonna be helpful.

[00:07:19]
But by no means do you need to be a database expert to take advantage of this. I decided to use a database versus some in-memory data to give you a real-world example of what it would be like to build a GraphQL API. So I kinda opted into that.

[00:07:32]
As far as the format goes, it's kinda how I always do, it's going to be me talking about a concept. I'm gonna try to talk as little as possible about it, cuz I just really like to just get in there and show it. I think demoing something is a lot easier to grok than someone just sitting up here talking about it.

[00:07:48]
So I'll talk as little as I can about some concept, but eventually I'll just dive right into it and start practicing it. And then what we'll do eventually is, once we build up some of that context, we'll apply those things that I taught into the application that I just showed you to enable that application and get it to work.

[00:08:04]
So it'll just be like that flow for the most part. And then by the end of the course, once we go through all of that, I'm pretty much covering, I would say, more than 80% of what it takes to build a GraphQL API. The last 20% is probably gonna be some techniques you would do in production as far as performance and things like caching.

[00:08:25]
And most of this is more of the same. So that's a little more advanced and I just don't have time for that in this course. But 80% of what you'll do in GraphQL will be covered in this course. So by the end of it, you should feel pretty comfortable to go build your own GraphQL API.