What you can do is look to use something like GraphQL Code Generator, and it will generate the typed document node. So when you go to type your variables, it's able to kind of detect from the query what variables you need so the variable object is type safe. And that's something which you can learn about over on the graph-based documentation. So if you want to do that, you're able to follow along.
So here, where we have it, generate TypeScript types here. You can follow along with this guide, and this will show you how you can get your GraphQL schema and you can create types, and it shows you what those types look like when they generate. So if you want to follow along and integrate that with your application, you can do that as well.
Cool. So now we've got an application. And from here, we'll destructure data and loading. And if we're loading, we will just return a simple message, loading data. Otherwise, we will return a pre-tag here. And instead of here, we'll call JSON, we'll call stringify, and then we'll call that data. Now, instead of my application, it's loading data.
If we open the network tab, we should get some errors telling us that our backend has failed. And that is because we haven't started. We haven't started that backend. But we can see from the operation that it's passing along that query, the variables. And in this authorization header, we have a token here, a token that is coming from Clerk. This token was generated from Clerk. And if we open some of these requests here, we can see that it's given us our clerk's details and information about who we are and all of our public info, and then we make a request right before GraphQL to get our token using the template called graph base. We then use the response of that, the JWT, to pass along in our headers to our backend.
Now, if we open up our terminal, let's put the pain here, and we'll run npx graph base, and we'll call at zero dot 10 dot zero, and we'll call dev and we'll spin up that backend. Now, what this is going to do is it's going to use the schema. It's going to use the value for the issuer to then look up on the backend the template, and make sure that everything matches up when it's authenticated. So, you can't just pass any JWT. It needs to be created and signed by click. And now when we refresh and we make a request, it makes a request to our backend, and it gets the data from our API because it's authenticated, which is really cool.
So, that is the data here coming from our backend which is running locally. I can deploy this to the web and use that same API that I have deployed for us. So, that's really cool. If I log out, sign out, you'll see here we've got no data. And what we could do is, if we go back to index, we can check to see if there is an error. If there is an error, then we will return, Something went wrong.
Okay. So something went wrong. Why? Well, let's load up the network request. Well, here we just get the message unauthorized. We're not logged in, we don't have access to that data, but if I sign in, maybe I need to go to the sign-in page. If I sign in, yeah, we never went to this before. But if I sign in with GitHub, because I'm authenticated, I can successfully request that data from my application. So if we just think about what we've done in this workshop, we've created a front-end that's able to talk to a back-end API that we are running locally, and all that we've had to do with GraphQL is write the schema. And this schema automatically builds that back-end locally, and when you deploy it, it gives you it available at the edge, and we get all of the models, crude models and validation for all of these fields.
Now, some things that will be coming soon will allow you to add models or fields that resolve from external sources. So, for example, maybe you already have a back-end and you can't migrate it. This isn't a Greenfield project but you want to use it inside of your project. Well, you could use a type and you could say, okay, my type is article. Then you'll be able to use a directive such as HTTP or REST, whatever you want to call it, and you can specify the endpoint. And you can say my endpoint is whatever, my resource is whatever, and then you can just not use that model directive and instead use HTTP. Then all of that data can be available and you get the added benefit that those are resolved at the edge and you can opt into caching.
Comments