GraphQL With React & Apollo [2] - React & Apollo Setup

hey guys welcome to part 2 of our graph QL react the paolo series in the first video we created our graph QL server which interfaces with the space X REST API in order to get us some data to work with so we created you know our schema we created our root query we can make queries through graphical but now we want to actually add a front-end to this application but before I do anything before I setup react I just want to initialize the get repository so I'm going to go ahead and just say git init ok make sure you if you're going to do this along with me make sure you have get installed and you may have been making commits all along I probably should have made a few earlier but it's fine so I'm going to say get let's do add actually before I do that I just want to create a file called dot get ignore okay so this git ignore file basically anything that I don't want to be committed I want to put in here so I'm going to put my node underscore modules folder and then I also don't want to commit the client ok which is going to be where our react app sits and the reason I don't want to do that is because we're gonna build out our react application into our public folder of our server when we get ready for deployment ok so if I decide to do deployments so let's save this and now we can go ahead and finish up here and just say get add I'm going to add all and I'm going to get commit dash em and put a comment in here I'm just gonna say created graph QL server alright good so now that that's done let's go ahead and install react so we're going to use create react app I don't have it installed globally so I'm going to use n px and say create - react - app and I want to put it in a folder called client okay we're using create react app version 2.0 which was released of about a month ago or so I believe so as you can see it's creating a folder called client this is where we'll be able to run our dev server a react dev server and stuff like that what I want to do though is install something called concurrently and the reason for that is because I don't want to have to run one command to run our back-end server at port 5,000 and our front-end server at 3,000 I don't want to have to do that I want to just have one single command that will run both the front and the back end so that's what concurrently is used for okay so we are going to install that okay so that's all set and if you look in client you can see we have our it's just our standard react application and let's clear this up and before I get into react like I said I want to install concurrently so let's say npm install concurrently and if you've taken my burn stack front to back course then you probably have dealt with this before alright so now that we have that installed let's go to our our servers our server is the root okay so the web server j/s is and our schema all that stuff let's go to that package dot JSON file and let's create another script here called client ok so to run our client we want to run NPM start from within the client folder right that's how you run it when you use create react app and you want to run the dev server on 3000 you do NPM start right so we want to do NPM start and to run that in the client folder we just want to attach dash dash prefix and then client so that we'll run it in the client folder now as it is now we could do NPM run server and NPM run client and run both the front and the back end but like I said I want to do just one command that's where it concurrently comes in so have a script called dev okay so in dev we want to run concurrently and we actually need to use double quotes here so we need to escape we need to go like that with a backslash and do npm run server so that will take care of running the server let's put another backslash quote and then a space and another backslash backslash quote and then we want to run our clients so NPM run client ok another backslash quote so it should look just like this okay now let's save this and let's go ahead and in our terminal we're going to run NPM run dev and now this should run both so you can see it started 5,000 now it's starting 3,000 which is the react app and it's gonna open it up in the browser okay so if I go back to vs code you can see 3,000 is running 5,000 also running if I wanted to use graphical right now I could I could go to localhost 5,000 / graphic ul and you can see my servers running I can query my data and that's that alright so now let's head back to vs code close that up and now we're going to be working in our client folder okay so this is our react application so in source let's so let's clean up a couple things in the app CSS I'm just going to get rid of everything I'm going to keep the file but just get rid of all the styling I'm going to get rid of this logo SVG I'm actually going to use a PNG file for our logo which is the SpaceX logo will delete that in our app j/s we're going to get rid of the reference to the logo and we're going to get rid of the header so basically everything within this div we're going to get rid of get rid of that and we'll just put an h1 for now and let's just say SpaceX and say if okay so now everything should be working good now as far as the styling like I said we're gonna use bootstrap but we're gonna use a custom theme from boots watch so I'm gonna go to boots watch comm and I'm gonna use this cyborg right here this theme if you want to use something different you can if I go to download it'll give me the file now you could download this and install and you know save it locally but I'm just gonna grab the link here and use that so I'm gonna copy that and if for some reason it doesn't work if you're watching this you know later on just you can just use your regular bootstrap all the classes and everything are obviously the same so we're just going to go to public index.html and I'm gonna get rid of these comments here and put in a link and just paste in that that boots watch link to the cyborg theme okay you can get rid of these comments and then I'm gonna change the title here to SpaceX launches and save okay so we'll close that up if we take a look you can see that now we're using the cyborg theme now we're we're going to use the SpaceX logo if you want you can search for our space I think I searched first let me just see and I know a lot of you don't care about the UI and stuff like that but I like to build something that looks somewhat decent I use this logo but I did crop it to like that not you know not as big as tall so you can go to the repository and you can get the exact image I used or you can crop it yourself or you can not use an image at all it's up to you but I'm going to go to let's see this is the current project I'm gonna go to client and source and I'm just gonna bring over the logo okay so I'm gonna paste that in there and then let's see you can close that up let's go back to our app j/s you can see I brought the logo.png in now I need to just import it so I'm gonna say import logo from dot slash logo dot PNG and this is gonna go you know what we'll just replace the h1 with it so put an image tag source is actually going to be logo that's what we brought it in as say SpaceX for the alt and I do want to add some styling so I'm gonna say style make sure you use two curly braces for styling I'm just gonna give it a width of 300 let's do a display:block and let's do margin auto just to push it in the middle save that and there we go cool so now let's let's start to deal with Apollo all right now we're gonna have a couple different components so I'll create inside of our client source I'll create a folder called components and we're gonna first deal with a component called launches okay so let's create launches j/s now in order to deal with Apollo we need to install a few things so if we go to the Apollo website I think it's Apollo graph QL comm I don't know and I need spell Apollo right let's just search her Apollo client okay so yeah it's actually yeah Paulo graph QL column just make sure you spell it right and then we're in dock slash react so if we go should see essentials over here on the Left essentials and then get started it's gonna tell us what we need to install so we need three things we need apollo boost which is the package containing everything you need to set up the Apollo client this is basically separate from react and then react Apollo is the view layer integration for react so it brings the two together it's kind of like the react Redux package if you've ever used Redux because Redux is a separate thing from react but then you have the react Redux package that binds them together and that's kind of what this does and then graph QL is so we can parse our queries so we need these three things so we could just copy this we don't actually need the - save anymore and I'm just gonna let my server run and just open up a new terminal okay we'll go ahead and what I almost made a big mistake and they almost installed it on my server so we need to CD into client make sure you do that and then go ahead and run it okay so once it's installed it should be in the package dot jason of your client folder not your server so it should show up in here yep there we go okay so now that that stuff is installed let's in our app J s let's bring in what we need to bring in from Apollo okay so from both Apollo boost and react Apollo so what we need from Apollo boosts is the client itself so we're gonna say Apollo client and we want to bring that in from Apollo - boost okay and then we also want to bring in our provider so we want to say imports Apollo provider actually this should be in curly braces so Apollo provider is actually from react Apollo so this works similar to Redux if you've use Redux before you know that you have a provider and you wrap your your main component in it or your your app J your app component with it and you pass in your store well in our case we wrap the probe up we wrap it in the provider and we pass in our clients so we need to create a client so we'll say new Apollo client and we just want to pass in an object with one property here of URI okay so our URI is gonna be HTTP and we can add a proxy later before we if we're going to deploy but for now we're just going to do HTTP and let's say local host port 5000 and we want to make sure we hit that graph key well route because remember in our server we have one end point of graph QL and that's what we want to hit and then we can deal with anything that's in the schema so now that we have our client let's go down here and let's wrap everything in the return in our Apollo provider and pass in the client that we just created okay I just want to add an extra div in here all I guess doesn't have to be extra I just want a container so I'm going to change this app to container just to push everything into the middle and it should look like this just the logo really and now we want to deal with our launches component in closed server so launches is where we actually want to make our query to graph QL I'm just gonna minimize this a little bit so let's uh let's create a class-based component I have an extension called es7 react graph QL react native snippets it's kind of a long name but it's right here and it's very helpful when you want to just generate code really quickly so I can do RCE tab or enter and it'll just generate a class-based component for me so I want to bring in a couple things up here I want to bring in something called gql which is used to actually make the queries and we want to bring this in from part of graph QL which is actually graph QL - tag and then we will also want to bring in a query component so we want to pull that out of react Apollo all right now query we're going to use down here in the render but gql I'm actually gonna do the query or create the query up here okay you could put it down here as well but it gets kind of messy so it's it's much cleaner to just create a variable I'm gonna call it launches underscore or query we want to set that to gql in the way that we do this syntax is to use backticks okay and then inside the backticks is where we want to put our graph QL query just like we did in the graphical interface remember we went like this and then we said launches and then we can define the fields except I'm just going to label this query launches query like that okay and then we can decide the data that we want so we want the flight number we want the mission name we want the launch underscore date underscore a local and we want the launch underscore success boolean so that's the the that's the data that I want okay I could get anything that you know we put in our server but this is all we need for the launches component so down here let's put in an h1 and I'm actually going to give this a class of display - 4 and display - 4 and let's give it a class of my three which is margin on the basically top and bottom the y-axis all right and we're just gonna say launches ok if we save that I mean that should show up well actually no it shouldn't because we haven't brought it into app KS yet so let's actually just do that real quick so right here I'm going to say import launches from dot slash components slash launches and then let's just stick that right under the image like that and save and there we go okay so let's continue on here we have our query created with gql up here so right underneath the h1 let's put in query and it's going to take in a prop of query and we're going to set that equal to launches query now inside here we want to put some JavaScript so we're going to put our curly braces and we want to put an arrow function here basically so let's put in I'm gonna go like that and inside here I'm gonna use a little D structuring this is going to give us some stuff to work with we're gonna take a loading error and data okay so it's gonna give us these three things and loading is going to be a boolean so if it's in the process of fetching the data it'll be true and then once the data is received it'll be false so we can use this to put a spinner in or a loading just loading text or whatever and then error if there's an error this will give us whatever is wrong and then the data will obviously be the data that is fetched all right so let's go in here and let's first test to see if it's loading so I'm going to say if loading then I want to return I'm just going to do an h4 with the text loading like that you could put a spinner in there that'll make it look a little neater you know but it's fine for now and then if there's an error then I just want to console dot log the error okay and then if there's neither of those then I want to just return for now I'm just gonna do an h1 and I'll just say I don't know test because I just want to test to make sure to see if we're actually getting the data so right above the return I'm gonna console dot log of the data just to make sure it's coming in before I I move on and display it in the UI so let's save this and let's go back so we see test in the browser let's open up our chrome tools and what's this okay so this is actually expected it's giving us a four oh five method not allowed and it's giving us this act no access control allow origin basically because we're on localhost 3000 we're trying to make a request to localhost 5,000 our server is not letting us so what we're gonna do is install something on our server called cores which will enable us to make requests from a different domain now before you redeploy we'll add a proxy that you know so we don't have to use these different ports and so on but for now let's go to our server and install cores so let's see we're in the client folder down here remember I still have my server running in this terminal okay both both five thousand and three thousand but I'm gonna go into let's see out of the client folder so right now I'm in my server so if you do an LS you should see server j/s and I'm gonna do an NPM install cores okay so once we do that this is very easy to implement well for what we're doing we can just go to server J s and let's bring it in okay so we want to bring in cores and then all we have to do let's say allow cross origin and we just need to do app dot use and then pass in cores and then some parentheses alright so we'll save that and let's go back reload and there we go so now we're not getting that error anymore we're getting launches which is an array of 90 objects so if we take a look at the first one flight number one we get the date we get the success and we get the mission name so notice we're only getting the stuff that we requested from our launches component so this stuff right here okay so that's what's great about graph QL again is you can just get what you want so now that we know we're getting that let's get rid of the console log data and we want to display this okay we actually we need to loop through it or map through it and display each launch now I'm actually going to have a separate component for each launch called launch items so in components let's create a new file called launch item dot j/s okay and then what we'll do is we'll bring this in up here port launch item from and it's dot slash launch item okay now we have to loop through or better yet map through the launches and we can do that with this data variable that we have so I'm going to in this return let's see should we use you know what I'm gonna use a fragment here we don't need a div so we could do like react dot fragment but what I'm gonna do is just bring in fragment up here and then we can just say fragment and fragment is just kind of like like a dummy Dom element it's not going to actually show up in the in the Dom in the browser but we can use it to wrap our stuff like this now we want to loop through the data or map through the data and then output the launched item component okay we want to pass the data into that launch item component so this return right here let's get rid of this h1 and let's make this a fragment and inside here let's see we're gonna put in our curly braces here and we're going to take data dot launches because remember inside data which we get here from our query there's an array of launches and we want to map through this and we want to let's call each one launch when we use an arrow function here and for each launch we want to render a launch item component so launch item and then this is going to take in a key so for the key we're gonna use let's say launch dot flight number okay your key should always be a unique value obviously and then the data itself we're gonna put inside launch okay so we're just passing in each launch into the launch item component for our displaying so let's head over to launch item and we're gonna use a functional component here not a class so I'm gonna do our CF tab oops I don't know why it does that sometimes the heck our CF tab there we go so in this in this component like I said it's it's just used for displaying the launch that's passed into it so let's try let's let's create well let's just check props because this is how props are passed in and then we'll go ahead and console dot log and I want to check props dot for the return I'm just gonna say test and we're gonna save this and go back to the browser and now you'll see that it just renders tests over here but in the console it's it's logging each launch that we passed in so we know that we're getting that data okay which is good now instead of having to say props dot launch what I'm going to do is just use a little D structuring in here so we want curly braces and then we're gonna say launch some other curly braces and then just create variables from here like flight number and mission name launch date local and launch success okay so now we should be able to just use those variables now in the return I'm going to use I'm going to style this with bootstrap so I'm gonna say return let's do div with the class name let's do a cards we use bootstrap cards we want card and card body and let's do a margin bottom three just to push them down and inside here I'm actually going to use the bootstrap grid so I'm going to put a row and let's do a nine column so we'll do call - MD - nine and then let's do a three column so call - MD - three and on the nine column we want to put an H four and let's say mission and then we want the name of the mission so we can simply get that with mission name which we brought in from up here that was passed in through props now as far as the color code I'm not going to do that yet we're going to do that probably in the next video but I just want to get the basic data here so we have the mission name let's do the date so underneath that we'll put a paragraph and we'll say date and we'll do our launch date local I'm gonna use something called moment later on to format the date a little nicer but for now like I said we just want to get this displayed and then I'm gonna have a we're gonna have a button to to the launch page here now we haven't installed react router yet so for now I'm just gonna put a button of course when we use the router will have to use a link but just just for looks I guess right now we'll do button class name is gonna be BTN BTN secondary and let's just say details when I say launch details okay so let's save this and see if this actually renders and it does good alright so I think this is a good place to stop we did quite a bit here we of course installed reacting and concurrently got the server's running together we integrated Apollo the Apollo client the Apollo provider we created our first query to get the launches we rendered out all the data from that query so we did quite a bit in this video and I know these videos are kind of long some some creators will do you know 5 10 minute videos I like to key to make them a little longer I don't know it's just it's just my style I don't want to have 20 30 videos in one series so hopefully that's okay so in the next video we're gonna do a few things we want to make you know the red and green if they're if they're successful or not we also want to implement to react router version 4 and we want to create our launch page okay with with some extra details so that's it guys I will see you in the next video

Channel: Traversy Media

Views: 70,204

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

Id: -XwkFm5a9lw

Length: 29min 38sec (1778 seconds)

Published: Mon Nov 12 2018