Type safe resolvers with GraphQL Code Generator

[Music] here we have a graphql api that's returning a cart by id that will provide through the arguments in the query this has various fields on the cart type one of the types that are inside of here is for the items which is of type card item cart item also has the align total and unit total of the type money and if we run the graphql request you can see that we'll get a mock response inside of the index.ts file for our graphql server we are simply defining some mock data that will be returned to us when we make a query and we are defining some query types and root query types for the cart model and the items and here is the schema for our graphql api if we open the cart items and the schema alongside each other you'll notice that we have certain fields that don't exist in the graphql schema this is often the case when you're working in a real world project your database looks completely different to what the end consumer may consume from your graphql endpoint you can see here that the cart items have an inferred type so if we change the id of one of these to be true instead of a string when we make a graphql request there will be an error you'll notice when we change that string to a boolean there was nothing in our ide to tell us that this was invalid you'll also notice when we define the resolver for query cart that when we return an object here there is no hints to you as a developer from the ide what you can or cannot return or what the types may be so here if we define an invalid object only when we execute the query will we get an error from the system because this error happens at runtime and not build time we want to introduce something that will help us during development to speed up showing these errors if we make any mistakes today we'll be using the graphql code generator to type the resolver type for our graphql server so when we are creating the resolver types the graphql code generator can automatically create a signature for what that may look like this then prevents us from returning any invalid data from those resolvers you can install this dev dependency as you would any other using the command line you can install this into your node project and we'll also need to install some plugins the graphql code generator has a vast array of different plugins that you can use to automatically code gen today we'll be using the typescript plugin itself and the typescript resolvers plugin once the dependencies have installed we'll next go ahead and create a file for the codegen config we'll need to create a yml file in the root of our project if you give the file a name of codegen.yml then the cli for graphql code gen will automatically pick this up then let's go ahead and define what we'll generate the first file that we'll generate will be types.ts then we can specify all of the plugins that run for this file we'll come back to this later and configure this with some additional advanced options to show the power of graphql code generator next inside of the package.json let's go ahead and define it generate script and we'll simply execute the graphql code gen command this will automatically pick up the codegen.yml file because that's what it's expecting as a default now let's go ahead and run npm run generate once run you'll notice in the root of your project where we defined types.ts as a file name in our config that a new file has been created with some types everything that was inside of the schema.graphql file for our queries and types cart is now inside of here typed and because we installed the typescript resolvers plugin you'll notice the automatically generated resolvers type inside of the types.ts file let's go ahead and import this in our index.ts file and then we can assign this resolvers to our resolver's constant for all of our different graphql resolvers you will immediately notice that we have some errors within our index.ts file now the query 4 cart will not correctly resolve so before we even run this code we can tell there's an error if we reference the schema.graphql file once more you'll notice that the card is expected to return an id but here we return an underscore id and we are missing some other fields if you are using aorm that generates types for your models automatically then you'll not need to do this step however for the purposes of this video let's explicitly create some types for our model we'll first create the cart model which has a underscore id field of type string then it will also have items and currency currency will be of a enum and we'll also have the cart items currency will be of a enum type so let's define that and add some example enum values then let's go ahead and create the card item model the cart and card item models have the field currency this isn't exposed through the graphql api but it's used to generate the value of the type money which is used for the subtotal unit total and line total of our cart and card item models next inside of the index.ts file let's import cart model and cart item model from the model file we can then assign the card items to the type card item model and we'll update the currency to include the value of the enum currency code we'll select the usd value here then let's do the same for our array of carts we'll set the cart type to be of many cart models we can see inside of the resolver for the type cart that the parent or the cart model itself for id here is still the cart type that we have to find inside of our graphql schema it's not referencing the type inside of our model file thankfully the typescript resolvers plugin that we installed inside of our graphql code gen file allows us to define some mappers we'll first map cart to the cart model then cart item and then the enum values for our currency if we once again run the generator for graphql code gen this will update our types.ts file we can see inside of types.ts this is now using the cart model that we have defined inside of our project if we go back to the index.ts file we no longer have any errors because the card now is using the cop model that we have defined for our database model type and we are still fulfilling the graphql output return type if we try and define another resolver for another query you'll see that we get an error because this isn't defined on the resolver's return type for query then if we once again run the query to fetch all of our products you'll see everything is working as it did before

Channel: Jamie Barton

Views: 17,881

Keywords: web development, reactjs, javascript, es2015, html, css, code

Id: tHMaNmqPIC4

Length: 6min 35sec (395 seconds)

Published: Mon Jan 24 2022