GraphQL With React & Apollo [3] - Finishing The App

hey guys welcome to part three of this react Apollo graph QL series now obviously we're building an application here it's a very small application but it's still in happen I want it to do certain things that don't have anything to do with graph QL on Apollo so I hope you can appreciate that I know that it's added time it's added overhead to the tutorial but again I want to have a product in the end as I do with most tutorials rather than just saying oh this is how it works see you later all right so there are some things we want to do here like I want to make each of the titles color-coded so if it was a failed mission I want it to be red if it was successful I want it to be green so we're actually gonna use a package called class names to be able to do that so let's jump into vs code here I'm gonna go to my terminal and it's very important that you're in your client folder your react app right now I'm in my server as you can see so I'm gonna see the into client and I'm gonna do NPM install class names and then we might as well install moment which is to format time and then the react moment package might as well install those as well so you don't have to worry about it later and class names we're going to be using it in the the launch item component okay so if we go to launch item J s and the mission name is right here in the h4 that's where we want to add the class so let's go ahead and import class names okay I'm going to use camel case here and then we're gonna say from class names all lowercase and the way that we do this it's pretty easy if you've taken my react course or my myrn stack course we did this there basically we're gonna surround this in a span the mission name and we're gonna give this span we're gonna say class name equals and then we're going to set up some curly braces and in these curly braces we want to use class names okay a camel case and inside here we want to put some curly braces and we can put a class a CSS class like text success which is green and bootstrap just basically makes a text green and we can put a colon and say we want this class to kick in if launched underscore success is true okay and then we'll put a comma and we'll say we want the class text danger which obviously is red if you've ever used bootstrap which I'm sure you have and then we can say what we want to say if not launch success then we want it to be text danger so let's go ahead and save that let's see if that works okay and I have my server running in my other term my other tab in my terminal by the way okay there we go so now each failed mission is red so it looks like they had some trouble in the beginning here and then most of them are green there's one right there but we have our color code now I do want a little key up at the top just letting people know that the red is means it wasn't successful and the green was successful so I'm gonna create just a very very simple component called mission key dot j/s okay so this mission key j/s is going to be a functional component I'm gonna do our CF tab I don't know why I keeps doing that it works sometimes sometimes it doesn't so mission key this is gonna be very simple we're gonna have a div I'm actually gonna make some have some margin here so we're gonna do class name and let's do my 3 so margin on the top and bottom it's just a bootstrap class and we're gonna have a paragraph with a span and we need to use wait what are we doing yeah just we'll just put a class of px - 3 which is padding on the left and right and then we want margin right - just a the text over basically the span is going to be a little square with the color so it's gonna have the green color so we want to use BG - success which will make the background green so we want those classes and there's nothing gonna be inside the span tag so we can take that ending span off and then we just want to do equals success okay and then I'm gonna copy this down and what we'll do here is just change the BG success to BG danger and let's say danger not danger danger fail all right and that's it that's all we need for this this very small component so we'll close that up and we're gonna put that component inside of launches so let's import it mission key oops mission key from and we're in mission key okay we're gonna go down here right under the h1 and place that right in there and there's no props or anything we're just it's just a dumb component so let's take check it out and there we go okay so that looks good now we want to start to work with the launch page okay we want this to go to a single page that has like the rocket info stuff like that well actually you know what before we do that let's fix the date because this date doesn't look too good so we're gonna use a moment for that so this is remember launch item each one of these is the launch item component so let's go up here and let's bring in I will say import moment from and it's gonna be from react - moment and all we need to do is find our date which is right here and surrounded in moment tags okay now I want to format this a certain way so we're gonna say format and we're gonna set that to let's do year four digits month day space hours and minutes so if we save that take a look and the date looks much better all right now we're gonna need react router so let's install that make sure you're in your client okay so we're in the client folder so let's do NPM install react - router - Dom and we're gonna go into app guess once this is done okay so now let's let's import the router so I'm going to go under where we brought in Apollo and let's import browser router as router and we also want route and that's gonna come from react router Dom and let's go down to our render here and we want to wrap everything in our router except that the provider the provider is the outer most element here so we want to put in here router here okay and then instead of just plopping launches right in here like that let's go ahead and put a route and let's say we want exact oops exact path which is our home our home route slash and let's say component is going to be launches okay so we save that that should still work or not what do they do put a quote there okay so that works now for the launch component which we haven't created yet I'm still gonna add the route so let's do the path is actually going to be slash launch and we want the parameter here to be the flight number so let's say flight number component is gonna be just launched okay we're gonna bring that in up here I know we didn't create it yet but we're gonna so it's say launch from launch alright so we'll save that and it's gonna break it should yeah it's gonna break [Music] so in components let's create a file called launch Jas okay so this is gonna be a class-based component so I'm going to do RCE tab and from here just to get this working let's just do an h1 and say launch and save and now it should work again now this right here is just a regular button this does nothing so we need to go into our launch item component and fix that and make it point to the the launch page okay so let's go back into launch item and when we use react router I'm sure a lot of you know this you have to use something called link instead of using like an eighth and a tag or something like that so let's say from react router DOM and then down here where we just had this button we want to change that to a link so let's get both of those and change those to link with an uppercase L and instead of all not instead of but we want to add a two attribute here and this is actually going to have the ID in it as well so we're gonna do curly braces and backticks and we're gonna say we want it to go to slash launch slash and then the flight the are the flight number so we can use this syntax here and say flight number and that should do it so let's save let's go back and if we click one of these it brings us to launch slash and then the flight number and it brings us to the launch component so now the goal is to fetch the that particular launch from graph QL through our graph QL Express server so we want to we can close up launch item I can close up launches and we want to work in launch so let's um let's bring in a couple things up here we're going to want to bring in gql so gql comes from graph QL tag - tag ok we want to bring in our query which comes from react Apollo and let's bring in link from react router so we're gonna need that cuz I want a back button and finally let's bring in class names because I'm gonna use that in here as well so class names alright so let's create our query we're gonna go above the component class and I'm gonna say launch underscore query and remember we use gql with backticks okay that's how we make our queries and we'll call this launch query now this is a little different from launches because it takes in a parameter an argument right it takes in the flight number and you remember that from our schema if we look at our schema and we look at launch okay this is what we're kind of making a request to it takes a flight number so we want to add on to this some parentheses and we want to do money sign flight underscore number and we put a type to this okay so we want to do int exclamation and then we can proceed to put in launch which also will take some parentheses and we want to say flight underscore number is gonna be whatever that money sign flight underscore number is which will actually pass in down here in our query okay now here we want to specify the fields we want so we want flight number we want actually gonna need to call that we want mission name launch year launch success let's see I don't think we need Oh we'll get the date launch date local basically getting everything that's available we want the rocket okay now remember rocket isn't a separate it's an object so we want rocket underscore ID rocket name and rocket type so that's our query now just like we did in launches we're gonna need to use query down here but I want to get the flight number remember the flight number is in the URL if we look at our route it's going to be this right here so the way that we grab this is through our props so it's basically this dot props dot match params dot flight number that's how we can access this so let's go right in the render above the return I'm going to I'm gonna say let I'm gonna use destructuring here to pull the flight number out of the props I'm sorry out of the params that are in the props so it's actually this dot props dot match dot prints okay now we're gonna get an error if this is not an integer and it's not right now it's gonna be a string so what I want to do is take the flight number that's why I use let because I'm going to reassign it and I'm just going to run it through parse int okay which will turn it into an integer so we'll pass in flight number so that way we have the whatever was in the URL format it as an int all right and then down here we can actually use a fragment here we don't need a div okay but in order to do that we have to bring that in up here and now we want to excuse me now we want to do our query so query takes in a prop of query which is gonna be our launch query all right so oh one other thing since we have an argument this flight number we actually have to add on in addition to query we need variables okay so we need to say variables and we want to put two curly braces because this is an object I want to say flight number like that all right now the rest of this is is pretty much the same as we did before we're gonna go ahead and open up some curly braces with an arrow function okay and this is gonna take in loading error and data okay just like before and I'm gonna check for loading okay so if loading then let's go ahead and return an H for that just says loading and if there's an error then let's just console dot log the error okay and then underneath that what I'm gonna do is let's just return because again I just want to test so I'm just gonna return an h1 it says test and just console.log the data just to make sure we're getting it okay so we'll save that and let's open up our chrome tools here okay so don't worry about these just we didn't use link of class names yet but you can see we're getting an object of launch and we have all of our data including the rocket so we know that so that we know that the query is working we're fetching the data from graph QL so now we just need to display it so let's go back get rid of this console and we're gonna deal with this return so I want to display let's see let's let's actually do a div and inside here let's put an h1 actually let's add a class of display - for in a class of my three and this h1 is gonna have let's see it's gonna say mission like mission : and then the mission underscore name but I want mission the word mission to be a little darker so I'm going to wrap this in a span with the class name of text arc and span and this is why I like I love bootstrap and a lot of people on it but it allows you to just prototype things very quickly like I don't have to worry about going and doing my own CSS to make a dark text or a green or red text and to line things up and it's just it's very very handy for prototyping whether you use it in the final product or not so that's h1 let's just save this and see if this is displaying mission name is not defined so let's see what did I do wrong here mission name is not defined that's because I have not pulled it out of the data so basically I could do data dot launched mission name that'll work right but I don't want to do that I don't want to do data dot launched so what I'm gonna do is use some D structuring up here so we'll say Const and let's pull out everything so pull out mission name flight number launched what was it launched year launch success and then we want the rocket stuff now the rocket is in its own objects so we need to say rocket : and then another set of curly braces let me just save this I thought it would fix it so rocket underscore ID we want the rocket underscore name and the rocket underscore type okay surprise prettier isn't fixing this so we want to just set that equal to data launch because that's what we're pulling it out of there we go alright so we're just destructuring just pulling these values out including the rocket out of data dot launch so that way we can just use the actual variables so let's check and see and that works all right so let's see what are we gonna do next let's do our launch details so under the h1 I'm gonna put an h4 with the class of MB - three just to move things down and we're gonna say launch details and we're gonna have a ul this is gonna be a list group give it a class name of list group and let's do Li class list - group - item and this is gonna be the flight number so let's give it like a key flight number and then the data will be flight number okay and then let's just copy this down I think whoops what'd I just do I go back and forth from Windows to Mac in my I get my keys messed up so let's see we got flight number next we want launch year yeah and then we have launch successful now launch successful launch successful our launch success rather is a boolean right so we can't just display it we have to do like a conditional so I'm just going to do a ternary operator we're gonna make just shorthand this by saying launch underscore success okay so if that's true then we'll display the word yes okay else then oops let's display no okay so let's just save that and see if that actually shows up it does now the know if it's no I want it to be red if it's green I want it to be yes so again we're gonna use class names so I'm just gonna wrap this in a span all right so we'll say span span and let's add here class name equals class names and pass in some curly braces so we'll do text success if launch success is true and we'll do text - danger if not launch success so that should do it we'll save it and there we go so you can see that it's red so now we want to do the rocket details so let's go right below we have our h4 then our UL underneath the UL let's do another h4 and we'll give it a class of my three and let's say rocket details will do another ul listing so this is going to be the rocket ID we should just be able to say rocket ID because of our D structuring above and let's just copy this down two more times and we want the rocket name and we want the Rockets type there we go let's save and check it out cool now the last thing I want here is a back button just so we can go back to the homepage or back to the the listings of launches so remember we brought in link from react router we want to use that so right under the UL I'm just gonna put an HR horizontal rule and let's put in a link tag set not work so link to and this will just say back so link to slash and then let's give this a class name BTN BTN secondary so that way we can at least navigate back okay if we want to visit this rats at mission okay and you can see the yes is green good so that I mean that's pretty much it for the app in the next video we'll do our deployment to Heroku but as far as Apollo you know that's how you set it up it's it's not that difficult you create your your client your provider obviously you create you have some kind of graph QL server to connect to if you want to learn more about mutations to update stuff on the server check out the five part series that I did I'll put a link in the description and then as far as making those mutations from react Apollo it's really not much different from what we've been doing with queries so if you want to just go to let's say react Apollo mutation and if you just take a look at the docs here so basically remember how we brought in query to make our query you want to bring in mutation and you can make you need to make mutations down here okay and just do whatever it is with right here they're adding it to do but any kind of add or update or delete or anything like that you want to use the mutation component so I pretty sure that I'm gonna be doing a udemy course on this stuff soon it might not be my next course but I will definitely be doing one where we do full crud we do authentication all that stuff I wanted this to be kind of an intro to you know using Apollo with react and stuff like that so that's it guys in the next video we'll go ahead and do a quick deployment

Channel: Traversy Media

Views: 42,822

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

Id: DKzprvzbS14

Length: 28min 7sec (1687 seconds)

Published: Mon Nov 12 2018