 Hey, what's going on YouTube today? We're going to learn about using Apollo to connect your react app to a graph QL API Let's check it out Okay, so to create the first thing we need to do is create our application In octa so we go to applications when you log into your dashboard click add application We're going to choose single-page app because we're creating a react app We're going to give it a name in this case Apollo demo We're going to want to change the port to 3,000 because that's the default port where React runs I'm removing the implicit just because We're not using the implicit flow we're going to use the authorization code with pixie flow So once you've got localhost in your 3000 on your base URL Localhost 3000 slash callback for your login redirect and localhost 3000 if you're a log out All the rest of the stuff should be fine Authorization code will be the default yet done and You'll see over here the client ID and the fact that we're using the proof key for code exchange or pixie for The off code with pixie flow So let's head back to the code Okay, and once you've got your application set up I'm going to go ahead and open a terminal window Yeah, we're going to open the Terminal window here, and we're just going to install a couple of Things that we need like bootstrap And install 4.5.3 That's the latest as of this video also react bootstrap At 1.4.0. Yep, that's the latest as of this version So we get those two installing there's a couple of other things we're going to need to install like The octa auth session or Auth.js library at 4.0 4.4 as of this recording We're also going to want to install the octa react SDK This will make authentication with the octa even easier React and that's at 4.1. We're also going to install the Apollo client at 3.3.4 And the graph ql library because the Apollo client's going to use it 15.4.0 Install those two another package. We're going to want to install is react router dumb It's at 5.2.0 and once that's installed And the last thing you want to install is the dot ENV library Which allows us to create a properties file that we can then use as if they were environment variables And Envy That one's at 8.2.0 All right now that we've got all of our dependencies installed Come on back over here. We're going to create a new file on the root called dot ENV And we're going to take full advantage of the dot ENV file For the react app which we get our client ID in our octa domain From the application. We just created there And the client ID for the application that we created for the Apollo demo And we get our client ID and plug that in and now that's done So the next step in this parade is going to be Changing the app.js file right in here. We're going to replace all the code Some pre-typed code so that you don't have to watch me type it all and we brought in the browser router from react router DOM The app with router access from another file that we're going to create here in a minute the bootstrap CSS the Apollo client in memory cache from Apollo client and the Apollo provider We're going to create a new Apollo client that's going to be hitting our API for the SpaceX landings And we're going to use the in-memory cache from the Apollo client to cache those results And then basically we've just got we're going to wrap Apollo provider With that client around our router access So the next thing we need to do is that app with router access file So create a new file called app with router access Dot to six and we're going to bring in The routes So here's our routes. We're bringing in route from react router DOM security stuff from octa react like secure route and the login callback and the octa off object from octa off JS as Well as some other pages which we haven't created yet, but we're going to read in those That base URL I'm going to add OAuth to slash default because that's the endpoint for the authorization server at octa Then the octa client ID and then the base URL was slash callback for our login callback Then we've got our basic path. It's going to display our home page our secure route which is going to Display the blast off page. So you have to be logged in Using this octa off object that we created up here with that issuer client ID in the redirect We're going to wrap that in security. We're going to say that secure route has to pass the octa authentication test and Then we're exporting it so that we can use it over an app.js, of course The next thing we're going to want to do is in the source directory We're going to create a folder called pages We're going to create another one called components as well. We're using a minute. Okay, and the pages folder We're going to create a new file called home dot JSX and The home dot JSX file looks like this a lot of its basic stuff We're got links and redirects from the react raddom so we can use those The use octa off react hook. We're going to add so we've got the off state We're going to pull out of that into a variable that we can use so we can say are they authenticated If they are then go ahead and redirect them to the blast off page otherwise display this page here and it's got a Link to the Apollo client and graphql data Stuff as well as if you already have an octa account you can log in And then just some basic text down at the bottom of the page So now that we've got the home page created We're going to create our blast off page So in our pages, we'll create a new file called blast off dot JSX of course and the content of the blast off JSX file is going to list out all the launches for From SpaceX So here we are we're going to be using a couple of components that we're going to create here in a minute but the big things here are We're initializing some state We're going to bind this to our on history selected and our on return to histories functions So we can do this and we can set state and then on this on the loading. We're going to show the loading please wait and When this is done We'll have the show history that we can show and then the container will show all the histories so this is just the on return to histories from there and This is on a history selected So we can show a list of them and then we can show a single specific one once you so if you select one Okay So now that we've got that we're going to need those two components that we created So the first that we are using here. So the first one we're going to do is histories plural JSX and Histories dot JSX is going to be the guy that goes and gets our Our data from the SpaceX launch and displays that in the component. So here's our the main stuff here So we're getting GQL and use query from the Apollo client and we're going to create a Jeff graph QL query here This is I want all the histories with the ID the details and a link to the article Flight an ID and mission name Okay, then the next thing we're going to want to do is Use that query and pass that histories query to it So we run the use query and we're going to get loading error and data out of it So if it's loading, we're just going to display this loading image Otherwise we're going to go ahead and do a mission name details and articles. So we've got our We're going to map each one of the histories out to a table row That shows us the flight or if it doesn't have a name We can display unnamed and then we're going to have a link to referring to read that article now To read that article we're going to create the history dot JSX component singular and That one's going to do much of a similar thing But just for one particular launch So we'll go ahead and put this in there same thing. It's going to create a graph QL query here It's going to get the history With the ID that's been provided and it's going to get the data details the event date any UNIX time The flight the rocket and the rocket name for the rocket the launch date of the flight the launch site site name of the flight the launch success of the flight and the event date in UTC We're going to run this use query and we're going to pass a variable to it called ID That's the one we got from the URL So again if we're loading we'll just show this loading image if there's an error will show the error Otherwise we'll go ahead and display Whether or not the launch was successful or whether it failed We'll also display the Return button to return to history so we can use on return histories. Remember. This is a component that's going to be housed inside of the blast-off page and The on history selected will be fired when you click that link there And then we'll just display the launch time the event date the Whether it was successful The label for it the launch site the rocket name the details Because we specified all the information that we wanted to get here Which is kind of the beauty of graphql in a nutshell is You can provide a query that gets you just the information you want to display Finally, we need to add a header So in the components folder, we'll go ahead and add a header dot JSX and the header dot JSX is going to be our thing that loads our Menu and login buttons and things like that for us. So there's nothing graphql related going on here it's just going to say Get the octa off state and get an octa off object and If they're authenticated then go ahead and show the log out button if they're logged out go ahead and show the login button Otherwise show some basic nav stuff here and that's just our header That gets shown on the home page Okay, now that all that's installed we should be able to do an npm run Start or just npm start Run this and then over in our main window. We can see the application working And now we can see our application working we can go ahead and log in here I may be logged in another tab. So yeah, I was already logged in on the other tab. So it didn't make me log in If I close this other tab and go ahead and log out Maybe it'll force me this time. Yep And then I go ahead and log in with my username password And it'll go ahead and load this and then I can choose one of these and read the article about it It was successful's Falcon 9. I can return back to the missions and I can log out. It'll take me back to the home page. All right. Hope you enjoyed that I hope everything worked for you if it didn't make sure you leave a comment down below if you liked The video make sure you give it a like and if you like this type of content make sure to subscribe and hit that little bell icon We put stuff like this out just about every Tuesday and Thursday So you'll get notified when new video videos come out Thank you for joining me today, and we'll see you next time