Let GraphQL Code Generators do the boring stuff

Christian: [0:01] Hey guys. Welcome to my talk. My name's Christian. I'll be talking about generating your code. Now I've been using GraphQL for a couple years now and my biggest pain point has always been the amount of boilerplate and setup needed to accomplish what you want.

[0:16] It just gets to a point where often times it just takes so many minutes, so many hours even, to get everything up and running so that you can start requesting data, you know what I mean? When I found about code generators, it's saved me so much time.

[0:37] It was just an incredible...it's one of those things that you find out and you wonder where has this been my whole life kind of thing. I want to share that with you guys. You can find my slides here. Here are all my personals and stuff I've put.

[0:51] You can find everything in the slides there. I want to give a shout out to Ken C. Dodds for the slides format. Very minimal and definitely suits my fancy. All right.

[1:03] The problem is when you're creating a GraphQL API alongside some typescript, it takes a long time. It takes so long to get everything set up. Let me give you a little explanation here.

[1:17] Here imagine you have your GraphQL schema. You've got a person, nothing too big. Then you've got your queries. Then you get back your person. Then you got to make sure you create your typescript types for that.

[1:29] Then you got to make sure you type the response data. Let's say you're using Apollo. You got to type the variables required, if needed in the query. Then you got to put it all together and that's just to get a very, very plain and simple query just running together.

[1:45] That's if you want it to work nicely with JavaScript. Now what does that mean? It means whenever you update something, that becomes a pain because you got to make sure that you did it correctly, right?

[1:56] You got to make sure that you're not doing a little typo here and there. Then creating new endpoints become a bigger pain. Oh man, let me tell you, your wrists are in the greatest pain. I think I got carpal tunnel from writing GraphQL.

[2:13] You're probably not, but that's what I like to tell myself because...yeah, yeah. The solution is GraphQL code generator. You write your schema once and then you have everything generated for you. It's delicious. It's great. All right.

[2:37] I'm going to demonstrate for you guys so let's do it. All right. I've got a really simple Create React App. I've deleted all the fluff and stuff and just added in Apollo for demonstration purposes.

[2:52] As you can see the app is pretty bare-bones. There's not much to it. I've got a little component here called a user profile. Here I've got some queries. I've made a little GraphQL schema. I just copied this from somewhere.

[3:11] Actually the code generator, the front page, it has like a little schema that you can mess around with. I just copy-pasted that. You can see it's not anything too complicated. It's pretty simple.

[3:22] We're going to be using the schema to simulate a backend that we could have developed. What we're going to want to do is I want to display some user data, some data points.

[3:34] I want to see how easy can this git be with GraphQL code generator because the purpose and the point here is we want to save time. Let me tell you, you're going to save time. Let's go to hyper and see what we got to do first.

[3:48] All we got to do is yarn add graphql-codegen/cli. That's the first thing you got to do because it comes with a little wizard that sets up everything for you. We're just going to take advantage of that because I don't want to do that myself.

[4:04] Yarn graphql-codegen admit. Of course you have to type in and you get your little wizard. We're going to build an app with React. The schema is right here. Schema of the GraphQL.

[4:15] I'm just going to put it like that right in the base where your operation and fragments...operations and fragments are like the queries we saw there. Those are things it's kind of looking for. It's going to be within our app and it's probably going to be within typescript file.

[4:31] We're going to source, a little blog here /dot*dot. I'm going to put these curly brackets to denote that I want multiple extensions here to be looked for. It's either going to be TS or TSX. Sometimes we might be putting queries co-located with your components.

[4:49] That's absolutely fine. Here's where things get really cool. Like I said before, GraphQL code gen interfaces with many different libraries and React Apollo's one of them.

[5:05] You can see here it's got a React Apollo plugin that basically auto-generates all the hooks that you need to get started with your GraphQL-ing, you could say. The typescript plugin what that does is that it generates basically the basic types.

[5:24] Like if you have a type person, it's going to generate the interface person, for example. Operations would be things like...or it's going to generate the variables that you need, right? Like what are the variables needed for this query? It's going to generate that for you then React Apollo is going to generate pre-configured hooks for you to consume at your pleasure.

[5:44] That's pretty much all we need React and operations and typescript. Where are we going to write the output? I'm just going to leave it as is. Do you want to generate an introspection file? No. How to name the config file? I'm going to leave that as is.

[5:56] What script in package.JSON should run the code gen? I'm going to put generate. That's it. I think it's going to give everything for us. Now we just yarn install like it tells us to do there. I mean it says MPM but same thing. We've got everything installed.

[6:17] I think we should be good. I'm just going to run yarn generate and see what happens. There you go. You're going to see here in the project, it generated a folder called generate. Here we're going to see everything, right?

[6:34] Let's see if I can take the schema out and put it on the side here. Let's go back to this generated file. Let's see if it has everything we need. Look at that. It's like a one-to-one. Everything is perfect. It's got the arguments that you might need.

[6:57] It types the node, the user. Oh man, this is great. You see, look how much time is saved by just running that. It took less than a second really to do all these queries. Then here's where the fun begins.

[7:14] You get these perfectly tight Apollo queries for you to consume at your leisure. It's just great. What do we want? We want to go to user profile and what we're going to want to do here is basically, we want get user info.

[7:35] We're going to go to queries, we're going to see what we got here. We got to get user query. We're going to use this. Just something to keep in mind is that the auto-generated hooks come from the name that you name your document.

[7:51] Here the document's name is git user so the hook's going to be called git user query, for example. If we take advantage of that...let's see. Git user query. There you go. Use git user query. We're going to see if this works. Let's say I just wanted to add the username.

[8:17] That's all I want to add. Data. It's typed. This is good. What else? It's got everything we want. It's got all the things typed automatically for you and that just makes things so easy. Here we got email ID enroll but I'm looking for username. I don't see that there.

[8:38] Let's go to the query here. We can see that I haven't actually put username. Let's just do that. I'm going to put username right on their ID there. I'm going to save that. I'm going to go back into my terminal and just run yarn generate again.

[8:50] Let's see if this fixes our little problem here. Let's see. There it is. Username. Perfect. Everything we've ever wanted completely done. Not only does it type the response data, it also types anything that requires variables, for example.

[9:16] When we go back into our schema, we're going to see that we might have a little query that has an actual variable. Here we got a query that expects a variable term. Let's see if we can use that. It's the search query. Let's see what we called it.

[9:32] We called it git search. Perfect. What I'm going to do is I'm going to delete this. I'm going to say use git search query. Perfect. We want to put the variables. You can see already that it expected an argument when we got zero. Why is that?

[9:49] Well because the variables require that. We're going to go to variables. We're going to put term. That's just amazing. Look at that. Everything we wanted. You can see now the types are matching up. It's like git does not exist which is perfect.

[10:09] We hit Search and what is this? It's an array. You can see exactly from typescript that this is an array. We're going to map through it, get the results. Get the results here. We're going to map through the results. Maybe just put a little div. Classic React. Let's see what we get. There you go. Result.id. Perfect.

[10:34] This is why I love GraphQL code generator because as you can see, I don't know how long this would have taken me to do. Let's go to the generated files see how much lines of code we've saved there. We've saved 233 lines of code.

[10:52] All generated for us in less than a second. Everything kind of just matches up perfectly. One more thing I want to add. You can run this as a watcher. You just pass in /w. Now it's watching for changes. You can see there. Look at that.

[11:14] Now if I go back to these queries and let's say I go back and I want to use the git user again. We're going to go back. We're going to use git user. Where is it? Git user query. There we go. I want to use this one again. Let's go back.

[11:48] We're going to remove username again. We're going to see how GraphQL code generator automatically picks this up and right away regenerates the code for us so we can see real-time the changes as we go along. Let's remove username here.

[12:03] We're going to wait a little bit. It's going to take a little bit of time. There we go. As you can see, username is gone from the query here that we made. That means the response also doesn't have username and it all happened automatically for us.

[12:19] We didn't have to go back into the terminal and write yarn generating work because we put that watcher on. Now this is really useful. This kind of workflow just really increases productivity. It's helped me a lot. I really hope this can help you guys as well.

[12:36] That's it guys. Thanks for sticking by. I hope you enjoyed. I hope you found this useful. I hope you learned something. Here's a link to the GraphQL code generator docs.

[12:45] I want to thank Egghead for giving me the opportunity to present this to you guys. Have a good day, good evening, good morning wherever you're from. Take care. Goodbye.