The new GraphQL Code Generator Client Preset

foreign you may have previously worked with the graphql code generator to generate types and all of the different client hooks for your front end in a recent update with the graphql code generator it changed how it works with the configuration and instead focuses on generating the type document node using a new client preset to get started let's install some Dev dependencies we'll first want to install the graphql codegen CLI and the graphql code gen client preset once this is installed we can also install graphql and now that's done let's now move on over to creating a new file in the root of our project the graphql code gen does come with a net command that you can run to automatically generate this file but for the purposes of this video we'll just go through creating this file manually and for the Eagle Eye you probably noticed that this file now ends in dot TS so this means we can import the graphql codegen config from the graphql codegen CLI package then we can generate a new config object and we can specify the type here as Cogen config finally we'll export that default config object from this file next we'll want to specify the schema for our graphql API and for the purposes of this video we'll use an API URL for graphql API if your schema introspection is protected by some kind of API key you can provide to the schema here a object where the key is the URL and then you can provide the headers inside of here but for the purposes of this video we'll provide the unprotected URL for our graphql API then we'll need to provide the documents glob and here this will specify that we want to watch for any file inside of the directory App instead of any folder and we only want to watch files that end in the extension TS or TSX if you're still working with JavaScript obviously you can provide those extensions here and because we haven't worked with the graphql code generator before in this new format and we haven't used the functions that it exports to generate queries we'll want to ignore no documents so we can set this as true and finally similar to how we've done in the past we can provide all of the different things that the graphql code generator will generate so here we can provide the key generates and inside of this object we'll generate the folder gql and for this we can provide some configuration and we'll specify that the preset here is the new client preset and you can also provide some plugins but we'll just provide an empty array for this let's save that configuration and back inside of our package.json We'll add a new script now to run the code gen so we'll invoke graphql code gen and we'll pass an additional watch flag for this now if we open the terminal and run npm run code gen this will constantly listen for any new changes inside of our app directory and generate a new folder or file inside of the folder gql this will watch for any changes inside of our app directory and it will update the folder gql that it's now created instead of the root of our project if we open these files here we can see inside of the graphql.ts file that it has all of the types from our graphql API that we specified instead of the code gen config so already we've got some types for our graphql API but we next want to generate the types for all of the operations that we have throughout our application we next want to generate types for graphql operations that happen throughout our application let's imagine for this video that this client.ts file is your application for your front end it could be a react app a view app it really doesn't matter what we want to do is import graphql from the gql directory and using that graphql function we can now generate a new query and we'll call this get caught by ID document then inside of here we can provide the query get caught by ID as soon as we save this we should see in a terminal that the graphql code generator has noticed some changes now if we go back to our gql.ts file we should see here instead of our documents object that we have that new string that contains the query and we can see here for the key inside of here that it contains the query that we've written inside of the client.ts file then for the value we have our type start get card by IDE document now if we open the graphql file and we scroll to the bottom of this file we should see here that we have a document get caught by the document which is a document node and then further above we have both the query and the variables for that query now if we go back to the client and we update this query to include the unit total formatted amount and we save the graphql code generator will notice these changes and it will update the query here so hopefully this has given you enough to get started generating types for all of your different graphql documents throughout your application we'll explore working with these types in the type document nodes instead of our client applications in another video

Channel: Jamie Barton

Views: 11,634

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

Id: 4EXr5kDWvYU

Length: 4min 38sec (278 seconds)

Published: Wed Nov 16 2022