Introduction

[00:00:00]
>> Scott Moss: I'm back to talk more about GraphQL. Super excited, it's one of my favorite segment, one of my most favorite technologies. And this is the only platform that I teach on because Frontend Masters and Mark and the team. It's always a good time. And like Mark said, so much has changed in GraphQL landscape since last I talked about it, and even then I only talked about server side, things with GraphQL, which is like evolving in a completely different direction than what you can do on the client.

[00:00:26]
So this time I want to talk about GraphQL from the back end perspective and also the front end perspective, using some of the most popular implementations out there, which include Node and also React on the front end. So if you're interested in learning how to use GraphQL on a different server or on a different framework, a lot of this, I would say 80% of it is still going to apply to you because it's focusing just on GraphQL which doesn't really change on the framework, anything like that.

[00:00:52]
And then the last 20% is specific to the platform that we on which is Node or React. So you still get a lot from this. To start things off, there is a repose, let me get you that URL if you didn't get it all ready. But it'll be on GitHub, Frontend Masters, Fullstack GraphQL.

[00:01:15]
So the only dependencies you need for this is no version greater than six. There's no database. There's nothing like that. I cleaned all that up. I learned my lesson of having everyone try to install Mongo [LAUGH] I didn't try to get this going. I don't want to focus on databases this course.

[00:01:30]
We're purely focusing on GraphQL and that's the beauty of GraphQL that you'll find out. It doesn't really matter what you use for your data source. So, yeah, I just put down this repo and the links of the slides are in the read me, so you can click on that and follow along, if you're online, if you're here you can also follow along or just watch my screen.

[00:01:47]
So, with that being said, I'm just gonna go ahead and kick things off with the slides. So the first thing is I want to talk about GraphQL the big picture. What is it? When people's mentioned GraphQL I think there's a lot of, there's different scenarios of what they could be talking about because GraphQL itself covers a lot of things.

[00:02:11]
But basically what I think of GraphQL is and this is kind of 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. This is achieved by creating a strongly typed Schema for your API, ultimate flexibility, and how your API can resolve data and client queries validated against your Schema.

[00:02:33]
Now all that just sounds crazy, but it took me a while to come up with that definition to get this so many different things over what I believe GraphQL. So basically what this is saying, if you ever use any strong typed language like Java, or TypeScript or anything like that, imagine putting a type system in front of an existing API.

[00:02:50]
And then now on any client if they want to interact with API they could leverage that type system to ask the API for exactly what they wanted. So if you created some types with some fields on it, then you could from the client say, 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 astronomy typed language.

[00:03:13]
It's basically that as far as like how the client interacts with it service 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 going to learn what a graph is. And, and we'll get into it.

[00:03:27]
Any questions on that? What is GraphQL? After me telling you the 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 speck, GraphQL itself is not a repo somewhere.

[00:03:48]
It's not a 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 and it changes all the time.

[00:04:04]
If we 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 want to read and it just scrolls forever. That's what a spec is. So if you really want to understand how GraphQL works and the ins and outs, then go do this.

[00:04:21]
This is what GraphQL. It's just this spec. 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. 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 the there's so many different graphical things out there.

[00:04:48]
So, talking about server side, we actually don't want to say that right now. So when we get into GraphQL on the server side, there's gonna be, how you handle GraphQL on the server side and how you handle on the client side are two different scenarios. So, on the server side, the whole purpose of GraphQL is to create some type of graph that's based off some shapes that you are want to expose in API.

[00:05:17]
And then you need to allow the client to query that graph in whatever direction they want. You have no idea, how the clients gonna query, and you're gonna find out in little bit and that's the whole purpose of server side GraphQL from a client's perspective. There's other things associated with GraphQL and server side that we're not going to cover in this course that's more advanced things.

[00:05:37]
And that's like communicating with like other GraphQL services and doing service discovery and meshing APIs together and all that crazy stuff creating Federations and stuff like that. That's a whole another thing. That's more advanced, for this course we're focusing on server side GraphQL for the client, which is a lot easier to conceptualize.

[00:05:58]
So for this course, one of the implementations that we're going to use is going to be obviously GraphQL server side in Node. So this is primarily going to be a Node or all of it's going to be in Node. We're gonna be using a library called Apollo. Apollo is a company.

[00:06:12]
Have you ever heard of a framework called Meteor? Okay, so the same people that made Meteor made Apollo, they kind of just pivoted, I don't even work on Meteor anymore. They now do Apollo and Apollo, they have services that you can use GraphQL for, but they are very well known for their open source that they use to create a lot of GraphQL stuff.

[00:06:30]
And the library that we're gonna use is gonna be called Apollo server. So that's just to give you some context of what we're gonna be doing. Now, server side, for us to actually compose a GraphQL API, there's a few things that we're gonna need and this is just for me to go over you and this is a complete overview, we're gonna go into more detail about each one of these things later on in the course, but just giving you an overview of some context.

[00:06:53]
So first thing is really something called type definitions. So like I said, this is a strongly typed language of a sort, and because of that you have to create type definition, so if you've ever used something like Java or TypeScript you'll create some types, right? It's the same thing with GraphQL.

[00:07:08]
You're gonna create types, those types are usually based off on shapes in your database, Schemas, things like that, or some other third-party research you're gonna interact with. That's what they're usually based off on. You're also gonna create something called resolvers. If you ever built something on a server, I guess you could think of this as controllers and the rest API or something like that, they're responsible for actually retrieving data from a data source, whether it's a database in memory, Redis or rest API, wherever the data is, it's the resolver's job to go fetch that data.

[00:07:41]
We have query definitions, and we also have mutation definitions. These are specific types that allow us to ask our API for data, or modify data, whether it's updating, deleting, or creating things like that. And then we have like I said, compositions, so this is a bit more advanced.

[00:08:00]
But this is the ability to compose different APIs together underneath one GraphQL umbrella and that's something new that the community the direction is going. I think GraphQL started off in a way, this is really great for client side front end developers. It's super awesome. But I think now people are starting to realize, hold on, this is really good for back end too, for transporting data across many different services and have the GraphQL API sitting in front of it and have one unified type save API.

[00:08:27]
There's a lot of benefits, there that a lot of people are just not realizing. So that's what that is. And then all that together kind of just creates a Schema. So our type definitions are resolvers or queries and mutations, all that comes together and we have a Schema.

[00:08:43]
Client side, we have queries, which are what we use to access the data on our API from the query definitions. We also have mutations which is how we want to modify data on our server. So if we want to create or create or update or delete, we will do mutation.

[00:09:03]
And then we have fragments and we'll talk a little more about fragments. This is just an overview, but fragments are just little pieces of shared queries and mutations so we don't have to rewrite them all over again.
>> Scott Moss: All right, so that was a lot. I wanted to go over that and get that out the way so you'll have some context when we get back to it.

[00:09:22]
But where does GraphQL fit in? So I talked about what GraphQL is, some different moving pieces of it, how does it fit in to your architecture right now? So there's a couple of ways. One is a traditional GraphQL server with a connected database. And I put most greenfields are gonna have this.

[00:09:40]
And this is what we're gonna be doing in this course. You just gonna have a server. It's primarily gonna be GraphQL and it has one data source which is usually a database. And that's a traditional thing. If you're building out a new project with GraphQL you're most likely going to be doing this.

[00:09:55]
The second one is a GraphQL server as a layer in front of many other third party services. So you can think of if you have a service or oriented architecture with different servers everywhere, this GraphQL server was sit in front of all of them, and it would unify them with just one API.

[00:10:13]
So if you go to interact with any of your services, instead of going to each one individually, you would just hit the GraphQL API, which would allow you to interact with all of them with just one API. So that's one way to do it and the next one is just a hybrid approach where you have a GraphQL server that's connected to a database, but it also communicates with other third party resources via resolvers so that's a hybrid approach.

[00:10:37]
There's other ways you can use GraphQL I mean it's literally their package called GraphQL anywhere we could use it anywhere. But these are the three biggest places I've seen GraphQL use. I said we're gonna focus on the first one today. The most simplest one. So I talked about a little bit about the the tools, we're going to use it with Node.

[00:10:56]
But basically, for the server side, we're gonna use an Apollo server. There's another one called GraphQL Yoga. If you've ever Google that, you've probably seen that, we're not gonna be using that, one that is also really good. There's plenty other ones. As far as services, if you want it to just get into GraphQL and get something deployed really quick without having to write code, you have something called Amplify from AWS, which basically allows you to write GraphQL and things like that.

[00:11:24]
It deploys it for you. You don't have to do anything. There's also others. They used to be some more, but they kind of just shut down. And then as far as tools, there's this thing called Prisma. And also many other things. And the reason I'm showing you all this because you're gonna come across this as you're working on this curriculum, and I just want to let you know if you come across this stuff, this is what you're gonna see but we're gonna be focusing on Apollo server specifically, its implementation of GraphQL