GraphQL With React & Apollo [1] - Express GraphQL Server

[Music] this video is sponsored by IDI onyx who has two programs coming out one is an AWS preparation course to help developers achieve AWS certifications and handle real-world use cases it includes practical labs practice tests and more the other is a data science foundational program with four courses on data science including Python and our programming it also includes four ebooks and 3 bonus prep guides to check these programs out check the Kickstarter links in the description below hey what's up guys so a little while ago I asked for some suggestions on video topics and I got a lot of requests for graph QL as well as the Apollo client and react so in this series we're going to use all of those things and I'm also thinking about creating a unity course on these technologies now if you don't know what graph QL is it's a way to query your data it's somewhat similar to rest and you can use it with existing rest api's as we're gonna do here but instead of getting all or nothing like you do when you make a request to a REST API you can ask for specific things so if I want to just let's say ask for just the title from some sort of reference like a blog post I can ask for that unlike rest where I would have to get everything from that reference data and then parse it and pull out just the title so it saves you on requests and stuff like that now graph QL can make apps faster because the app controls the data that you get basically over the server and the queries are also very elegant and almost look like JavaScript objects as you can see right here this is the actual official graph QL website and this is basically how you can query data so I also have a five-part series on creating a graph QL server with Express so just the backend just the server part I'll put that link in the description it will give you more insight on things like mutations to update data and so on the app that we'll be building is basically just going to use queries which is just fetching data rather than then you know updating or creating stuff like that so it's basically a read-only app but what I want to focus on this series is not just building a graph QL server like my other series but I want to build a front-end with react and something called Apollo actually its Apollo 2.1 that we'll be using and it's a client to interface with our graph QL server okay so I think one of the most difficult things these days is that we have so many technical differences that sometimes hard to understand how do we put them all together and make them all work together so that's my main goal with this series so what will be building is this app right here and what this is gonna do is we're gonna interface with the SpaceX API which gives you a whole bunch of data launches rockets all types of stuff you could extend this app to to include much more data but what it does is it lists the missions that have been that have went on since the beginning of you know 2006 and as you can see some are red some are green most are green after the first few there's one red here these are the ones that failed the ones in red so we're gonna create a little key component here just to let the user know that we're gonna use bootstrap but we're using a custom theme from boots watch and we're using react routers so that we can go to the launch details page which gives us some other details gives us the details of the rocket that was used though the ID the name the type of rocket and again you can get more data than this but I just wanted to show you how everything works but it's up to you if you want to extend the application and I would suggest doing that tutorials can only take you so far so yeah that's what we building it's pretty simple as far as functionality but there's a lot that goes into it we might even do the deployment you can see I actually have it on Heroku now so there's a couple extra steps to to deploy and as far as data you know we're using an third-party data from SpaceX but of course you could use MongoDB database or MySQL or any kind of SQL database anything like that when you use graph QL you're not you're not limited to a certain way to to store your data you can use anything you can use graph QL with other languages and other frameworks and it's not specifically for JavaScript for react or anything like that so yeah so let's get started and we'll jump into vs code all right guys so we're in vs code now and I just have an empty folder called SpaceX launch stats that's the name of the application and I as you guys know if you watch my videos I like to start from absolute scratch that's why I didn't want to just build the server and then just say oh we're just gonna do the reactor Paula part I want you guys to know how to do things from start to finish and because I get aggravated when I watch tutorials and they they just you know start in the middle so let's go ahead and start from scratch we're gonna go ahead and do an NPM in it okay so I'll answer these questions here so watch stats that's the name of the app version is good description will just say app that lists SpaceX launches our launch missions and entry point I'm actually gonna make server dot J s and go through that we don't need that author if you guys want to put your own name that's fine this is completely open source ok so now we have our package dot JSON file let's go ahead and install the dependencies that we're gonna need so we're gonna say npm install our yarn if you want to use yarn and we want graph QL itself and then we're using Express so we need to install something called Express - graph QL which allows them to basically integrate together of course we need to Express and we're going to need Axios to make requests to the spacex api or you could use fetch if you want but i like to use Axios and let's see I think that's I think that's all we'll do for now there are some other ones but we'll get to those later so these are these are the things we need now alright so those are installed I also want to install node Mon so that we don't have to keep restarting our server when we make changes but I do want to install it as a dev depend see so we want to do - uppercase D node Mon okay so that way you know it just continuously watches every time we save it'll it'll update the server alright so now let's add some scripts so that we can run our server once we add our code so we're gonna have start which is simply going to run the file with node so we're gonna say node server dot J s and then to run node Mon I'm gonna do server so that we can do NPM run server because remember we're gonna have a server part and then a client part which will be reacting Apollo so to run just the backend we want to run node Mon let's say node Mon server je s alright that should be it for now so let's go ahead and save that and we can close this file up for now so now let's create our server dot je s file and we're gonna start off by bringing in what we need so we need Express so we want to require Express and we want to bring in a couple other things let's bring in Express graph view of graph QL oh I actually don't have to delete that it's a graph QL and we want to bring this in as graph QL HTTP ok now I just want to show you the graph QL github real quick or the Express graph QL github just so you can see what we're doing here all right so as you can see it's brought in as graph QL HTTP and the idea here is if you've ever worked with Express I'm sure a lot of you have you usually create different routes right so you'll have routes to I don't know show blog posts or to a post route to update blog posts with graph QL and Express we only have one end and that's gonna be slash graph QL from there we create a schema okay so we'll have a schema file that's going to include basically all the queries that we want any mutations if we want to to like add things or update things on the server to update data stuff like that so this is the only endpoint that we need so what I'm gonna do here is just copy this actual just grab all this and we'll get rid of this for now we do have some other stuff that will bring in later but we don't need it yet so we're just initializing Express as usual and like I said we have one endpoint of slash graph QL that's going to run graph QL HTTP which is the Express graph QL we're gonna point to our schema which I'm actually just going to call schema so we actually that we can just do this and then graphical is the tool that I was saying that we can use is our client to make queries to our server and it's it's really really cool if you guys have never used it you'll see it's it's a it's a very handy tool so let's see down here we want to listen on a certain port I'm gonna actually put I'm gonna create a variable called port and I'm gonna set this to process dot E&V dot port so we'll set it to the environment variable so when we deploy to Heroku if we do it'll read that or port 5,000 in development okay so we're gonna be listening on 5,000 so in our app dot listen let's put in our port variable and then I'm just gonna put an arrow function just a console dot log lets console log put some back ticks and we'll say server started on port and we'll use our variable syntax handle safe port okay so yeah that looks good let's save that now the schema obviously we need to create if I try to run this let's say npm run / let's see what it says here yeah so it's just telling us that schema is not defined so up here let's say Const schema and we want to set this to require a file so dot slash it's gonna be in the same directory called schema our schema J s so we have to create that file so schema Dodge is and this is basically where all of our graph QL stuff is going to go so there's a lot of different types that you can use with graph QL for instance there's the graph QL object type which is like our launch our launches will be an object type our rockets will be an object type if you were creating a blog your users your posts these would all be graph QL object types so let's bring that in we're gonna say Const excuse me graph QL actually if we do this actually a number I don't have that extension installed so we'll just say cons to graph QL object type and we want to bring that in I want to bring that in from the actual graph QL module okay now let's see them try it I'm just trying to think of the best way to explain this so we're gonna have two basically two types or two object types two resources that's going to be launches and rockets so let's create our launch type so we want to just create a variable I'm gonna call it launch type and we'll set this to new graph QL object type okay now inside here we put in an object that's going to have some key value pairs so we want a name which is going to be launched okay that's going to be the name of our type and then the fields okay now fields we're actually going to put an function here and we're gonna go like that all right now each field that we have is going to also have a type okay and it could be a string integer it could be another object type it could be a lot of different things now I think now is a good time to look at the SpaceX API so we want to go to the github page here see so SpaceX rate REST API so this is like these are the endpoints this is to get the latest launch this will only give you one object which is the latest one which is flight number 69 you can see all the data that they give you like all types of stuff so if you wanted to make this a really extensive application you could I'm just kind of giving you the the building blocks I actually want to go let's see I think I want to go to the main site yeah the docs and over here you can see that we're dealing with launches so this gives us like all the fields and it gives us the endpoints and all that there's other stuff like like payloads and we're gonna deal with rockets but like roadster there's just all types of data from SpaceX that you can deal with capsules cores so you could build a pretty extensive application of course it would probably be read-only but a lot of data a lot of available data so we want to make a get request to this endpoint that's going to be our data so I want to put in here's a sample response over here I'm just gonna click on this and shows us all the stuff that's available now I only want a small portion of this data so I want the flight number that's gonna kind of be our main field like the ID and then we want the mission name we want the we want the launch year I want the launch date I want the rocket so right here from the rocket I want some fields from here so what I'm gonna do is I'm gonna make rocket a separate object type okay so we'll have launched it love launch type and a rocket type I also want the success value which is or is it right here launch success so those are really the only fields I'm gonna be using but of course you could take out any of this stuff and use it in your in your application so as far as fields let's do flight number okay so flight number and we need to actually give this a type so we want to say type and this is going to be an int okay so an integer which is basically a number so I want to bring that in from graph QL as well as as well as the object type so we want to wrap this in curly braces and let's put a comma here and let's bring in and you'll see we'll get an vs code will now get a pop-up that has all the options we want the int int option okay so for the type we want to say graph QL int and I'm just gonna go ahead and copy this down a few times so we're gonna do two three four five six so in addition to the flight number I want to get the mission name now mission name is going to be a string so we want to bring in graph QL string which is right here I want to bring that in and we're going to change this from int to string okay the next thing that I want is the launch year watch here is is actually going to be a string as well and we want the launch date local and this is also going to be a string and we want the success watch success okay and this is actually going to be a boolean so we have to bring that in okay any type we want to use we have to just bring in up here so let's say graph QL boolean I'm gonna save it I have prettier installed so it's going to just format it like this make it more readable and let's change success to a boolean okay and then the last thing I want is the rocket okay so we'll say rocket accept rocket is not going to be any type that we bring in like a string or a boolean it's going to be another object type so it's actually going to be called rocket type so let's say rocket type which we haven't actually created yet okay so let's go down here and this is how you create relationships within your schema so let's say rocket type and we basically want to do the same thing we did here I'll just guess I'll just copy this and then we'll change this to rocket type okay so it's again it's going to be an object type and the name is gonna be rocket and then as far as fields we only have three fields so let's get rid of those and let's see so first one is gonna be the ID rocket underscore ID which will be it's actually a string because if we look at let's see rocket see the ID see how it's a string it has quotes the flight number is an int by default so that's what I wanted to use there so let's go back and set that to a string and what else do we have we have the rocket name which is going to be a string and then we want the rocket type which will also be a string so those are our basic object types that we want now you could take this further and you could do like whatever is available with the data like second stage and the stuff a lot I don't even know what that means ships like there's all types of data and obviously if you were working with your own database like MongoDB or something like that you would structure it around that data okay we're using a third party API in this case so of course we need to kind of match the fields that the API gives us so now that we have our types we need to create something called a root query okay and in this root query we can create basically kind of like like end points that have resolvers that will resolve our data so let's say root query and the way that we do this is create a variable called root query and let's set this to st. it's going to be an object type so new graph QL object type just like the fields above it's gonna have a name and we're gonna call this root query type all right now fields is gonna be an object and the first one I want is launches okay so launches I want this to basically get a list or an array of all of the launches okay so this is going to be what's called the graph QL list so we actually have to bring that in so you can see there's a lot of different things that we need to bring in here so graph QL list so we want to do launches give it a type okay you know the type is going to be a new graph QL list and we need to give this list a type which is going to be a launch type okay now next field is going to be what's called a resolver so we want to say resolve and now this is actually a function and we want to pass in two things parents and args okay now inside here is where we actually get our data and it could be it could be different depending on what your data structure is or where it's stored like I said ours is a third party API so we need to make a request to get that data so we're gonna use Axios that I install it already I forget yes I did okay so I'm gonna use Axios but you could use something else if you wanted to use like fetch or I don't know any of the other ones super-agent something like that I tend to use Axios for for all my stuff for all my requests so let's bring that in say Axios require alright so we'll bring that in and then we want to go down here and we just want to return our data so what we're gonna do is say return Axios dot get and we want to put in the SpaceX end point which is let's go back here which is I believe it's just this without the latest yeah so we want this just slash launches so let's grab that and put that right in there okay now this will give us a promise back so we're gonna do dot then you can use a sink of wait if you want I'm not gonna bother though so res and let's say res dot data okay so that's the gonna give us back all the data and that's what we're resolving from this launches okay from the we're gonna get a list so we can actually now test this okay well there's one more thing we have to do when that's explored so we have to say module dot exports and we here we want to export the graph QL schema which we also have to bring in ok so we want to bring in graph QL schema and we'll say module exports new graph QL schema ok and then what this takes in is an object and it's gonna take your query which is gonna be our root query ok would also take in any mutations if we had any mutations and again I have that five-part series on creating a graph QL server and we do do basically a crud server with mutations so if you're interested in that I would recommend that that that series so that should be it let's save this and go down here looks like we have no errors so now our server is running I'm gonna go into our browser and I'm gonna go to localhost and the port that we ran that we created this song which is five thousand and then we want to go slash graph QL so this is the graphical tool that I was talking about and you can disable this if you go to where we've created our graph QL endpoint you can set this to false if you want okay if you if you want to disable this and you might want to do that in production so let's let's actually try to make a query now because remember we have the launches we should be able to get all the launches so I'm going to get rid of all these comments here and the way that we write our queries is I think very easy and elegant so we just want to open up some curly braces excuse me I'm gonna actually just type in an L and it will already look and see that we have a launches type or a launches query so I'm gonna go ahead and select that and then we want to open up another set of curly braces let me make this bigger I want to open up another set of curly braces and here's what we want to request the basically the properties are the data that we want and that's what's great about graph QL is I can get anything I want and I don't have to get every it's not all or nothing like with rest so as you can see I typed in flight in flight number pops up because that's one of our fields so if I wanted to get just the flight number I'll go ahead and press play and as you can see it gives us this data object with this launches list with all of the flight numbers okay so if I want to get the mission name I'll go ahead whoops I didn't mean to save I want to press play and I'm gonna get just the flight number in the mission name so I can pick and choose what I want so if I want everything I can do that I can put launch year launch success whoops launch data local our date local so if I go ahead and do that it'll give me that stuff if I want the rocket so say rocket and remember in our in our schema rocket is of another object type of rocket type that has its own fields such as rocket ID rocket name and rocket type and of course I could just pick and choose which of these that I wanted to fetch so I'll go ahead and run that and there we go we get our rocket object with all of the the data for each rocket so you can see how cool this is that you can just request certain fields you know when you make a get request with rest to your to whatever data you're querying you have to get all of it and then you have to deal with you know pick and choose what you want to use from it so let's go back to vs code now that we know that we can get all the all the launches and let's go ahead and add to our route query a launch field so that we can get a specific launch instead of a list of all of them okay so let's see under launches which ends right here we're going to put a comma and we'll just simply say launch okay and for launch I want to add a type okay so type now this is just gonna be a single launch so we don't have to use graph QL list we can simply just say launch type okay since it's a single one and then it's gonna need to know which launch to get okay so it needs a parameter or an Argand argument when that's what this args is right here so for args we want to put in here what we basically want to use as the argument to find the launch and we want to use flight number that's basically our ID a lot in a lot of cases this will be your ID but we actually are using flight number so we need to put flight number we also need to give it a type here and the type is going to be graph QL int ok then we want to write our resolve okay so we'll say resolve and let's say parent args and here is where we want to make our request to get that single launch now if we look at the SpaceX API I want to go back to the docs and look in the launches so that's what we just made a request to to get the list of launches now if we if we go down here let's get one launch this is what we want we need to put in the flight number right so let's copy this let's go back here and do the same thing we're going to return Axios dot get and let's paste that in now instead of this here you know what let's use back ticks so that we can use a template literal here we can use a variable so we can put a variable in like that and excuse me we can get the flight number from args dot flight number and that will give us the flight number okay so let's tack on a dot then and we just want to resolve the data so braz dot data oops no parentheses there and that should do it excuse me I'm losing my voice so this should be able to get us a single launch by the flight number so let's head over back to graphical and I'm going to just wipe this I think she'll just reload here okay now let's get rid of all these comments now to do this same thing we want curly braces here go to the top and we want to say launch okay and you notice that both came up launch and launches but we want launch and in order to get the specific launch we need the flight number so that's going to go in here so we want to say flight number and let's say we want the one with flight number two okay they start at one they go up to I think 69 and then we'll put our curly braces and again we can specify what we want so let's say we want the mission name and I'll press play here and we get demo sad okay so that's that's flight number twos mission name if I want to get the launch year I could get anything I want here launch here launch success if we go ahead and run that and since this is a launch its we also have the rocket type right so we can say rocket and let's say we want the rocket name and play and there we go we get Falcon one alright so hopefully this makes sense guys what I want to do now is I want to create a couple other queries for in our route query for rocket and rockets we're not actually going to use this in our react Apollo application but I want us to be able to query rockets if we want so let's head back and to get the rockets and the single rocket we can just copy these two launches and launch because it's very similar so we'll copy those and then just put a comma here and paste it in and then we'll change this to rockets and then it's going to be a list but it's going to use the rocket type instead of the launch type and then the endpoint is just gonna be rockets okay so that handles that and then to get a single rocket we want to use a rocket type we don't need it to be a list because it's only a single rocket and for the arg we're going to use the eye whoops we're going to use the ID which is going to be an int and then down here we just want to change this launches to rockets and then args dot ID because that's what it's going to use all right so i'm gonna save that and this will allow us to query raw a list of rockets and also a single rocket we're not gonna actually do that in our front end react Apollo app but I do just want it available I'm just in case and if you guys want to add to the front end app you can do that but yeah so I think we're pretty much done with our graph QL server so again we're not doing any mutations and mutations are fairly easy they're they're not much different than making queries so again if you want to check that that other five part series out I'll put the link in the description so in the next video we're gonna start on react okay we're gonna start on our client which is gonna take more time than it did to set up our server I could have just started off with just saying all right you know clone this server and then we'll get started but I wanted you guys to at least see how we can create a simple graph QL server and connect it to a third party API and so on alright so I will see you in the next video

Channel: Traversy Media

Views: 198,971

Keywords: graphql, react, react apollo, graphql react, apollo graphql

Id: SEMTj8w04Z8

Length: 35min 0sec (2100 seconds)

Published: Mon Nov 12 2018