Hasty Treat - Effortless Custom GraphQL with GraphQL Codegen

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 is typed. It's fantastic. It's unbelievable, and it's free. I mean, it's super duper easy to run.

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,

won the, Westminster dog named Swagger, and it was an old English. She Mister dog named Swagger knows an old English.

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?

you're typing everything.

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 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 do? 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 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.

and, both on the client 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, argumentation arguments,

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 this episode where we're talking about GraphQL 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, One of the strengths of GraphQL is that the whole thing is is essentially typed. Right? When you write your types in GraphQL, I'm not the right person to try to pronounce this.

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, 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.

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, 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.

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, code generator.

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, 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

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

If you had a React Query big int long,

Where all you do, Wes, is pass it in or be yeah. It's pretty cool. So I'm gonna give this a rip and and and,

Into our UI territory, what's called painless forms from GraphQL, and it's a React form library

using GraphQL you have a GraphQL API.

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

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 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

and it generates the form for you. Oh, man. Seriously? And and when I say types is that every single property, every single object, everything in your API and the server side.

specifications,

Pericles.

everything

specifically the GraphQL tools package. We use that to great Success 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.

Oh,

beforehand,

via a WebSocket.

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, 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 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. Welcome to Syntax in this swap between either Oracle Or Apollo or React Query with a very little effort just because so many of those 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,

for either our mocking or testing. There's, like, schema merging stuff. There's a ton here. They also have GraphQL

schema of types and all that stuff and have it Completely mock all of your network requests

to then, therefore, take this generated

new things like this cogen tools start to pop up. You're, Oh.

Define 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

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

and, literally,

Sign up, and you

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? TypeScript Relay, TypeScript Apollo View, 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 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.

replay And it's just like it's just a full copy of the schema. Oh, perfect. Okay.

framework or implementation.

Head on Or choose syntax.fm However, we have all of those hooks It's like like future stuff. It just feels so good,

But now that we are

Kinda standardizing on these, like, GraphQL and and TypeScript.

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.

Peace. Peace.

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 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 the mutation, generated for us from GraphQL cogenerator.

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.

the hooks for React.

Apollo is the most popular one or Relay.

So 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.

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 I know. Totally. Well, thank you. You're welcome. So let's talk about our 1st sponsor today, which is .techdomainnames.

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

automatically generate documentation.

are the, like, the reason why having typed stuff is so nice. Right? Like, If you don't see the benefit of

Especially, like, years ago, we are on the other side where we had these, like,

you can document the API in this sex swagger

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.

something like TypeScript or GraphQL because it seems like such a pain, like, both of these tools

document out an API. And then from that file, you can 1

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,

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 You should see the list of of possible

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

using

Another thing that we use this for is generating 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 generator.com.

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 So what does GraphQL code generator 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 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

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

like Local host port 3,000 forward slash GraphQL, for instance, or

You can find that at graphqlyphencodehyphen

it can suck up a schema like a vacuum cleaner and then use it that way instead of Having to actually hit the API.

This thing

What this does is it'll either connects to your GraphQL API via an endpoint, tools. Now I did a talk on GraphQL tools, I think, And for everybody knows if you've used GraphQL QL on the client side. You have to have some way to query your GraphQL API.

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.

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

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%

you gotta get on this thing because it will change your experience with GraphQL.

Tolinski.

soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda,

Monday. Monday. Monday.

Boss, and Scott, El Toro Loco,

.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

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

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 on Someone to standardize and then, like, hot potatoeing them into your API. This seems awesome.

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.

code can really

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

And, inspector, which I haven't used.

in this component. We run GraphQL code generator,

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,

We create a GraphQL file for it. That GraphQL file lives in a folder PuriQuilts.

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,

HSL, HSLA. So if you wanna type

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, Pericles.

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, Personally, here's what I use it for. One, I use it to generate all of the types For our entire TypeScript system, The the idea of this is taking this one step further Check the show notes or just Google GraphQL code generator. I think there is only one of them.

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.

will get

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