The Next Generation of GraphQL and TypeScript

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

New features in TypeScript that can improve our GraphQL workflow.

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

FAQ

The integration of GraphQL and TypeScript is crucial for maintaining type consistency between the GraphQL schema and TypeScript code, particularly in resolvers. This synchronization helps prevent runtime errors by ensuring that any changes in the schema are accurately reflected in the TypeScript implementation.

GraphQL Cogen is an open-source tool that automates the generation of code and types from GraphQL schemas to enhance developer experience and type safety. It supports multiple languages and allows for the creation of custom plugins to tailor the output to specific needs.

The TypeScript plugin in GraphQL Cogen generates TypeScript types directly from a GraphQL schema. It facilitates type safety by creating types that are dynamic and based on the specific GraphQL operations used, such as queries and mutations.

The TypeScript React Apollo plugin generates ready-to-use React hooks based on Apollo Client and GraphQL operations. It pre-compiles these operations into hooks that include built-in type validation and autocomplete for variables and result types, simplifying the development process.

A Type Document Node is a concept in GraphQL Cogen where a GraphQL operation is converted into an object that includes type information for both the variables and the result. This allows developers to use these types without having to manually specify them, enhancing type safety and reducing the risk of errors.

TypeScript 4.1 introduces enhanced capabilities for manipulating strings at the compiler level. This includes creating types from strings that can dynamically extract and manipulate substrings based on specified patterns, increasing the flexibility and power of type creation in TypeScript.

The next evolution in integrating TypeScript with GraphQL involves using TypeScript to parse and validate GraphQL strings directly, aiming to create types and resolvers on the fly. This approach seeks to further tighten the integration and enhance the developer experience by leveraging TypeScript's capabilities at the compiler level.

Dotan Simha
Dotan Simha
22 min
02 Jul, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The video focuses on integrating GraphQL and TypeScript to maintain type consistency and reduce runtime errors. It introduces GraphQL Cogen, a tool that generates TypeScript types and code to improve developer experience. The TypeScript plugin in GraphQL Cogen generates types from GraphQL schemas, enhancing type safety. The TypeScript React Apollo plugin creates React hooks based on Apollo Client and GraphQL operations. A new concept, Type Document Node, generates a document node from GraphQL operations, providing type safety and auto-completion. The video also discusses TypeScript 4.1's string manipulation capabilities, which allow for dynamic type creation from GraphQL SDL strings. The speaker emphasizes the need for community help to overcome TypeScript's limitations in parsing complex strings.

1. Introduction to GraphQL and TypeScript Integration

Short description:

I'm Lhothan, the CTO of the Guild, a group of open source developers focused on GraphQL and TypeScript integration. Keeping the GraphQL schema and TypeScript code in sync is crucial to reduce runtime errors. GraphQL Cogen is a flexible tool that generates TypeScript types and code to improve developer experience and type safety. Let's dive into the most popular plugins, starting with TypeScript, which generates types based on the GraphQL schema and operations. We also generate code, like the TypeScript React Apollo plugin.

Hi, everyone. My name is Lhothan. I am the CTO of a group called the Guild. We're a group of open source developers mainly focused on GraphQL and its ecosystem. I'm here today to talk with you about GraphQL, TypeScript, the integration of the two, and tooling around it. And also a bit about the next generation of TypeScript and GraphQL integration.

So, let's start with the basics. Why do we even need this kind of integration? Each language has its own type system. GraphQL has its own type system where you define your GraphQL schema. It's called SDL and there is TypeScript which has its own type system. So, while writing your GraphQL schema, you need to keep in sync your GraphQL SDL where you define the actual schema and your TypeScript code where you write your actual implementation in resolvers. You can either do it manually and keep it in sync manually or you can use tooling for that. This is what I'm going to discuss in this case.

Keeping the two type systems in sync is very important because, consider a field that you have removed or added to your GraphQL schema, it needs to be reflected in the TypeScript code. So keeping this two in sync is important and will probably reduce most of your runtime errors related to GraphQL and TypeScript. So a few years ago I had issues with GraphQL and TypeScript, so I started with a small open source called GraphQL Cogen. This was four years ago and today we have a huge community and we're not generating only TypeScript it also flows C Sharp, Java much more, and we're generating more than just types, we're generating like an actual code that can help you to improve your developer experience and your type safety. Cogen is a very flexible tool you can write your own plugins and configure the output hook into the generation process and add your own code so it's pretty cool. I'm going to talk a bit about the most popular plugins that we have today that are related to TypeScript.

So the first one is TypeScript, the one that I mentioned before. This plugin just generates TypeScript types out of your GraphQL schema and this seems very similar because the type systems are kind of similar and we aim to generate code in TypeScript that is similar as possible to the GraphQL schema. But GraphQL schema isn't all. We also have queries mutations and everything that involves a selection set which is one of the most powerful features of GraphQL, the ability to choose fields and select exactly what you need and not more than that. So given the fact that you can choose the fields it means that your types are kind of dynamic and based on your selection of fields. So we are also generating types based on your GraphQL operations. So when you use it in your code you'll have fully typed safety. But this is only types. We're also generating more. As I said we're generating code. So here is a small example for another plugin called TypeScript React Apollo.

2. GraphQL Cogen Plugin Features

Short description:

The plugin generates ready-to-use React hooks based on Apollo Client and your operations. It pre-compiles the GraphQL operations and creates hooks based on the operation name. No manual type specification is needed, as types are burned into the generated hooks. The tool also generates a complete Resolvers signature, utilities for various frameworks, and supports multiple languages and integration with various tools. Give it a try with the live demo on our website.

And this plugin generates ready-to-use React hooks based on Apollo Client and on your operations. So it basically takes your GraphQL operations, pre-compiles those and creates ready-to-use hooks based on your operation name. So when you use it in your code, all you need to do is just to import the hook, provide your variables and then use the data.

And the idea is that we are burning the types into the generated hooks. So you don't need to specify manually types or anything like that. You just get autocomplete and type validation for the variables and the result type. So this is pretty cool. As I said, we're not generating just types and that, we're generating more.

There is Resolvers signature. So if you are a backend developer writing your GraphQL schema and implementation, you can generate a complete Resolvers signature out of your schema and integrate your own model types into that signature. We're generating a few utilities for Apollo Client, but not only, also for Oracle, GraphQL request, Vue, Stencil, Angular, whatever, you name it. And it's not only JavaScript and TypeScript, we're also generating more for more languages, and we're integrating basically with every tool that's available on this kind of ecosystem. So, you can use it with Webpack and with Gatsby and Next.js. And recently we introduced a new plugin for React query, if you're using it. So, give it a try, we have a very nice live demo on our website, you can just try it and see what is the output based on the input which you can just change or add. So, give it a try.

3. Introduction to Type Document Node

Short description:

Recently, we introduced a new concept and plugin in GraphQL Cogent called Type Document Node. It generates a document node from your GraphQL operation, including the types of the result and variables. If your client library supports typed document node, you can precompile your operations and get type safety and auto-completion. By merging the trees into a single object, TypeScript inference automatically detects types based on the document. Type document node is supported by GraphQL.js, Apollo Client 3, and Oracle. Additional libraries are supported through patches.

So, let's move to the next topic. Recently we introduced a new concept and a plugin in GraphQL Cogent called Type Document Node. So, basically what we're doing here, we're taking your GraphQL operation and we're generating a document node out of it, which is just an object representation of the GraphQL operation, nothing more than that, but what we're adding is the types of the result and the types of the variables burned into that object.

So, if you are using a client library that supports a typed document node, you can just precompile your GraphQL operations into a document node and just use it with your library and you don't need to specify anything else. Like you don't need to add types, you don't need to explicitly set the generics or something like that. You can just use the types as is and you'll get type safety on your variables and on your result, but also you'll get auto-completion based on the selection set that you chose and the fields that you wanted to use. So, this is pretty awesome.

So, if you wanted to know how it works. So, if you are not using typed document node, what we're generating for you today is a separate type for the result type of the operation, a separate type for the variables of that operation and a document node. As I said, it's just a compiled version of your GraphQL query. But these three are separate. Each one of them is defined separately. And when you use it, you need to specify two types and the object of the document itself. This might be an issue because using it like that means that if you'll get the type wrong, you won't catch it during development and you might get it only on runtime where it's too late.

So, we're thinking of how we can avoid this kind of explicitly set types. So, what we did is we took that document node. We took that type that we generated for the result type and the type for the variables. And we just merged all of the trees together into a single object. And the idea is that we're using TypeScript inference to automatically detect the types based on the document that you are passing. So, if you're using a library that supports type document node, all you need to do is just provide your GraphQL operation. You'll just get automatic types and auto-completion based on that operation. So, this is pretty awesome. And here, there are no, there is no place for mistakes, because you don't need to specify types manually or anything else. Just use it and it will be typed.

So, at the moment, type document node is supported directly from GraphQL.js. The type itself is part of the GraphQL.js implementation, so you can just use it from there. And this is gradually, becomes the standard for this kind of integration. Apollo Client 3 and Oracle adopted it and they are now using it and if you're using type document node, all you need to do is just specify it and the types will be inferred automatically. If you're not using those libraries, you can just go to the type document node repository, where you can see a list of additional plugins, additional libraries that we support. You can just use a patch that we provide and it will add support for those libraries until they will support it.

4. TypeScript 4.1 String Manipulation

Short description:

In TypeScript 4.1, you can manipulate string types at the compiler level. By defining specific structures and using TypeScript inference, you can extract and manipulate substrings, validate structures, and more. This powerful feature allows you to convert GraphQL SDL strings into types during compiler transpilation.

So far with type document node, my next topic for today is the next version of TypeScript, which is TypeScript 4.1 and the new awesome feature that it has. In this version of TypeScript, you are going to be able to use strings and do manipulation for those string at the level of this TypeScript compiler. This sounds a bit vague, I know, but think of taking string types that you define on TypeScript, like you see here, and just do manipulations for it at the level of your TypeScript compiler.

Here, for example, we define a type with the string world, and then we have a new type with greeting, and we just concat the string, and we have a new type with that output. So this is simple, but we can do much more with it. Let's take this one, for example. At this example, I defined a new type called statement, and it just has a string. I also defined a new helper type called extract name, and this type is kind of sophisticated. What it does, it takes the string, any string, and it tries to extract a specific structure out of it. So in this case, what we're doing is looking for a structure that starts with hello and then some name and then the rest of the string. We're using here TypeScript inference to extract the name. So basically, we're saying if this string matches this structure exactly, give me that name. Otherwise, just return never, which is our way to say it didn't work.

So let's say that I'm using this helper with my string here. The extracted type as you can see is my name, which is pretty cool. And this is all done at the level of the compiler. So we can do strings manipulations and extract some kind of like substrings and even detect structure, do validations. So this is pretty cool, but this is a simple string. We can do even more. Let's take this example. In this example, as you can see, I took the same string, but I added some more logic to that helper. So now extract name instead of just looking for a specific structure, it's looking for a more dynamic flow. So we're using inference to extract the greeting and then we expect a space and then the name and then a comma and then a space and then the question. Instead of just returning what we found, we can return a type, a new type script type that contains this. For example in this specific string we're going to get a splitted version of my string. So here we can see I have a name which is my name and greeting which is the actual greeting and the question, and this is like a type script type that we can use. As I said all of that is happening at the compiler level and we can take any string and apply any set of rules. So any string that follows a standard or a specific structure that is well defined can be put here and we can write the rule for extracting whatever inside. This is mind-blowing because as of today what we're doing with TypeScript and GraphQL, we're taking the GraphQL, converting it to AST, and then we take this AST and generate code and this code is later being loaded. But if we can take the GraphQL SDL as a string and just convert it as is into a type in real time during the compiler transpilation of the code.

5. Parsing GraphQL Type Definitions with Lexer

Short description:

You can take any GraphQL string and create the representing types of it on the fly. I wrote a basic GraphQL lexer to break the string into small pieces and parse it into the document node. By understanding the links between the pieces, we can create types on the fly at the compiler level. I re-implemented the GraphQL JS lexer in TypeScript helpers to parse type definitions and validate the language.

So this is mind-blowing because you can take any GraphQL string and create the representing types of it on the fly. So I took some time and I wrote a very basic GraphQL lexer. So as I said, GraphQL is structured. It's a structured language. We have this type system and we have the exact structure that defines the language and the components that are in it. So it's built as pieces as a small pieces that link to each other. This kind of representation is called lexer.

So what basically happens when you call GraphQL dot parse on a string, GraphQL takes the string, breaks it into a lot of small pieces and then takes those pieces and parses it into the actual document node and do validations on it. So if we take for example this simple query, simple type definition in GraphQL, let's try to break it into pieces. If we just try to understand what are the actual pieces here. So we have a type, the keyword type, and then another word, and then we have a brace here, and then we have another all of those are well defined in the GraphQL, let's call it dictionary because this defines how each sentence in the GraphQL language is structured. So in our case, this is how it will look like we have this how GraphQL will break it to pieces. So thinking of this new feature in TypeScript and GraphQL, we can basically take this kind of string and on the fly, convert it to the representation of the type. So if we can break it to pieces, like each piece on its own and understand the links between them, we can eventually be at a place where we can take a string that contains a GraphQL definition, it could be either a type or an operation, and create types on the fly on the compiler level.

So, I did a small example for how it's really working. What I did is, I took the implementation of the original GraphQL JS lexer and tried to re-implement it in TypeScript helpers. The idea behind it is to be able to define a GraphQL lexer that knows how to parse type definition on runtime and do this validation of the actual language. So what happens here is I took this string that defines a GraphQL type definition and I created a TypeScript helper called parse-graphql-lexer. And basically, what it does, it just looks for specific characters in the string level and it tries to break it to pieces. Each piece just points to the next one. This is how the original GraphQL lexer works. I was just trying to re-implement it with the type system. So as you can see here, I'm just looking for specific tokens that are known for us and are valid in the GraphQL language. And what I'm doing here, I'm trying to extract each one and then I'm moving to the next one. So in this case, we start with the beginning of the string and then here, as you can see in the result, we have a name. This type word is just a name for the lexer part because it's not parsed yet. So what we're doing, we just name it. And then I move into the next one, and as you can see here, we start with the name, name and then brace and this is fairly like a very long type definition because our goal is to be able to parse that into a structure that later can be used. So this is just a proof of concept. And the idea here was to take the very basic string and parse it into pieces that are understand.

6. Parsing GraphQL Strings and Seeking Community Help

Short description:

We can convert graphical strings into types on the fly, parse graphical schemas and operations dynamically, and create resolver signatures. However, there are limitations in TypeScript with parsing complex and multiline strings. We're actively seeking community help to overcome these limitations and improve the TypeScript and GraphQL ecosystem.

This is just a basic example of how we can take the graphical string and convert it into a type on the fly. But actually, there is more. If we're able to understand the structure from a graphical string, we can parse graphical schemas on the fly. We can understand graphical operations on the fly. And basically, take graphical strings and make it available for use within the TypeScript language.

So if we'll be able to understand the complete structure of a string, we can even have like a resolver signature that is typed on the fly. And actually, much more. So at the moment, this is just a proof of concept as I said. Our goal is to have more than that. But we need the help of the community.

At the moment, there are a few limitations at the level of TypeScript. We can't really parse very complicated strings and we can't really parse and deal with multiline strings that has white spaces. So we're trying to find ways to solve all that and make the TypeScript and GraphQL ecosystem much better. So if you're having ideas and this is something that interests you, feel free to ping us and maybe we can work together. So that's it for me. I hope that this talk was interesting for you. If you're having any questions, feel free to ping me or anyone from the guild on the discord channel.

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

React's Most Useful Types
React Day Berlin 2023React Day Berlin 2023
21 min
React's Most Useful Types
Top Content
Watch video: React's Most Useful Types
Today's Talk focuses on React's best types and JSX. It covers the types of JSX and React components, including React.fc and React.reactnode. The discussion also explores JSX intrinsic elements and react.component props, highlighting their differences and use cases. The Talk concludes with insights on using React.componentType and passing components, as well as utilizing the react.element ref type for external libraries like React-Select.
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.
TypeScript and React: Secrets of a Happy Marriage
React Advanced 2022React Advanced 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.
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.
Making Magic: Building a TypeScript-First Framework
TypeScript Congress 2023TypeScript Congress 2023
31 min
Making Magic: Building a TypeScript-First Framework
Top Content
Daniel Rowe discusses building a TypeScript-first framework at TypeScript Congress and shares his involvement in various projects. Nuxt is a progressive framework built on Vue.js, aiming to reduce friction and distraction for developers. It leverages TypeScript for inference and aims to be the source of truth for projects. Nuxt provides type safety and extensibility through integration with TypeScript. Migrating to TypeScript offers long-term maintenance benefits and can uncover hidden bugs. Nuxt focuses on improving existing tools and finds inspiration in frameworks like TRPC.
Stop Writing Your Routes
Vue.js London 2023Vue.js London 2023
30 min
Stop Writing Your Routes
Top Content
Designing APIs is a challenge, and it's important to consider the language used and different versions of the API. API ergonomics focus on ease of use and trade-offs. Routing is a misunderstood aspect of API design, and file-based routing can simplify it. Unplugging View Router provides typed routes and eliminates the need to pass routes when creating the router. Data loading and handling can be improved with data loaders and predictable routes. Handling protected routes and index and ID files are also discussed.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Mastering advanced concepts in TypeScript
React Summit US 2023React Summit US 2023
132 min
Mastering advanced concepts in TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript is not just types and interfaces. Join this workshop to master more advanced features of TypeScript that will make your code bullet-proof. We will cover conditional types and infer notation, template strings and how to map over union types and object/array properties. Each topic will be demonstrated on a sample application that was written with basic types or no types at all and we will together improve the code so you get more familiar with each feature and can bring this new knowledge directly into your projects.
You will learn:- - What are conditional types and infer notation- What are template strings- How to map over union types and object/array properties.
Deep TypeScript Tips & Tricks
Node Congress 2024Node Congress 2024
83 min
Deep TypeScript Tips & Tricks
Top Content
Featured Workshop
Josh Goldberg
Josh Goldberg
TypeScript has a powerful type system with all sorts of fancy features for representing wild and wacky JavaScript states. But the syntax to do so isn't always straightforward, and the error messages aren't always precise in telling you what's wrong. Let's dive into how many of TypeScript's more powerful features really work, what kinds of real-world problems they solve, and how to wrestle the type system into submission so you can write truly excellent TypeScript code.
Best Practices and Advanced TypeScript Tips for React Developers
React Advanced 2022React Advanced 2022
148 min
Best Practices and Advanced TypeScript Tips for React Developers
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you.In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
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