Using GraphQL Code Generator with GraphQL Request

foreign one of the biggest benefits to using graphql is the type system when working with libraries such as graphql request these often accept generics where we can pass the shape of the data and any variables that will infer the shape of the response in the data that we get so here we have an example where we make a request using the graphql request library to an endpoint because we've got no types and we're not using any generics just yet when we go to access any of the properties of cart we don't get any order completion or any type safety if we wanted to we could manually create the types for this request and pass it through the generic to request so here let's create a new response object and we'll specify here that card contains Aid which is of type string and total items which is of type number we'll skip creating all of the types for the isoms and the subtotal we can now see that this card has an ID and total items so when we go to access one of those properties we can now get some useful information about the type here we can see that the ID is of type string and total items is of the type number managing these types manually is very time consuming and can often lead to dead code we can forget to update the types and some of the types may change if there's any underlying breaking changes from the API that we're using so today let's improve this by using the graphql code generator this property here of the query if we pass in a document node can automatically infer the generics that can be used in the response and it also works for the variables let's install the graphql code generator CLI as a Dev dependency then let's also install the graphql typescript plugin as well as installing the client preset plugin once those have installed let's create the file codegen.ts inside the root of our project then inside of here we'll create a new config object and Export that as the default we'll need to provide a few properties here including the schema and the documents as well as the plugins that we want to use so here we'll pass the endpoint to our API and this could be any graphql API then we'll specify the documents and here I'll provide an array and for now we'll use the main.ts file then we'll pass the generates configuration we'll create this folder here gql and we'll use the preset client with no plugins next if we open the package.json and inside of our scripts we create the script code gen and we run graphql codegen this will automatically create the types for us we can also create an alternative script which watches for any changes and creates those files on the Fly now with our configuration saved let's open the terminal and run npm run code gen we can now see in the root of our project that we have some new files created if we open the graphql.ts file we can see something similar to if you've used a graphql code generator before we are using type document node to generate all of the type documents and we have the exported scalars as well as all of the different types for our graphql API we scroll to the bottom of this file we can see that we have a get card by ID document this is a type document node and if we scroll up we can see that we have some type variables and the query this is automatically detected inside of our project that we have this query here we can see if we hover over card here that this is still of the type any and this is because we're not specifying here that we want to use that type document node the graphql code generator was smart enough to create the type automatically will the need to import a special function called gql from the generated graphql folder so we can use function overload and typescript to automatically generate the types for us that we can use and pass to graphql request now let's import graphql from or generated graphql folder we can then take this graphql function and we can pass it here then instead of parentheses we can pass our query now if we hover over cart when we make a request to our API we can see that this is using the types that were generated automatically for us and just like before we get all the different fields that are available instead of our query here if we now update our query to include the items ID and the unit total formatted and raw amount if we rerun the code gen or we watch for any changes this will automatically update that type document node then if we check one of our items we should now see that we have the ID line total name quantity and that unit total then if we go to access that we can see that we have the amount which is a number automatically typed for us depending on the source that we pass to our graphql function this will return the correct type from our documents object here this technique is known as function overloading you can learn more about that inside the documentation for the code generator and in another video we'll learn more about fragments and fragment masking using the client set preset plugin from graphql code generator

Channel: Jamie Barton

Views: 7,008

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

Id: XPUcMOhCjHw

Length: 5min 11sec (311 seconds)

Published: Mon Oct 10 2022