Introduction

[00:00:00]
>> Scott Moss: All right, good morning, everyone. Thanks for coming to the GraphQL course for the client side using React. I'm Scott Moss, I'm gonna be instructor today. I love GraphQL, I use GraphQL every single day at my company, been using it for years. I've taught GraphQL here at Frontend Masters a couple of times and this is the first time I'm getting to talk to you all about using GraphQL on the frontend which is slightly different than using it on the server side.

[00:00:25]
And, if you're interested in that we have courses for that. We have an advanced GraphQL course on the server side. We also have a intro to GraphQL for the server side. So definitely check those out if you're interested in that. But this course is gonna be focused purely on using GraphQL on the frontend using React.

[00:00:43]
>> Scott Moss: So, to hop right into it, understanding what GraphQL is specifically for the client side. GraphQL, at least the way Facebook used GraphQL when it was initially created was they intended for GraphQL to be used solve frontend problems, as far as like UI related. So, you build the UI mostly in some component architecture using a framework like React, or Vue, or whatever your favorite library is, or framework.

[00:01:11]
And then those components have props, and usually those component's props are shaped a certain way using something like prop types, or something like that. So, you get to the point where you start designing or modeling data on the frontend exactly the same way that your components needed. So that eventually just translates over to like, well, if the in-memory state that we have on the client is modeled in a way that our components can just consume, how can we extend that to have the data from the server coming back the exact same way that our components as well?

[00:01:44]
And now those are some of the first steps of getting what we have now which is GraphQL. So that's basically what the purpose of GraphQL on the frontend is. Like how do we consume data from the server in the exact shape, the exact type that we needed to display it so we can just take it from the server, throw it right on the page without having to do anything?

[00:02:03]
Just completely eliminate that. I need to do any post transformations or processing and just throw it on the page, and that's kind of where it started. And now, GraphQL has evolved into like a whole another beast. It's more than just a way to fetch data from a server to throw inside of a component.

[00:02:22]
It's actually its own language and its own process to build a schema for anything and write queries to resolve into whatever you want. We're just using it for data on a server and on the bracket. So for this course, I have a repo for everyone. So first thing, let's just get started with that, cuz if you go to GitHub, Frontend Masters it's going to be,

[00:02:51]
>> Scott Moss: Fullstack GraphQL.
>> Scott Moss: And, you can fort that. And then once you do that you need to check out to the client branch. If you already have the repos just do a fetch and then check out to the client branch. The master branch has some server side stuff.

[00:03:05]
There's a solution branch that has all the stuff completed. But what we're focusing on today will be the client branch, which is everything you need. So go ahead and check out to that one. And then in the read me, there's a link to the slides that we'll be using today, so follow along or you can just watch me.

[00:03:23]
>> Scott Moss: There are no dependencies other than just having node version greater than six purely frontend. Everything is already in the pack. Is that JSON? I don't even think you have to install anything. I have everything in the pack is that JSON have everything in the yarn lock so I don't think you even have that, you can run it install command other than the initial one when you pull this repo down.

[00:03:42]
>> Scott Moss: So the first thing is, I want to talk about GraphQL, to the big picture like, what is it? Like when people's mentioned GraphQL, I think there's like different scenarios of what they could be talking about because GraphQL itself covers a lot of things. But, basically what I think of GraphQL is this is kinda like my definition is it's a spec that describes a declarative query language that your clients can use to ask an API for the exact data they want.

[00:04:13]
This is achieved by creating a strongly type schema for your API, ultimate flexibility and how your API can resolve data and client queries validated against your schema. All that just sounds crazy. But, it took me a while to come up the definition because it's so many different things what I believe GraphQL is.

[00:04:29]
So basically what this is saying is if you ever use any strong type language like Java or TypeScript, anything like that, imagine putting a type system in front of an existing API. And then now, on any client they want to interact with the API. They could leverage that type system to ask the API for exactly what they want it.

[00:04:49]
So, if you created some types of some fields on it, then you could from the client side, give me this data with these exact fields and the API will respond back with that exact shape. Just like if you were using a type system on a strongly typed language.

[00:05:02]
It's basically that as far as like how the client interacts with it server side as you find out, there's a lot more to it. It's actually a graph, you're creating a graph. If you don't know what a graph is. You're gonna learn what a graph is and and we'll get into it.

[00:05:16]
Any questions on that, on what is GraphQL? After me telling you this definition, I don't expect you to know everything about GraphQL. So, if you still don't know what GraphQL is, that's fine. This is just to give you some context.
>> Scott Moss: So like I said, it's just a spec.

[00:05:33]
GraphQL itself is not a repo somewhere, it's not a framework. It's literally just a spec, and here's the link to it. If you click this, it'll actually take you to the spec that was created by the people who created GraphQL which is Facebook. Facebook created GraphQL, and here's the spec for it.

[00:05:51]
And it changes all the time. And if we would go to look at this one they have here, you start scrolling, yeah, it looks like what a spec looks like, very boring. A lot of stuff that you probably don't wanna read and it just scrolls forever. That's what a spec is.

[00:06:05]
So, if you really wanna understand how GraphQL works and the ins and outs, then go do this. This is what GraphQL is, it's just this spec.
>> Scott Moss: So, see how Facebook created this spec which spawned from some internal thing that they were using. There are several implementations and variations of that spec.

[00:06:23]
So like I said, it's just a spec, people from the community, including Facebook themselves have taken that spec and created different libraries and frameworks and implementations, based off languages and platforms and like there's so many different graphical things out there