 Hey, what's happening developers? Welcome to YouTube, the OctaDeveloper YouTube channel. Today we're gonna talk about using GraphQL from React using the Apollo client for React. So what is GraphQL? If you're like me and you've been using the RESTful APIs for a while, you know they can be a little chatty. They can be kind of hard to work with in certain scenarios. For instance, if I wanted to get a list of books and I wanted to just show the list of books and their titles and the author, I may have to make a second call to go back and get the authors for each one of these books unless the RESTful API has been set up where Books as a Resource has the authors resource in the book record that's returned. In addition, if all I wanted to do was display the title of the book and a link to the book's details page, when I got the list of books, I'd end up getting all the data back for all the books. Which can be, that can be much, much too much. That can be way more than I need. So GraphQL solves this problem by creating a thing called the GraphQL query language which allows you to query the API and get back exactly what you're looking for. And all the API person needs to do is set the GraphQL API up so that it can take in these queries on certain resources. So let's take a look, we're gonna be using, today we're gonna be talking about just consuming the GraphQL API. In a future episode, maybe we'll create one where we create a GraphQL API and you can see how that's created. But if you just need to consume a GraphQL API from React, Apollo can make it super easy. Apollo's just an NPM package that's a GraphQL client that allows you to easily query a GraphQL API. So let's take a look. First of all, if you don't already have an account, you can just go right here to the Octa page and click on sign up. It's fairly simple, the sign up process is super simple. It's a free developer account, free forever. A thousand monthly active users, unlimited authentications, up to five apps. So it's pretty straightforward and fairly easy to get started with it. Now I already have one, so I'm gonna go ahead and switch over to that. Once you get logged in, this is what your page should look like. We're gonna go to applications. We're gonna create a new application. It's gonna be a single page app. We're gonna call this React, Apollo. Okay, and we're gonna change all the URLs to port 3000 because that's where React runs by default. We're not gonna be using the implicit flows. Let's just call this just slash callback. You can call it whatever you want, but since we're not using the implicit flow, it would seem a little misleading to have implicit callback as the URL. So port 3000 still, and down here you can see we're using authorization code flow and we're gonna be using Pixi with it by default in Okta single page apps use authorization code flow with Pixi. You can still use implicit flow, but the OAuth2 working group recommends against it, so we're trying to follow those recommendations. And you see I've got my client ID and you can see it's using Pixi for public clients. Also I've got my Okta domain down here, which we'll need in a minute as well. But let's go ahead and get started with creating the application. The first thing we're gonna do is we're gonna use Npx to create the web app. Now Npx is a way for you to run NPN packages that you may not necessarily wanna install on your machine. So create React app should just run the regular NPM create React app without having to install the create React app NPN package globally to do that. So we're gonna call this React Apollo to stay the same. So this is gonna go ahead and create our React app. I may have to bend space time here to make it so that you don't have to sit here and wait with me. Okay, once everything's installed, we're gonna go ahead and we're gonna change directories into that director, into our React Apollo directory. And we're gonna go ahead and run NPM start. And here's our React app. Just like if you've ever done React before, you've definitely seen this page. So let's go back over here. We're gonna stop the React server. And we're gonna go ahead and install some things that we need. One of the first things we're gonna install is Bootstrap just because I'm not a designer and bringing in Bootstrap makes it super easy for me to get some basic styles up and running. But to make it a little bit easier to use Bootstrap, we're gonna go ahead and install the React Bootstrap package. We're Bootstrap 453 and React Bootstrap 140 as of the time of this recording. So if you're following along in the future and newer versions aren't working, it could very well be just because of a version. So some other things that we're gonna need to install. We're gonna install the Octa-Auth.js SDK, which is just an Oauth. The Octa-Auth.js is just an OAuth package that makes OAuth easy to do from JavaScript. The other thing that we're gonna install is the Octa-React SDK, which just makes doing OAuth from React easier. It has some very React-specific stuff in it and Octa-specific stuff, just to make it super easy to set up authentication with Octa. The other thing we're gonna need, obviously, is the Apollo client. The Apollo client allows us to query a GraphQL API easier than creating the GraphQL query and sending it ourselves. We can just use the Apollo client to do that and that makes it super easy. We're also gonna need GraphQL installed. And the very last thing we're gonna install, and this is more of a preferences thing, is the .env package. Now the .env package allows you to create a .env file and whatever you put in there as parameters comes out as environment variables when you're running the application. So once those are all installed, we'll go ahead and we'll create a new file. Let's open this up in Visual Studio Code. There we go. All right, so we got Visual Studio Code open and here's our application. The first thing we're gonna wanna do is at the root of our application, we're gonna create a new file called .env. And we'll be able to go ahead and set our variables that we want to use as environment variables here. That'll make it super simple. And this naming convention is Okta's React SDKs, naming conventions. They just all start with react, underscore app, underscore Okta, underscore, whatever it is. So client ID, URL base, which is our domain, and localhost 3000 being the base of our URL. So I told you we're gonna need those things. Let's go over and get them. Here's our client ID. Go ahead and plug that in. And our Okta domain, go ahead and plug that in as well. And we're gonna need these to PS in front of that. All right, now we have our environment variables set up. Let's go ahead and fix our app.js file so it's not that base react app page. So we'll come over here and go to app.js. We'll just select everything, get rid of it, and we're gonna put this new thing in. Now what we've brought in is react, as usual. The browser router as router from react router DOM as per usual. This app with router access component we haven't created yet. We're gonna create that in just a minute. And then the bootstrap CSS. And then the Apollo client and the Apollo provider. The Apollo client is just a JavaScript variable that you can, this function creates a new Apollo client. We're gonna be querying the spacex.land API. And this basically just gives us a list of all SpaceX landings. So, and we're gonna use the in memory cache for caching. Now, we've got our regular router DOM below just like you would normally see in a react app. But we've got this Apollo provider wrapper that's gonna take that Apollo client object that we just created and pass it in as the client. That basically just says this is the client and that's gonna be the API you're gonna be querying when you send a GraphQL query. Okay, so we've got, and then we've got this app with router access which we don't actually have yet. So let's go ahead and create that one too. So in our source folder, we're gonna create a new file called appwithrouteraccess. You see why I don't wanna type all this stuff and I'm copying and pasting it for my clipboard. Because I type like a two year old on Adderall. So you're welcome for me not making you watch me type. But let's go ahead and get our app with router access code. Copy it from off screen here. And again, we're bringing the react. We're bringing in route. We're bringing in some things from the Octa React SDK like security, secure route, and login callback. These are all components that you would have to build yourself if you were doing authentication. But with the Octa React SDK, you don't have to build them yourselves. And then the Octa auth comes from the auth.js library which is just a package that allows us to get your token once you're logged in to check and see if you're logged in. Things like that that you would normally need to do with an authenticated app. So inside our app with router access component, we're gonna pull the issuer out of environment variables as well as the client ID and the base URL. And we're tacking on callback and the OAuth to default because we're using the default authentication server in Octa. This is the URL that needs to be tagged on to our Octa org URL. Next thing we're gonna do is create an Octa auth object. We're gonna pass in that issuer client ID and redirect into that that says, this is how we do authentication. So when we do security, which is also coming from the Octa React application, we're gonna pass in that Octa auth object that says, hey, security, this is how we do authentication. We've got main route for path slash. It's gonna choose the home component, which we haven't created yet. We will, we will in a minute. The blast off component, which we haven't created yet. And then we've got this slash callback, which is our URL here. The login callback component comes from the Octa React SDK. So you don't have to build that yourself either. So now we've got our app with router access now we can start building our base application. So we're gonna create two new folders here, one called pages for all of our pages and one called components for all of our components that are not full pages. All right, so let's start with pages. First thing we're gonna create is our homepage. Home.jsx and let me go over here and get the code for that page and we'll go through it. So we're bringing in Lincoln or redirect from a route, react, router, DOM, whoa, this is gonna be hard to say that. We're bringing in the header component, which we haven't created yet, but we'll get to that in a minute. We're also bringing container, row, column and card from React Bootstrap, just to give it a little bit better style. And we're gonna bring in the use Octa auth React hook from the React SDK. So this is our React SDK and we're gonna pull the auth state out of it. And we're just gonna check to see if they're authenticated then go ahead and redirect them to the blast off page. Otherwise show them this container which has some basic information about the page and then we have our login button here and then a footer for the page. So we've got a nice clean looking page here and there are some other things that we're gonna need. First of all, being this blast off page. If we wanna show the blast offs for SpaceX, we're gonna need a page to show that. So let's go ahead and create another page here called blastoff.jsx, there we go. And we're gonna copy some code in and here we're bringing in the header component again which we haven't created yet. The container from React Bootstrap, Histories and History are two components that we also haven't created yet but we don't necessarily need them to be there to understand what's going on here. This is our basic constructor where we're gonna set up a base state for everything with some base values. This is our binding so we can bind the blast off components this to the functions that we're gonna create here which is on history selected and on return to histories. So when they're showing the histories, meaning just a list of all the blast offs, we're gonna show that. We're also going to show the specific history of a specific launch from the same page by just swapping out the components. So if we're loading, we'll just say loading, please wait. If we're showing the history, then we want to show the history page. If we're, otherwise we're showing the histories, the list of all the blast offs. So we're just gonna shoot the history component and we're going to pass the on history selected function for the histories component. We're gonna pass this on histories selected function that we created up here, okay? And the on history selected up here takes an ID, right? So we're gonna need that. So let's jump over to our components folder and we're gonna start with the listing of histories. So the new file is called histories, okay? And we'll get our code for that component, plug it in over here. So this is where we first start getting into GraphQL. This is what we came here for. So we're gonna bring in the GQL component and the use query component from the Apollo client NPM package. And we've got container for React Bootstrap from React Bootstrap for displaying the history or the histories, okay? So now we're gonna create a GraphQL and GraphQL takes this GQL query that gets passed in. Now let's see what we're looking for. We're looking for all the histories. We want the ID and the details of each history. We also want the links that go with that history and specifically we want the article link for that history. We want the flight for that history and in particular, we want the ID and the mission name. And now this is important because the links may actually have other links like links to the launch page, not the article itself, but like a news page or there might be a link to a video of the actual launch. Then we've got the flight, but for the flight, all we need is the ID and the mission name. That's all we care about. There may be other stuff in the flight like the engine used or the type of rocks it's used or a listing of the astronauts on the flight, whatever. We don't care about any of that for this display. All we care about is this information. So the GraphQL query API is just going to pass only that information back to us. And this is how we actually use the query. We just use the use query function and pass that histories query that we created, this GQL query that we created. We pass that into the use query function that's also coming from the Apollo client. And that will make the call to the API and return us back some data or an error. So if it's loading, we'll go ahead and we'll play the loading screen. When it's done, we'll go ahead and we'll display the histories. So from the data, we'll just go ahead and map those histories out to a table row that just shows the flight and mission name or unnamed if it doesn't have one. Then we're gonna show the history details. And then we're gonna have a link to the article that we got. Again, we got that from history.links.article because that's how we formulated our query up here, links, article, history, links, article, okay? Now that we've got that, we need the singular history. So if someone clicks on this link here, we're gonna do the on history selected that is on the blast off page, this on history selected, and we're gonna pass the ID that came from that data. That's why we're delegating that back to the blast off page and creating another component for it. So we pass the ID that comes from the history query into that on history selected and it's gonna swap out the views for the history view. Let me save some of these pages before I forget. Okay, so let's create our history component, history.jsx. Assuming I spelled that right, yep. All right, let's go ahead and get our code for the history.jsx page. And while there's a lot more here, most of it's display oriented, so okay. So again, we're using the GQL component and the use query function from the Apollo client. And here's our history function. Takes the ID and the on return to histories function from the page. We're gonna create the history query that goes out and actually gets a specific history based on the ID we passed in, okay. We're gonna get the details of that launch, the event date in Unix type. The flight and for the flight, we want the rocket and we just want the rocket name for the rocket. But also for the flight, we want the launch date in UTC. We want the launch site, but we just want the site name and we want the launch success Boolean and the event date in UTC format, okay. And then we're gonna just run this use query and we're gonna get it back into our data error loading. If there's an error, it'll just show the error. If it's success, then we're gonna go ahead and to show the success label. That's coming from Hittery launch success, whether or not the launch was actually successful. Then we're gonna show information. So we've got the return that will run that on return to histories that will just take us back to the histories component. We've also got our launch time in UTC, which we're getting from the event date, whether or not it was successful. The site name that it was launched from, the rocket name, and some details about it that just comes from the detail, which I'm assuming is a big text field, okay. Now, once that is in there, there's also one other thing that we have not created, not one other component that we haven't created yet. And that is our header component. And let's just go ahead and get our code for our header component. This is also pretty straightforward, but we're bringing in our use octa-auth react hook. We're also bringing in nav bar nav form and button from react bootstrap, which we're gonna use. So we've got our buttons here for, we're checking the auth state to see if they're authenticated. If they are, we're gonna show them a sign out button. If they are, we're gonna show them a sign in with redirect button. And then we're gonna show the nav bar, which is our blast-off control, like link to the blast-off page, as well as home and the history page. And then we're gonna show our button here, which is either a login or log out button, okay. So all things being equal, if everything worked, I should be able to come over here to my console and run npm start. And when it loads the page, now I can click log in here or log in there. It'll take me to a login page, allow me to log in, and then take me to the blast-off page. So I can link to this and I can either read the article, so take me off to the actual launch for that page, or I can see the details of that mission and return to that page, and I can log out of the application. So, again, thanks for joining me today to learn about React Apollo and consuming GraphQL APIs from React with Apollo. If you haven't signed up for an Okta developer account, please sign up for one. It's absolutely free. It's a good way to kind of get started with Okta and see if Okta's gonna be right for your application. And don't forget to like and subscribe if you like this content. And we will see you next time. Thanks, everybody.