GraphQL Code Generator v3: generate GraphQL types has never been easier!

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

GraphQL Code Generator v3 brings the easiest and most lightweight way to get typed GraphQL in your front-ends by only generating types. In this talk, we will see that generating GraphQL types has never been so easy!

This talk has been presented at GraphQL Galaxy 2022, check out the latest edition of this Tech Conference.

FAQ

GraphQL Code Generator is a tool created in 2016 designed to generate schema types, plain TypeScript types, and operation types for both backend and frontend. It supports multiple languages and frameworks.

GraphQL Code Generator was created in 2016.

GraphQL Code Generator supports multiple languages such as TypeScript, JavaScript, Java, C Sharp, Kotlin, and various frameworks including Apollo Client, Urql, Vue, Angular, and more.

The limitations include replicating signature changes, an exponential number of options, and bundle size impact. These challenges arise from the need to wrap multiple libraries and ensure compatibility with their updates and options.

Type Document Node is an experiment started in 2020 to type GraphQL operations without generating hooks. It uses the TypeDocumentNode type to carry the type of the query and variables, providing perfect integration with GraphQL clients in the TypeScript ecosystem.

The Client Preset is a new feature that provides a GraphQL function to generate proper type document node types for variables, ensuring type checking without the need to import documents or types. It offers a lightweight bundle impact and can be used with a Babel plugin for zero runtime impact.

Fragment masking is a concept that uses fragments to represent the data dependencies of components, preventing data leakage between components and making the UI future-proof for deferred usage. It helps express component data dependency in a co-located way.

Future improvements include rewriting the core package for better performance, smarter watch, and fewer generated types, introducing support for modern GraphQL features like defer and stream, and moving frontend plugins to a community-maintained repo.

Users can provide feedback on the GraphQL Code Generator roadmap by participating in the dedicated issue pinned at the top of the issues section on the main GraphQL Code Generator GitHub repository.

The Guild maintains several projects including GraphQL Mesh, Envelope, GraphQL modules, GraphQL Scalars, and the open-source GraphQL registry SaaS called GraphQL Hive.

Charly Poly
Charly Poly
22 min
08 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hi, everyone! Today, I'll be discussing the future of GraphQL Code Generator and the new features that enhance the developer experience. Code Gen has evolved significantly since its creation in 2016, from generating simple types to hooks and now to a new feature. It has expanded to support multiple languages and framework-specific plugins. Code Gen is widely used in the GraphQL stack, with 7 million monthly downloads on NPM. The new features include Type Document Node, which allows typing GraphQL operations without hooks, and the Client Preset, an improved version of Type Document Node. The Client Preset provides a seamless developer experience by generating the GraphQL function that returns the proper type document node type to your variable. Another interesting feature is fragment masking, which simplifies the usage of fragments in GraphQL and allows for better understanding of data dependencies within the component tree.

1. Introduction to GraphQL Code Generator

Short description:

Hi, everyone! Today, I'll be discussing the future of GraphQL Code Generator and the new features that enhance the developer experience. Code Gen has evolved significantly since its creation in 2016, from generating simple types to hooks and now to a new feature. It has expanded to support multiple languages and framework-specific plugins. Code Gen is widely used in the GraphQL stack, with 7 million monthly downloads on NPM.

Hi, everyone, and thank you for being here. I'm happy to be here to talk about the future of GraphQL Code Generator and to new features that we added recently that brings a brand new developer experience. So let's get started. My name is Charlie. I've been working full time on Code Gen for the last six months and especially working on the feature I'm going to showcase today and on the upcoming roadmap for Code Gen.

So, before looking at this new developer experience that Code Gen is bringing, let's take a look at the history of Code Gen and how we went from generating simple type to hooks to the new feature that we're going to see today. So, Code Gen has been created in 2016 to first generate schema types, plain TypeScript types, and then a bit later, in the same year, generating operation types — so, for the backend and also for frontend. But the first version of Code Gen, before 1.0, was just generating plain TypeScript types. Then, a bit later on, Code Gen started to bring support for generating types to many types of languages beyond TypeScript and JavaScript, such as Java, C Sharp, but also Kotlin, etcetera. And a bit later on, again, due to high demand on the front end, Code Gen started to generate like framework-specific plugins, such as Apollo Client, Yorkle, Vue, Angular, and so on. Code Gen, nowadays, is quite famous and present in most GraphQL stack, especially on the client side, with 7 million downloads per month on NPM.

2. Type Document Node and its Benefits

Short description:

Code Gen is widely used on the front end, especially for TypeScript stack, and on the back end with any kind of GraphQL server implementation. While generated hooks and SDK are popular, they come with limitations such as replicating signature changes and an exponential number of options. These drawbacks led to the experiment called Type Document Node, which allows typing GraphQL operations without hooks. Type Document Node provides a perfect integration with clients, offering type checking on variables and results. It is supported by various GraphQL clients in the TypeScript ecosystem.

And if we look at popular usage, Code Gen is very famous on the front end side, especially for TypeScript stack, but also on the back end, with TypeScript stack, but any kind of GraphQL server implementation. And if we look closer on the front end, because this is the subject of today, we're gonna talk about a new experience on the front end, we see that, nowadays, people are very, very happy with generated hooks in SDK.

So while generated hooks and SDK are very famous, we took a step back and looked at also the drawbacks that comes with this certain approach. First, the limitation of hooks and SDK that are generated by Code Gen are, first, replicating signature changes. So since Code Gen now is responsible of wrapping a lot of libraries on the frontend, like React, Query, Apollo, your call in React, but your call in Vue, Apple Angular, etc. All those libraries are living their own life and changing quite often and offering different spectrum of different options.

So we have to make sure that every time we wrap a library, we are providing access to the underlying specific options of each library and we are staying aligned with the different major versions. So this leads to a lot of pull requests, issues of implementation that are sometimes community-driven, that are not following the evolution of the wrapped libraries. The second one is the exponential number of options. So Kodrain itself has a lot of options to make it more tailored, more configurable and to make sure it fits well your usage of TypeScript in your GraphQL stack. But since we are wrapping existing libraries and it has to be flexible, also each plugin gets its own set of options on top of the dozens of options that core packages of Kodrain are offering. So this makes it very hard in the long run to make sure that every introduced new option is compatible with existing one, and that upgrading or changing the behavior of existing options is not going to bring anything in any type of plugin that started to diverge from each other. And finally, the last point is bundle size impact. So we are in a new era of front end and web application where bundle performance and you know bandwidth impact is very important. And Kodrain, when generating like wrappers such as SDK, but especially generating hooks, is generating all this code just to make sure that we forward the types properly and we type check the variable properly.

So all those of the version led to a very specific experiment that has been called Type Document Node. So Type Document Node, it's an experiment that started in 2020, and it started with a simple question. What if we could type GraphQL operations without hooks? What if we could bring the same awesome developer experience that everybody likes around using hooks that are similar to React but without actually generating hooks but using only types?

So this is a query on the left that returns a rate, for example for product, on a given currency. On the right, this is the code that is generated by CodeGen when using the TypeDocumentNode plugin. So as you can see, it's very similar to the early days of CodeGen. Very similar to what the TypeScript and TypeScript operations plugins are generating. The only difference is that here we use a TypeDocumentNode and TypeDocumentNode is a superset of the DocumentNode object and type from the GraphQL.js library and TypeDocumentNode, unlike DocumentNode, is typed properly by carrying the type of the query and the type of the variables. And this allows to have a perfect integration with your client. Here, in this example, you can see that we just import our document, so like you do in any application, you import your document and you pass it directly to the use query of Apollo. And immediately, you get type checking on the variable and you get type result. So here is the data is typed properly with the right query type from TypeScript operations and same with sub properties. So this has been made possible because Dotan and other people from the community has been working very hard to make sure that TypeDocumentNode, this new type version of DocumentNode from GraphQL, JS is supported by all the GraphQL clients in the TypeScript ecosystem. So over the years, all the following work led to a perfect integration in the GraphQL front end TypeScript ecosystem. You can already use TypeDocumentNode with Apollo Client, ReoCall, Preact, React Query, even is the VR. And you can use it also in Svelte, Vue, et cetera.

3. Introduction to the Client Preset

Short description:

CodeGen has evolved to generate more than types and now introduces the Client Preset, an improved version of Type Document Node. Developed as an experiment by Lauren from the Guild, it offers a new developer experience.

So here we can see that the vision it brought is that first Cogen has been created to, you know, generate TypeScript types and then it added some support to other languages which is still true today. But then it started to have a very specific approach inspired from React hooks to generate better and, you know, bring a better developer experience by generating more than types and generating code. And now we are closing the loop with a new developer experience that I'm going to show you right now. And this is not Type Document Node. Type Document Node is a stable way of using it, but now we are bringing an improved version of Type Document Node that has been developed first as an experiment by Lauren from the Guild and now it's been released as a stable plugin from CodeGen. And this new feature is called the Client Preset.

4. GraphQL Query Implementation with Apollo Client

Short description:

This is a GraphQL query implementation with Apollo Client that uses the new Client Preset. It provides a seamless developer experience by generating the GraphQL function that returns the proper type document node type to your variable. This integration with Apollo Client and other clients ensures typed data and type-checked variables. The bundle impact is minimal, as only one function is generated and all types are removed at runtime. The Babel plugin can further reduce the impact to zero.

So this is a GraphQL query implementation with Apollo Client that uses the new Client Preset, the new developer experience of CodeGen. So you can see here that we don't import any type, we don't import any documents, the only thing that we import is the GraphQL function that has been generated for you by CodeGen in the same way that you import GQL when you are using Urql or Apollo Client. And the thing here is that this GraphQL function that we provide you is going to return the proper type document node type to your variable, depending on the query that you are passing to it. Which means that as just showcased with that document node here, by just using this GraphQL function to define your operation, this document variable is going to be typed, it's going to carry the type of the query and the variable, and is perfectly integrated with Apollo Client and all the other clients as they're showcased. So your data is going to be typed and your variable are going to be type checked. The good thing with this approach is that you don't need to import documents or types anymore. When using GraphQL in watch mode, your GraphQL operations get typed as you type, and finally the bundle impact is very light because here we are only generating one function that's being used the same everywhere and we are not generating like one hook per query and we are only generating types. So, all the types are removed at runtime and the only thing that remains is actually the GraphQL query. If you really want to have like a zero bundled impact with this new client preset, you can use the Babel plugin that we provide and that is documented that will remove the GraphQL function at runtime meaning that you will have a full end-to-end typed operation experience without any runtime impact.

5. Fragment Masking in Codegen

Short description:

Let's discuss fragment masking, a new feature in Codegen that aims to simplify the usage of fragments in GraphQL. Fragment masking is a concept introduced by the Relay Team, which suggests using fragments to represent the different views of our application, i.e., components. Each fragment should represent the data used by a specific component. This allows for better understanding of data dependencies within the component tree. Let's take a concrete example to illustrate this concept. We have a dummy app with a document query and a document view fragment. The main component makes the query and uses the client presets to immediately check for any tag errors. The data specific to this fragment is extracted using a special function generated by GraphQL code gen.

So, let's now talk about another thing that is being bring by the client preset which is fragment masking. So, at the Guild and when it comes to all the projects that we maintain, we try to bring the best practices to the ecosystem and not only the thing that we think is the best for us. We are trying to show you what is the best thing to do with GraphQL when it comes to error handling but also typing things. And here, fragment masking is not that famous practice in the GraphQL ecosystem and we think it should benefit from more light and more recognition of the ecosystem.

So this new feature of Codegen is trying to bring you a way of using fragment masking in a way, in a very easy way. So let's talk about fragment in GraphQL. Most of us are using fragments to break down queries into data models. To basically take type and create sub-types of existing type so you can actually pad them in your component, etc, etc. The thing is that by doing so, here we don't really know, we have a UI on the right which is displaying a document and the title is part of the main component, but the acini is one component and the tags are also a dedicated component, and here by looking at the query it's not very clear which part of the data is going to be used by which component. Which makes it pretty hard to know which data is used by a component by just looking at one component without looking at the whole component tree or at least to look at the top component that is loading the data.

So this is exactly what fragment masking is bringing. Fragment masking is a concept that has been brought by Relay Team, so the initial creator of GraphQL which says that fragments should not be used to break down queries into data models. We should use fragments to represent the different views of our application and by views we say components. So each fragment should represent which data is used by a component. So let's put that into practice. Here we have the same query but we changed it. Since we have one component for document we're going to make a top fragment for our main component and this main component only needs the title and the id for the different actions. So here the main fragment for the dog view is going to have the title then the assignee then this component is instantiating two components one for the assignee and one for the tags so we're going to have two fragments that's going to really express what are the data dependency of our child component. Yeah so we have the dog view which instantiates the assignee we display the title instantiate the assignee and the tags and each sub-component gets its own fragment that is collocated with the component itself. So let's see a concrete example because it's very theoretical. So here we are having our client presets with a brand new TypeScript config of CodeJam so we have a schema which is local because this is an example we get all the TypeScript documents and we use a new preset client. Here we are having our app which is of course a dummy app with just to showcase the concept of fragment masking. Here we are having our document query, our document view fragment because we are into the document components. And here since this is the main component it's going to be the one that's going to make the query. So we make the query and like I told you here with the client presets the new experience we get tag checking immediately. So here it's complaining that number is not assigning it's enable to string. And here as you can see we are not importing any kind of document or type. We are just importing the GraphQL function everywhere. Then we say okay we are in the doc view so we use a special function that is exposed generated by GraphQL code gen to extract the data that is specific to this fragment. Which is the fragment of our top component.

6. Fragment Masking and Component Data Dependency

Short description:

Fragment masking allows expressing component data dependency in a co-located way, preventing data leakage between components and making the UI future-proof for deferred usage.

Which is a document view fragment. And here in doc view we get all the data that this component should get access. So this component cannot access the data of children component. It only access the data of it's own fragment which is id and title. If we go down we see that we pass the doc view to the children component. And here for example let's take a look at the tags. So here we have co-location. Here it becomes very very clear that this component gets this data. It gets a subset of data on the doc type from the schema. It gets category created at status. In here you can see that I only get the data I need to... I actually need, you know, to display everything around tags. And same goes with Ascini. So why is this fragment masking interesting? So first it helps you to express component data dependency in a co-located way. Now you don't have like fragments that represent like sub-models on the front-end. It actually represents the data and this is what GraphQL has been made for, is to be very declarative about data dependency in general, but not only at the query level, also at the component level. It prevents leaking data between components. So you're making sure that if one component is responsible for one thing, which is like displaying the title, it does not get access to other types of data, which could lead to wrong implementation. And the good thing is that if you start doing that, if you start to define fragments to describe components, you're making your UI future-proof for deferred usage. And I'm not talking about that today, but you can already start using defer if you're using Apollo with Apollo Router, but also if you're using Apollo or Yocl with GraphQL Yoga or GraphQL Server Library.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
Rock Solid React and GraphQL Apps for People in a Hurry
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Rock Solid React and GraphQL Apps for People in a Hurry
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.
Adopting GraphQL in an Enterprise
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
Adopting GraphQL in an Enterprise
Today's Talk is about adopting GraphQL in an enterprise. It discusses the challenges of using REST APIs and the benefits of GraphQL. The Talk explores different approaches to adopting GraphQL, including coexistence with REST APIs. It emphasizes the power of GraphQL and provides tips for successful adoption. Overall, the Talk highlights the advantages of GraphQL in terms of efficiency, collaboration, and control over APIs.
Step aside resolvers: a new approach to GraphQL execution
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
GraphQL has made a huge impact in the way we build client applications, websites, and mobile apps. Despite the dominance of resolvers, the GraphQL specification does not mandate their use. Introducing Graphast, a new project that compiles GraphQL operations into execution and output plans, providing advanced optimizations. In GraphFast, instead of resolvers, we have plan resolvers that deal with future data. Graphfast plan resolvers are short and efficient, supporting all features of modern GraphQL.

Workshops on related topic

Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
Workshop
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Workshop
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
Workshop
Adron Hall
Adron Hall
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
Build and Deploy a Backend With Fastify & Platformatic
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
Top Content
WorkshopFree
Matteo Collina
Matteo Collina
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
Building GraphQL APIs on top of Ethereum with The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
Workshop
Nader Dabit
Nader Dabit
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
Workshop
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.