Don't waste you time! Automate everything! Apollo CLI TypeScript/GraphQL Codegen

hey everyone it's lee halliday and today we're going to talk about the apollo cli tool and the reason we're going to do that is because imagine we're building a typescript react application that uses a graphql api so we have our our queries which give us data back and we have to sometimes give them variables so that they can execute those queries so why would we write out by hand the types for both of those when graphql is already typed better to use a tool like apollo cli to just generate the types for us so that's what we're going to look at today how to use the apollo cli to automatically generate our typescript types so this is the small graphql api i'm working with today i've got it running locally just within an xjs app and it's got literally one query so you can ask for names but you have to search for for something the letters in the name so we're going to search for l and we get back my name maybe we search for ma and we get back a few names so that's the extent of our graphql api but we're going to generate the types for what it gives us as a response and also what we need to give it in terms of the variables here so why don't we go implement this query within our react app to start so again inside of next.js it's a very simple application where we're working on the home page this is the extent of our home page right now i've already imported the use query hook and gql from apollo client so we can say here that we're going to write the home query and that is a graphql query so whenever you're working with um automatic type generation you always want to give your query a name so we're going to call this the home query just like that and we can ask for names and names requires um an argument or a field passed into it a variable so we are going to say here that we have to pass in search but we don't want a hard code search like ma we want to take in a variable so we're going to say it's going to take in a variable called search so whenever you say it's going to take in a variable you have to define the variables up here so we're going to say that the search variable is a string that's required with the bang there so that's our query let's go use it so we're going to say const it will give us data and say loading back from use query the home query just like this and to keep things simple why don't we just display what it gives us back so we'll put this in a pre tag and inside of here we'll embed json.stringify the data with uh two spaces so we could get a little fancy and say if loading or not data return loading dot dot cool so if it gets down here we should have data to work with come back here to our react app and it says loading and nothing so let's see what i screwed up all request i did something wrong oh i know why i didn't actually pass in any variables to my query so if i were writing typescript it would have stopped me so why don't we do that right now we'll pass in our variables so the variable we want is search and we're going to say that it's ma do that see what we get back and there we go so it's working now so we have our names that are coming back from our graphql api but here's the problem and i just forgot to pass the variables in but if we were to look at data for example it's any and what variables does it want well we know here but there's no sort of type assurance so if we pass in the number three it's not going to tell us like hey see it's failing here because we passed in a number for our variable typescript's not telling us that there's an issue so the way you do that is you can pass in two typings here one for an interface that represents the response from the query and another for the represents the variables that it's going to receive but we're not going to type those out by hand because we're going to use the cogen tool to generate it for us so we're going to start by going into the console let's just clear this out and we're going to start by using yarn run apollo and this is this apollo cli it comes from in a dev dependency right here so apollo is installed as a dev dependency and that allows us to run something called client code gen but you have to pass a ton of options to this so if i were to just run it it's going to give me an error it's missing a target so let's start to fill in the options it needs so target we're going to do typescript flow is another option but typescript is what we're working with we have to point it towards the schema and it just so happens that i have my schema right here locally and the reason i have this is because i'm working with type graphql and when you set up your schema you can say emit a schema file and i'm basically emitting this whenever i'm in development mode so whenever i'm working and changing the schema admit it so it's here so that allows me to basically point this command to my local schema by using the local schema file schema.gql so we'll talk about what to do when you're not running your graphql api within the same repo maybe it's hosted in another app we'll get to that in a second we're going to say output flat and that will take all these types it's generating and put them in a single folder rather than sort of putting them throughout our application right beside the code that's using them it's up to you whatever you prefer we can tell it which which files to look at to try to generate these types so we're going to say that it includes and we're going to say look in pages or src star star so any file within those and we're going to exclude we're going to exclude src generated because that's where we're going to put the types that are generated so the last thing you need to pass in is basically just where to put the the files that it's going to generate and we're going to put them into src generated so if i run this what it's doing is it's looking through your entire code base in this includes folder and it's trying to find any queries that you've written so we wrote one query on our home page so it's going to find that and it's going to use the schema that we've had generated this one that says you've got a query called names and it returns an array of strings and what it will do is it will generate you basically one file per query or mutation that you're executing and the cool thing here is that it gives you basically two interfaces that it exports the first is what is the response type of the query itself so here we're getting names which is an array of strings and what are the variables that this query wants to receive so it wants a search variable that's a type of string so what we can do with this here is go back to our code and we can import them so import from src generated home query dot yeah that's good like this and what do we want to import we want to import these two interfaces so we'll come back here put them in so with these we can copy and paste them and pass them into our use query hook type-ins so now if we were to change this to a number now it knows what it expects as the variable so the first one is the response type the second one is the variables that it wants here it's saying wait a sec search should be a string you got passed us a number so will actually give us an error and if we were to do something with our data like try to access data dot see it knows that there's names if we were to access data.people it's going to give us an error saying hey people doesn't exist on this if we were to look at data it will tell us exactly what it wants if we were to sort of go to the definition we can see what we're going to get back so if you change this you're going to want to rerun that command there's a dash dash watch um option you can pass to it to basically just keep watching for changes but but that's it so that's how you can generate types and then use them within your apollo queries and mutations so that you have type safe responses and variables but imagine if we didn't have a local schema file so there's actually another command we can run and that's yarn run apollo client download schema and where we can point it to an end point it will and it will download us the schema file so what we could do is we could say endpoint is http localhost 3000 and mine's located at slash api graphql and we could say output this to just say output.gql so we'll run this it will make a request to our graphql server that could be running anywhere and it will download and output this gql file so if we were to go here i now have the same sort of it's got a few extra directives at the top those were not even using what's important here is this is the schema for our graphql api so you don't actually have to download point to the local file and then generate them what you could actually do is just go up to your original one and if i just scroll back quite a ways so instead of local schema file we can actually just point this directly at an endpoint so we can say just point directly to http localhost 3000 api graphql run that it's going to sort of do that same thing but in one step instead of two now i like to have my schema file committed because then you can just always point it to the local file and it's quite a bit faster in that case and it's a nice reference for the developers if they ever need to go look at the schema that they're interacting with it's here but um it's not requirement so you can just point your client code gen to your endpoint and you're good to go and then it will generate you the same sort of query and query variables and i mentioned the name was key because the name that i give this query here home query is both the name of the file and the name of the interface so you want every query and mutation that you're running on your site to have unique names going on global types i don't have any here um and it's actually failing because you're supposed to export something from a file but um this is where the all the the enums and the input objects for your graphql api would be placed so we just won't worry about that for now cool and that's what i wanted to cover the the last thing i would recommend so i'm just gonna delete this output file i would recommend adding them in as scripts so come here take your command and you could call it like codegen and then paste this in you're going to have to escape the double quotes because we're in json here and there we go so now we could just go yarn code gen and you don't have to memorize that huge crazy command to actually do this and you could also say cogen you could add in a dash dash watch and now it's just gonna sit there listening for changes new queries etc that you're going to do in your app awesome that's what i wanted to cover this is a very simplistic example i if you're still sticking around i just launched a full course um called next level js where we're building a full stack application typescript apollo front end and back end where we use this same sort of typescript type generation using the apollo cli so if you want a larger example with lots of mutations inputs responses and different ways check this out it's 50 i'll put a link in the description below i would appreciate the support it was a lot of work but i'm very proud of it thanks everyone have a good day bye

Channel: Leigh Halliday

Views: 7,758

Rating: 4.9736843 out of 5

Keywords: graphql, typescript, apollo, codegen, apollo cli, typegraphql, graphql schema

Id: Tw_wn6XUfnU

Length: 14min 10sec (850 seconds)

Published: Tue Jan 19 2021