Ryan Chenkie: [0:00] Now that we've got the application working with GraphQL, we should take a look to see what's different. For the most part, everything is just as it was. Things operate in mostly the same way.

[0:10] The main difference in the application now is that we're getting our data from a GraphQL API, as opposed to just a JSON API that we were using previously.

[0:19] The best way to see that is if we come to our DevTools and we check out the network tab. Let's refresh to get some data. What we will see now is that instead of going to our dashboard data endpoints, we're going to a GraphQL endpoints and we're getting some data back from it in the form of dashboard data.

[0:37] Both the front end and the back end are making use of tools that come from Apollo. If you're not familiar, Apollo is a company that deals heavily with GraphQL, and they've got tools for both the front end and the back end.

[0:50] For the back end, they give you tools to create a GraphQL server and for the front ends, they give you a GraphQL clients and help with things like data caching.

[0:58] Taking a look in Orbit app and then it's a source and app JS, what we'll see here is that we're pulling in ApolloProvider from Apollo React Hooks.

[1:09] We've also got Apollo Client coming from Apollo Boost. These are the two main dependencies that we've got that will give us a GraphQL client for our React app.

[1:18] Down here, we are instantiating a client, an instance of Apollo clients. For the URI, we are providing something that's coming from our environment file, which is our React app GraphQL URI.

[1:30] Much like before how we have had an API URL, with Apollo now, when we give it the React app GraphQL URI, that's in our environment file and we're just setting it to localhost3001/graphql.

[1:43] After we get our clients, after we instantiate it, we've got to pass it to ApolloProvider. The idea here is that we wrap our entire application up in this ApolloProvider and the ApolloProvider expects some configuration. That configuration is the client that we've defined above.

[2:02] The ApolloProvider gives us access to GraphQL across the application. We can get a sense of what it looks like to use GraphQL in our app if we go to the pages directory and then to dashboard.

[2:13] Within dashboard, we're pulling in useQuery. This is a hook that comes from Apollo React Hooks and we're also pulling in GQL, which is a tool to help us construct GraphQL queries.

[2:24] Here's where we're defining the query that gets our dashboard data. We're saying we want a query called dashboard data and that's going to go to our GraphQL API, looking for dashboard data, and it's going to request these fields.

[2:37] To make that query, we run it through useQuery. Once that query has run and has successfully given us some data, we can display it in our render block. That's what we're doing here. We're saying if there is some data available, let's render everything beneath and let's pass in the data that comes back from that query.

[2:54] We can see here what that looks like. We're saying data.dashboarddata.salesvolume, and that maps up to what we get here in our response.

[3:02] We've got data, dashboard data, and then sales volume. You'll find these same kinds of use queries across the application now. You'll also see another hook called useMutation. We can get a sense of that if we go and take a look at the log-in page, for example.

[3:18] For our log-in components, we're pulling in useMutation from React Hooks. In this case, instead of making a query when we go to log-in, we are going to do a mutation. The difference being that a query is for when we want to request some data and a mutation is when we want to change something.

[3:35] We've got a mutation called log-in and it requires some arguments, it requires email and password. Once we run that mutation, we're going to request back the success message along with the user info that's going to come back with it. We also want to get a token and the expires at time.

[3:52] We're making use of this query down here when we make a call to useMutation. We pass in the log-in query. When we do array destructuring with this useMutation hook, we're going to get the log-in mutation action right here.

[4:06] What we can do with that is when the user submits the form, which happens down here with on submit, we're going to take the values from the form and pass them in as variables, passing that in to the log-in mutation.

[4:19] We will look for some data coming back from that mutation, meaning that it succeeded. When we get that data back, we'll want to process this component here called process log-in. Process log-in's job is to look at the data coming back from that mutation and pass it into AuthContext to .set-off state, like we've seen before.

[4:38] After that, we are going to tell our application to redirect to the dashboard. The behavior that we'll end up with is going to be the exact same that we've seen all along. Only now, everything is being run through GraphQL.

[4:51] On the server, we've got GraphQL at play as well. Let's go into Orbit API and we'll take a look at Server.js. In Server.js, we're bringing in Apollo Server GQL, Apollo error and user input error from Apollo Server. The one we'll want to focus on for now is Apollo Server.

[5:10] If we come down to the bottom of the file, what we'll see is that we are creating an Apollo Server right here. This can be thought of as the replacement for what we were doing before, where we would get an app, say something like constApp = express().

[5:23] Instead of doing that, we are going to delegate to Apollo Server. Apollo Server needs some type definitions and some resolvers. If we take a look right here, we've got our type definitions all setup here. We have data types for everything that we need to power our application and we've also got the resolvers that power our queries and mutations.

[5:45] What we've effectively done is just moved all of the logic. For example, for log-in, we've moved that from an endpoint now into a mutation, which is going to run when the log-in mutation is hit.

[5:57] The same thing goes for queries. Whenever we make a query, for example, for dashboard data, instead of getting that data from an endpoint now, we're going to get it from our dashboard data resolver.

[6:06] Apollo error here and user input error are some error utilities that Apollo gives us to properly respond with errors when they occur. Everything is set up for the applications to use GraphQL, but as it stands, there's no authentication happening whatsoever in this application now.

[6:22] We're at a starting point where we need to bring in our JSON Web Token, send that to the server, have it verified, and only then respond with data. The ways that we do this with GraphQL are fairly particular. There are a few different ways that we might accomplish it.

[6:37] In this module, we are going to take a look at the options that are available to do authentication and authorization in GraphQL. We won't, however, be focusing on GraphQL from the ground up. If you're totally unfamiliar with GraphQL, I would recommend doing a bit of training so that this module is effective for you.

[6:56] We'll be talking about a lot of GraphQL concepts, things like queries and mutations, resolvers and type definitions. We won't have time to start from absolute basics on those. I definitely recommend at least getting familiar with the basics of GraphQL before proceeding.

[7:11] Now that we've got the application tour out of the way, let's start implementing authentication and authorization.