Introduction

[00:00:00]
>> Scott Moss: How's it going, everybody? Welcome to the course, super excited to be back here with the team at Frontend Masters to talk about one of my favorite technologies, and that's GraphQL, specifically on the client side with React. So before I get into that and why I'm excited about it, let me tell a little more about myself, my name is Scott Moss.

[00:00:16]
I've been a software engineer for over 10 years now, currently, I'm running my own startup right now. I had previous stints as a venture capitalist, founder again in another life and I've worked at companies like Netflix, working on all types of exciting things. And when it comes to GraphQL, I've seen many different flavors of it.

[00:00:36]
I was around when it first came out and was wild buy it and even today, I'm still just surprised of how much value we can add when you use it correctly and in the right scenario. So super excited to talk to you guys today about how I use GraphQL on the client side with React.

[00:00:51]
Before we get into that, I'm gonna talk about some of the prerequisites that I think you might wanna know that to get the best from this course. So, like I said, it's gotta be client side GraphQL with React, but we're actually gonna be using Next.js. Now, I get it, you might be thinking, I never used Next.js or maybe you did use Next.js, it's totally fine.

[00:01:09]
You don't need to know Next.js to take this course. We're only gonna be doing the React integration of Next.js. So just not diving in too deep, we're gonna opt out of all the really cool server side components and server rendered things that Next.js does, and we're just gonna use client side React.

[00:01:28]
The reason I chose Next.Js because it's the best way to get started with React it's actually what's recommended on their website is just to use Next.Js so that's why I chose it. It's just simpler now to just use it so that's why we're doing it. You do not need to know Next.Js, it's gonna be totally fine.

[00:01:43]
But you do need to know React. So if you don't know react, you probably need to go take an intro to react course. Brian hook teaches one here. It's very great and there's tons of other react courses here front end master, so please check those out. Although you don't you won't be writing any react in this course we're going to be focusing purely on the grid GraphQL aspects and how it integrates with React.

[00:02:04]
Knowing React is gonna be helpful, so please take the course if you haven't. Obviously you need to know JavaScript, we're gonna be using TypeScript. You don't need to know TypeScript, it's all optional. You'll see in the code that like, I get lazy and forget to add types sometimes because I hate writing types, but I like using types, it's kinda weird.

[00:02:21]
And the other thing that's useful is just having some experience interacting with APIs from the client side. So if you've ever used Axios, or Fetch, or just interacting with APIs in general, that's quite useful since that's what GraphQL is. It's a way to interact with APIs, and creating APIs on the service side at least.

[00:02:38]
So having that understanding is gonna be quite useful, if you don't, it's fine. We'll breeze over it a little bit. You don't need to know all the intricacies about it, but knowing how HTTP works, how fetch works in a browser will be quite helpful. As far as the course format, if you've taken some of my courses, you know I like to introduce new topics and kind of riff on them for a little bit.

[00:03:00]
I try to do some live coding where I show some examples, and then I try to apply it to an app. So that's exactly what we're gonna do this time, and you're gonna be building, or I'll say, you're gonna be finishing an app that I didn't finish. So it's gonna be an app that's a play on one of my favorite apps, which is called Linear.

[00:03:18]
This app is called Parallel, so this is what it looks like, it's basically like a productivity app. You can think of like, you know, an Asana or something like that if you never use Linear. And it's where you can just add action items that you wanna check off and, you know, change the status of them.

[00:03:31]
So it's bare bones, it's slimmed down, it's nothing crazy, but this is what we're gonna be working on. And again, you won't have to write any of the reacts or do any of the design. You're gonna just gonna make the interactions work with GraphQL. So an example of this is being able to go in here and make a new issue like this.

[00:03:48]
You can create a new issue and then it'll show up. You can change the status of that issue and things like that. And there's also some authentication components, involved with it, like signing in and signing up and things like that. But again, the backend's completely done, so you don't have to touch it.

[00:04:02]
We're mostly focusing on the front end, so those interactions that I just showed you. And then along with that, we're gonna have some course materials here that I created in Notion. So you can get the link in the repo, read me, but I'm just gonna go to it here.

[00:04:15]
I'm just gonna go to one of the examples here. So you'll see in the examples that there's some code blocks, so. For the most part, these code blocks are fine, but when we start doing GraphQL, because the way that we write the GraphQL queries, they're inside of a string Notion, adds tap characters sometimes.

[00:04:31]
And those tap characters literally get interpreted by the GraphQL parser and causes errors. So when it comes to copying GraphQL queries that I put in notion. I would refrain from doing that unless you want to manually go remove tabs yourself. So you should probably get the code from Github, which I will be pushing up as I teach on individual branches so to always be there.

[00:04:51]
So follow along if you can. I'll go slow, I promise, but the code will always be on Github once I'm done with that lesson, you can copy it from there.