Using GraphQL Code Generator to create a great developer experience with TypeScript and GraphQL.

If you’re anything like me, you’ve recently been writing code almost exclusively in TypeScript, and the odd time you do have to open up a .js file fills you with a mild panic. You probably also spend time building REST APIs and GraphQL layers to communicate with front-end applications. At first TypeScript and GraphQL seem like a match made in heaven; they’re both typed, so they should play nicely together.

However, when you have two different type systems, or two sources of truth for how your data should look (before you even include a database), there is inevitably going to be frustration when building features, and bugs when you release those features. This had been my experience until I came across a project where GraphQL Code Generator was magically creating TS types for me whenever I changed my GraphQL schema. I’m not a huge fan of using magic without understanding the underlying tools, so I wanted to recreate a minimal example to do the same thing, and hopefully other people find this useful as well!

In this article we will:

• Create a TypeScript project from scratch
• Add a very simple GraphQL server
• Add GraphQL Code Generator to integrate them both in a seamless manner

#programming #typescript #graphql