Hasty Treat - Effortless Custom GraphQL with GraphQL Codegen

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toro Loco, Tolinski.

CSF. Welcome to Syntax in this Monday hasty treat. We're gonna be talking about GraphQL tooling And specifically, a couple of tools that I use every single day in our GraphQL API. 1st and foremost, the GraphQL well code generator. And if you're using GraphQL, you gotta get on this thing because it will change your experience with GraphQL.

Thank you. Happy birthday to you too. You're I mean, yours isn't today, obviously, but it was just a little bit ago. So, man, we're both birthday boys over here. Getting getting older. Yeah. We're pretty close together. Yeah.

I know. Totally. Well, thank you. You're welcome. So let's talk about our 1st sponsor today, which is .techdomainnames.

What they do is in the name of the company, they give .tech domain names. I use .tech domain names for one of my projects recently, which is uses .tech. Go ahead and check that out. Almost 600 people are listed on users.tech right now. So what they do is they give you .tech domain names, and it's great for your next Project. If you want to grab a domain name for your company or your project, check out and see if there's a .tech that is available for you because it's a pretty awesome Domain name. All kinds of really cool companies are already using it. You can go to their website and see some of the examples that they have. Snap up yours before it's gone. Go to go.techforward/syntax is tech or click the link down in the show notes To see if your domain name is available, use the coupon code syntax 5, and you're gonna get 80% off. That's Wow. A smoking deal on a 5 year dot tech domain names. So thanks so much to .Tech for sponsoring. Smoking deal.

Yeah. And our other sponsor in this episode is LogRocket. Now if you never heard of LogRocket, they're an amazing service that gives you a video replay of an error bug happening in your site. That way, you can go back and see what happened. You can that's right. You can revisit the scene of the crime, as I like to say. When a user Does something on your site that your site is not intended to do? Well, it's gonna be logged into LogRocket, and then you're gonna be able to see it happen in action. The mouse position, the clicks, The console logs, the network tab, all of that stuff that you need to solve the problem. And you're gonna become Sherlock Holmes here with one tool, and that's LogRocket at logrocket.comforward/syntax.

Sign up, and you will get 14 days for free of this awesome, awesome service, something that you really needed to see to believe, the magic, All of those wonderful things. So let's get going into this episode where we're talking about GraphQL tools. Now I did a talk on GraphQL tools, I think, And for Apollo Day, I'll have maybe a link to that in the notes because I I talk a little bit more about some of this stuff. But I wanted to talk specifically about 1 tool, and I felt like maybe We could spend the rest of the time taking a look at some of these other tools that we both use and that we could use in the future.

So the tool that I wanted to really spend the most amount of time on Would be GraphQL code generator.

You can find that at graphqlyphencodehyphen generator.com.

Check the show notes or just Google GraphQL code generator. I think there is only one of them.

This thing is so cool, and its name describes exactly what it does. Basically, if you're using GraphQL, you have a GraphQL API.

What this does is it'll either connects to your GraphQL API via an endpoint, like Local host port 3,000 forward slash GraphQL, for instance, or it can suck up a schema like a vacuum cleaner and then use it that way instead of Having to actually hit the API.

So how do we use it? Well, we have it, suck up the schema, the dot GraphQL files. So for us, it looks for all of GraphQL files on our site and generates a whole bunch of stuff for us. And we use this to great success In our application and, both on the client and the server side.

So what does GraphQL code generator do? One of the strengths of GraphQL is that the whole thing is is essentially typed. Right? When you write your types in GraphQL, you're typing everything.

And and when I say types is that every single property, every single object, everything in your API then has a a specific type that it is, And it needs to stay that type. Right? That's that's one of the benefits of having a a type system up and down the stack. So with GraphQL code generator, your code can really it can really gain a lot of understanding about how you use your code based off of your GraphQL files, and your schema files in your site.

Personally, here's what I use it for. One, I use it to generate all of the types For our entire TypeScript system, like all of our resolvers on the server side, all of our hooks and stuff on the front end, everything is fully typed through GraphQL Via GraphQL code generator, and it spits it out into a generated file. It can spit it out in all sorts of ways, but we have it spitting out, especially the types Into a singular type file where we can import those and use them as needed, which ends up being super handy anytime you want to import or you want to have a good standing for instance, we just say, hey. These resolvers are just the type of resolvers imported from the generated code. That way, our entire API and every single resolver On our entire site is typed. It's fantastic. It's unbelievable, and it's free. I mean, it's super duper easy to run.

Another thing that we use this for is generating the hooks for React.

So everybody knows if you've used GraphQL QL on the client side. You have to have some way to query your GraphQL API.

Now you can do it just through a fetch Command passing in a string and stuff like that, but I don't know too many people that do that. They probably use something like Urkel or Apollo is the most popular one or Relay.

However, we have all of those hooks generated for us from GraphQL cogenerator.

And, Seriously, the same thing. We just pass it in. Basically, we tell this thing to suck up every dot GraphQL file on the site. So if we have a query or a mutation, We create a GraphQL file for it. That GraphQL file lives in a folder in this component. We run GraphQL code generator, And it creates a hook. So for us, if we have a let's say, tutorials is the name of the query. What it does is it creates a use tutorials

Query hook. That means without even knowing this thing exists after running GraphQL code generator, I just import use tutorials query. And then instead of having to import Apollo, or any any use query and pass in a query. You don't have to, like, type out all the arguments that it takes and type them and then just, like, hot potato those to the That's, like, one one pain I have with GraphQL right now, and I think that this is the solution is that you have to write these queries in your client code That is essentially just retyping the exact same thing for your like, there obviously are some different use cases and whatnot, but And most of the time, you're just taking in all of the arguments and then, like, hot potatoeing them into your API. This seems awesome.

Yep. So we use it to great success specifically to generate our I mean, the 2 things that save us the most amount of time, generating the hooks. Right? Yeah. Because that's a whole lot of code that you're gonna have to type by hand. 2, the second thing it does the best for us is gives us all that typing for our API, making it so we don't have to write any types at all. I mean, we typed it once in GraphQL. I don't wanna have to write those types again. And then on the front end, since our whole stack is TypeScript, that's all typed as well. So We don't have to write types really for anything because anytime we want to write a type, we just import it from our generated code, And it is using the same type that is generated from the hook itself. It's all really cool because, again, it keeps it all So tight. And if you're not using Apollo, don't worry because this thing has a 1,000 plug ins for it, including TypeScript Urkel, TypeScript Relay, TypeScript Apollo View, React Apollo View, React Query. So if you're using React Query Oh, React Query. Awesome. Yeah. If you're using React Query instead of Apollo or any of these, it will generate all of the hooks for you, so you don't even have to think about it. And that's one of the cool things because, like, If you had a React Query setup or you had an Apollo setup and you were generating the the hooks for it, Let's say the hooks were named the same thing. They could essentially be, like, swap between either Oracle Or Apollo or React Query with a very little effort just because so many of those details implementation details are getting pushed under the rug into the cogenerator side of things. So I always thought that was a little kinda neat thing. It, like, makes it so I I don't have that many bindings to Apollo itself into my project just in case, You know, you ever wanted to change that? You know me. Yeah. Like, I'm I'm just thinking about, like, the differences between the actual client An API between React Query and Apollo, and they're essentially the same thing. Right? Right. That's what I'm saying. There's obviously little differences here in refreshing and whatnot, but, like, the queries and the mutations,

Hooks themselves are pretty much the same, so it would be pretty quick to switch from one to another.

Yeah. There's a lot of really neat stuff in here. Oh, there's a a new Next. JS 1 in here too. So TypeScript, Apollo Next JS. So there's a lot of really great little plug ins in here. You can pop them in. Another neat thing that we do is we have it spit out because, you know, when you write your GraphQL stuff, sometimes you have type files all over the place in your API.

But for us, we wanted to be able to mock our whole API via this WebSocket mocking thing that we have inside Chris. So we wanted to mock our whole API, but you need a complete schema for that. And our UI and our API are totally separate. So I was thinking, like, do I do I set up some sort of, like, file linking between the projects? And I said, no. Actually, it's a really I I made a hook to run that Graph Cool code generator anytime a GraphQL file gets changed. Okay. So I have that, and the GraphQL code generator gets run and spits out a full copy of the most up to date schema and moves it into the UI folder. So then I don't have to have any weird interconnection shared folder stuff between my API and UI that could cause tooling trouble, And it's just like it's just a full copy of the schema. Oh, perfect. Okay.

So, like, really, the possibilities for this thing are endless, but I think, Like, what is the biggest use case for this? I would say getting full typed everything and without having to type code, which is which is a that should be their tagline. You get fully typed API without typing code, so there you go. You're welcome, GraphQL code generator. That's awesome. I I gotta say one more thing that's kinda Similar on the same lines of this is Swagger. Have you used Swagger before? Oh, the only thing that comes to mind when I think of Swagger is there was a dog that won the, Westminster dog named Swagger, and it was an old English. She Mister dog named Swagger knows an old English.

She talks soda. No. That's the only thing I think of when I think of Swagger. Oh, yeah. So Swagger is Like, if you have an API that you need to document, you can document the API in this sex swagger JSON file, and you can tell it what all of your All of your models are, what all of your possible enums are, and things like that, and this is a really popular way in to document out an API. And then from that file, you can automatically generate documentation.

You can generate TypeScript API types. You could generate the testing.

You should see the list of of possible you can generate, like, an Angular lib, and, like, there's probably, like, 50 different libs that it will generate for you. And I was like, oh, this can't be that good. I I was using an API that was using this, and I I asked the author. I was like, hey. Can you kick me out the TypeScript version of this? And they kicked it out, and I was like, wow. This is really good. It came with all the TypeScript types, came with all of the both functional and class based Implementations of the API, so I didn't have to write fetch calls myself. It did it all all under the hood for me, and I was like, oh, man. Like, this This here, like, both of these tools are the, like, the reason why having typed stuff is so nice. Right? Like, If you don't see the benefit of using something like TypeScript or GraphQL because it seems like such a pain, Especially, like, years ago, we are on the other side where we had these, like, NoSQL databases where, like, you could set them to, like, a loose mode, And you could just literally set any properties on anything and just go nuts.

And now the pendulum is the other way where you're like, no. No. No. No.

Define everything beforehand, and, literally, new things like this cogen tools start to pop up. You're, Oh.

Oh,

okay. I'm seeing why this is so awesome. Because the type information gives you so much. It gives you so much about, And some of it, like I mentioned, like, the ability to then, therefore, take this generated schema of types and all that stuff and have it Completely mock all of your network requests via a WebSocket.

It's like like future stuff. It just feels so good, And, I I'm really liking it. If you're wondering how this thing looks in its configuration, if it's difficult to get set up, it's a YAML file. Cogend.YAML, we just have ours is about 28 lines long, but we have several generators. If you were to have, like, 1 generator with a couple of plug ins like React Apollo, TypeScript operations, those types of things. Your YAML config file is gonna be, like, 8 lines long. It's really, really simple. You pointed at the schema. You pointed at the endpoint, whatever. You tell it where to generate the file. You put in the plug ins, and then GraphQL and code generator go, and it Spits out all your stuff. So before we wrap this up, I did wanted to touch on some other neat tools. So this is created by the guild, which you can find at CSF. The hyphen guild dot dev, and they do all open source GraphQL tools. And If you're not using these, Wes, or anybody who's listening, you gotta get on some of these. We use specifically the GraphQL tools package. We use that to great Success for either our mocking or testing. There's, like, schema merging stuff. There's a ton here. They also have GraphQL inspector, which I haven't used.

They have GraphQL config, which looks kind of new, actually. I don't know if I've seen this one. It says one configuration for all of your GraphQL tools. I have not seen that one. But here's another one, Wes, that if you're not using or if anybody's not using, GraphQL scalars.

One of the big pain points in GraphQL is that we have custom types for stuff like date, but, like, GraphQL is like, no. It's cool. You have to implement the the date type in every Project you do because, I don't know. You know? Because we don't wanna we don't wanna be opinionated on or something. Either way, this thing is full of different custom scalars from date Dude, date, time, duration, URL, big int long, HSL, HSLA. So if you wanna type That can validate whether or not something is a HSL or a a URL or a big int postal code, those types of things, Then this is a project for you. You don't have to write those any of yourself.

And, lastly here before we get going, I wanna shout out this little app. I saw somebody on Reddit post the other day or this project.

Pericles.

I don't know if that's the correct pronunciation.

Pericles.

PuriQuilts.

I'm not the right person to try to pronounce this.

The the idea of this is taking this one step further Into our UI territory, what's called painless forms from GraphQL, and it's a React form library using GraphQL Where all you do, Wes, is pass it in the mutation, and it generates the form for you. Oh, man. Seriously? Yeah. It can read the input. It could like, if you had the mutation being generated for you from GraphQL cogen or whatever, you just pass it in here. It's aware of your schema. This thing generates the form. I have not used it yet. I just saw it. I requested a little small feature from them for it, so I think they're gonna Do it, and I'm gonna give this thing a try. It looks so cool. So I put this in the show notes if you're interested. It's like a one liner where you basically just tell it the mutation name, any sort of Callbacks and the argumentation argumentation arguments, specifications, or be yeah. It's pretty cool. So I'm gonna give this a rip and and and, And see how this goes, but I just thought this would be a fun little thing to shout out at the end here. So, shout out to you if you've built this. I think these tools are the definition of low code

where it it's not no code, but it's low code. It's like, why are we all writing the same code to Submit a form, submit, and save it to the database, and handle errors, and and things like that. Right? And it's funny because, like, JavaScript has never been Someone to standardize on 1 framework or implementation.

But now that we are Kinda standardizing on these, like, GraphQL and and TypeScript.

You see a lot of these, like, low code tools come out from it. It doesn't matter what stack you're using is that you'll probably be able to implement these in with with little effort. So this is exciting to me. It's exciting, and I I really like that it is low code, but you can use as much code as you want. You could write as much code as you want. And so, like, that's really the best of both worlds for me where, like, you can have the no code aspects So that where you want to generate things, but at the same time, you get a full control over it. If at any given point, something's doing something wrong, you could say, step over. Let me grab the wheel. Like, you just you just reach over there and grab it. Beauty. Well, I'm excited to to try this out. Thanks for giving us a heads up on this. Yeah. GraphQL code generator has substantially improved our code base. I just owe a lot to them because, like, the Guild, they've created so many Great GraphQL tools, and I use so so many of them. So thank you so much for all of that hard work that you've put into making this stuff. Give it a check if you have not. Alright. Thanks so much for tuning in. We'll catch you on Wednesday.

Peace. Peace.

Head on Or choose syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.