GraphQL Code Generator v5 Roadmap

> This page is synced automatically from [The Guild's](https://the-guild.dev) Notion
> Notion page URL: https://www.notion.so/GraphQL-Code-Generator-v4-Roadmap-91923bfb2dee48eaa0d6a77666429968

At [The Guild](https://www.the-guild.dev/), we’ve decided to work as much as possible in public; that’s why we are opening the roadmaps for all of our projects.

The goals for this are:

1. So you will know what we are working on, what we see as a higher priority, and know what to expect from our projects in the future
2. So you can share your opinions and thoughts about what we do and influence our decisions
3. So you can join us and contribute to our efforts!

---

Before laying down the roadmap of GraphQL Code Generator v3, we would like to **thank all of you for being so many who use codegen daily and for contributing to making it such a complete project**! 🚀

While some people judge that GraphQL is difficult, GraphQL Code Generator v3 aims to **change that perspective by providing a unified configuration along with a smaller and simpler generated code**.

By providing a unified package and configuration for all client-side use cases, all existing and future plugin alternatives will be moved to community repos.

Let’s now cover these changes in detail.

## A unified configuration and package for all GraphQL clients

Most of the existing client-side plugins (`typescript-react-apollo`, `typescript-react-query`, etc) rely on the generation of hooks or SDKs that wrap the underlying GraphQL Client in a type-safe way.

However, the generation of hooks or SDK code brings many downsides:

- an unnecessary increase of the final bundle size
- misalignment between the generated hooks signature and the underlying GraphQL Client
- inconsistencies of configuration options and preset compatibility across packages (ex: `near-operation-file` compatibility)

To make GraphQL code generation great and simple, the v3 version will introduce two major changes:

- **a new unique preset for all GraphQL clients, which include better developer experience, smaller bundle size, stronger typings, and easier-to-follow best practices**
- **a TypeScript-first configuration file** that will allow configuration autocompletion

Here is how you can already configure codegen for all GraphQL Clients:

```typescript
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
schema: 'http://localhost:4000/graphql',
documents: ['src/**/*.tsx'],
generates: {
'./src/gql/': {
preset: 'client',
plugins: []
}
}
}

export default config
```

The `client` preset comes with a simple opinionated configuration and a lightweight types-only generation.

To try the new `client` preset, please install the following dependencies:

```bash
yarn add graphql
yarn add -D typescript
yarn add -D @graphql-codegen/cli
yarn add -D @graphql-codegen/client-preset
```

First, start GraphQL Code Generator in watch mode:

```bash
yarn graphql-codegen --watch
```

_Using GraphQL Code Generator will type your GraphQL Query and Mutations as you write them ⚡️_

Now, each query or mutation written with the generated `graphql()` function will be automatically typed!

For example, with Apollo Client (React):

```typescript
import React from 'react';
import { useQuery } from '@apollo/client';
import { graphql } from './gql/gql';

import Film from './Film';

// here, `allFilmsWithVariablesQueryDocument` is fully typed!
const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
query allFilmsWithVariablesQuery($first: Int!) {
allFilms(first: $first) {
edges {
node {
...FilmItem
}
}
}
}
`);

function App() {
// Most GraphQL Clients know how to deal with typed GraphQL documents,
// providing typed data and typed variables
const { data } = useQuery(allFilmsWithVariablesQueryDocument, { variables: { first: 10 } });
return (

);
}

export default App;
```

Thanks to work made to integrate `TypeDocumentNode` (the underlying plugin used by `preset: client`) with most of the popular GraphQL clients, you no longer need hooks or SDK, simple GraphQL documents works!

We believe that the `preset: client` approach is the way to get the best of TypeScript and GraphQL by:

- reducing the size of the generated bundle
- only the `graphql()` function needs to be imported (no type, hooks, document imports)
- removing layers between your application and your chosen GraphQL Client
- providing stronger typings that will stay aligned with your chosen GraphQL Client
- offering you the best component isolation design by [leveraging Fragment Masking](https://relay.dev/docs/principles-and-architecture/thinking-in-relay/#data-masking)

Finally, this new `preset: client` has been properly tested on all popular GraphQL clients across most frameworks:

- **React**
- `@apollo/client` (since `3.2.0`, not when using React Components (``))
- `@urql/core` (since `1.15.0`)
- `@urql/preact` (since `1.4.0`)
- `urql` (since `1.11.0`)
- `graphql-request` (since `5.0.0`)
- `react-query` (with `graphql-request@5.0.0`)
- `swr` (with `graphql-request@5.0.0`)
- `@urql/exchange-graphcache` (since `3.1.11`)
- **Svelte**
- `@urql/svelte` (since `1.1.3`)
- **Vue**
- `@vue/apollo-composable` (since `4.0.0-alpha.13`)
- `villus` (since `1.0.0-beta.8`)
- `@urql/vue` (since `1.11.0`)
- **Others**
- `graphql-js` (since `15.2.0`)
- `graphql-request` (since `5.0.0`)

You will find demos and code examples for each of them in the [`examples/front-end/`](https://github.com/dotansimha/graphql-code-generator/tree/v3-preset-front-end/examples/front-end)[ folder](https://github.com/dotansimha/graphql-code-generator/tree/v3-preset-front-end/examples/front-end) of the codegen repository.

You will also find a [complete guide for React and Vue in codegen documentation](https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue).

We aim for GraphQL Code Generator 3.0’s client preset to become the official way to generate GraphQL Types for front-end use cases, replacing all existing hook and SDK-based plugins.

For this reason, we encourage you to already give a try at the codegen v3 `client` preset (`@graphql-codegen/client-presec`) and provide feedback on this issue.

The v3 stable release will be shipped once sufficient feedback is posted.

Finally, while the GraphQL Code Generator `3.0` milestone aims to provide a unified front-end experience through the `preset: client`, the `3.x` versions aim to fully rewrite the core packages of codegen.

Some core parts of codegen are more than 6 years old and need to be rewritten (optimized, simplified, and more).

We plan to incorporate the pending issues related to the core packages in this gradual `3.x` milestones.

## Introduction of the “community plugins”

Historically, all plugins were pushed to the [https://github.com/dotansimha/graphql-code-generator](https://github.com/dotansimha/graphql-code-generator) repository, making it hard for us to review all contributions in a reasonable timeframe and to enforce consistency across all the options introduced in the different packages.

We believe that the best way to keep codegen extensible and improve the contribution experience at scale is to introduce the concept of _community plugins_.

> A community plugin offers a feature-set that diverges from the `preset: client` or a plugin created by the community.

Soon, all the existing plugins part of the list below and all the future plugins created by the community will live in their dedicated repository:

- `@graphql-codegen/typescript-react-apollo`
- `@graphql-codegen/typescript-graphql-request`
- `@graphql-codegen/typescript-apollo-angular`
- `@graphql-codegen/typescript-apollo-client-helpers`
- `@graphql-codegen/typescript-react-query`
- `@graphql-codegen/typescript-urql`
- `@graphql-codegen/named-operations-object`
- `@graphql-codegen/urql-introspection`
- `@graphql-codegen/flow-resolvers`
- `@graphql-codegen/typescript-vue-apollo`
- `@graphql-codegen/typescript-rtk-query`
- `@graphql-codegen/flow-operations`
- `@graphql-codegen/typescript-msw`
- `@graphql-codegen/typescript-mongodb`
- `@graphql-codegen/typescript-type-graphql`
- `@graphql-codegen/jsdoc`
- `@graphql-codegen/typescript-vue-urql`
- `@graphql-codegen/kotlin`
- `@graphql-codegen/typescript-vue-apollo-smart-ops`
- `@graphql-codegen/java`
- `@graphql-codegen/c-sharp-operations`
- `@graphql-codegen/hasura-allow-list`
- `@graphql-codegen/typescript-stencil-apollo`
- `@graphql-codegen/relay-operation-optimizer`
- `@graphql-codegen/typescript-oclif`
- `@graphql-codegen/java-resolvers`
- `@graphql-codegen/java-apollo-android`

_All the above plugins will be eligible for repository ownership transfer based on relevant past contributions._

Of course, such a change will come with help from our side:

- We will create a new “Create a plugin” guide that will provide complete information and guidelines (ex: publishing, codegen APIs, adding your plugin to the codegen hub)
- Since each community plugin will live in its own repository, we will provide a proper Github repository template with building and publishing CI tools configured.

### What about server-side plugins?

The `3.x` milestones include some work on server-side plugins such as `typescript-resolvers` (ex: improving Federation support).

---

## Milestones

Below are the details of the aforementioned plans for the `3.0` and `3.x` milestones.

### `3.0`

- `client` preset
- Integrate with most of the GraphQL clients
- [x] `graphql-request` [https://github.com/prisma-labs/graphql-request/pull/350/files](https://github.com/prisma-labs/graphql-request/pull/350/files)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/8061](https://github.com/dotansimha/graphql-code-generator/issues/8061)
- [ ] Improve TypeScript support in libraries that already support TypedDocumentNode (variables should be required if there are required variables in the operation declaration and optional if there are none)
- [ ] URQL
- [ ] Apollo Client
- [x] React Query (works with `graphql-request`)
- [x] SWR (works with `graphql-request`)
- [ ] Add support for AWS AppSync client
- [x] Fix pending issues on `gql-tag-operation-preset`
- [https://github.com/dotansimha/graphql-code-generator/issues/8206](https://github.com/dotansimha/graphql-code-generator/issues/8206)
- [x] canary release: [https://github.com/dotansimha/graphql-code-generator/pull/8248](https://github.com/dotansimha/graphql-code-generator/pull/8248)
- [x] TypeScript config support
- [x] `documents` preset preconfiguration
- [x] opinionated plugins configuration
- [ ] deprecate `gql-tag-operations-preset` in favor of the `client-preset`
- [x] examples: [https://github.com/dotansimha/graphql-code-generator/pull/8184](https://github.com/dotansimha/graphql-code-generator/pull/8184)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/8413](https://github.com/dotansimha/graphql-code-generator/issues/8413)
- Update documentation for front-end/GraphQL clients parts
- [x] Update `graphql-request` [docs on their repo](https://github.com/prisma-labs/graphql-request#community)
- [https://github.com/prisma-labs/graphql-request/pull/392](https://github.com/prisma-labs/graphql-request/pull/392)
- [x] Update Apollo Client docs
- [https://github.com/apollographql/apollo-client/pull/10173](https://github.com/apollographql/apollo-client/pull/10173)
- [x] Update URQL docs
- [https://github.com/FormidableLabs/urql/pull/2729](https://github.com/FormidableLabs/urql/pull/2729)
- [ ] Update `apollo-angular` docs
- **→ not enough time**
- [x] Update [SWR GraphQL documentation ](https://swr.vercel.app/docs/data-fetching#graphql)with a link to codegen doc
- [https://github.com/vercel/swr-site/pull/359](https://github.com/vercel/swr-site/pull/359)
- [x] official release 🚢
- [ ] better TypeScript/VSCode integration
- Potential solution: [https://github.com/dotansimha/graphql-code-generator/discussions/8345#discussioncomment-4028928](https://github.com/dotansimha/graphql-code-generator/discussions/8345#discussioncomment-4028928)
- [ ] create a Github template repository
- [ ] new documentation for creating a plugin
- [ ] + updated contributing guidelines
- [ ] move all community plugins to a dedicated repository
- [ ] move the related issues + communicate about new contribution guidelines
- [ ] Reach out to potential people who want to support

### `3.x`

**`preset: client`** **improvements**

- [ ] Only generate actually used types
- [ ] Support operation minification/compilation? (aka embed/re-invent relay-compiler) [https://relay-compiler-repl.netlify.app/](https://relay-compiler-repl.netlify.app/)
- [ ] Support (parameterized) Fragment Arguments? [https://github.com/graphql/graphql-spec/issues/204](https://github.com/graphql/graphql-spec/issues/204)
- [x] [“Client Controlled Nullability”](https://github.com/graphql/graphql-wg/blob/main/rfcs/ClientControlledNullability.md) support
→ [https://github.com/dotansimha/graphql-code-generator/pull/8071](https://github.com/dotansimha/graphql-code-generator/pull/8071)
- [x] Create a TypedDocumentNode string alternative (TypedString) that does not require GraphQL AST on the Client (should be easily configurable within the preset)
- [x] [https://tortilla-hq.slack.com/archives/CCVDM3NCD/p1659508122835199](https://tortilla-hq.slack.com/archives/CCVDM3NCD/p1659508122835199)
- [x] [https://github.com/dotansimha/graphql-code-generator/issues/7885](https://github.com/dotansimha/graphql-code-generator/issues/7885)
- [ ] Refactor `preset: client` to not use the old plugins (**get rid of actual core packages**)

**Future of codegen CLI**

- [ ] Better TypeScript config support
- [ ] get typed options (`config`) → WIP 🚧
- [x] [https://github.com/dotansimha/graphql-code-generator/issues/8200](https://github.com/dotansimha/graphql-code-generator/issues/8200)
- [ ] Allow generating outputs even if there are no documents (so you can still generate the gql function for getting started)
- [ ] Better configuration
- [ ] Performance
- [https://github.com/dotansimha/graphql-code-generator/issues/5642](https://github.com/dotansimha/graphql-code-generator/issues/5642)
- Incremental builds ([https://github.com/dotansimha/graphql-code-generator/pull/6142](https://github.com/dotansimha/graphql-code-generator/pull/6142))
- [ ] Remove `graphql` dependency
- [ ] Better monorepo support?
- multi-project, etc.
- shareable configs? → (one codegen file versus many)

**Back-end code generation issues**

We will go over the following `typescript-resolvers` and `graphql-modules` pending plugins issues:

- [x] [https://github.com/dotansimha/graphql-code-generator/issues/2194](https://github.com/dotansimha/graphql-code-generator/issues/2194)
- [x] [https://github.com/dotansimha/graphql-code-generator/issues/3207](https://github.com/dotansimha/graphql-code-generator/issues/3207)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/3619](https://github.com/dotansimha/graphql-code-generator/issues/3619)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/3815](https://github.com/dotansimha/graphql-code-generator/issues/3815)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/3873](https://github.com/dotansimha/graphql-code-generator/issues/3873)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/3958](https://github.com/dotansimha/graphql-code-generator/issues/3958)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/4121](https://github.com/dotansimha/graphql-code-generator/issues/4121)
- [x] [https://github.com/dotansimha/graphql-code-generator/issues/4722](https://github.com/dotansimha/graphql-code-generator/issues/4722)
- [x] [https://github.com/dotansimha/graphql-code-generator/issues/4739](https://github.com/dotansimha/graphql-code-generator/issues/4739)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/4788](https://github.com/dotansimha/graphql-code-generator/issues/4788)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/4901](https://github.com/dotansimha/graphql-code-generator/issues/4901)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/5517](https://github.com/dotansimha/graphql-code-generator/issues/5517)
- [x] [https://github.com/dotansimha/graphql-code-generator/issues/5841](https://github.com/dotansimha/graphql-code-generator/issues/5841)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/5776](https://github.com/dotansimha/graphql-code-generator/issues/5776)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/5594](https://github.com/dotansimha/graphql-code-generator/issues/5594)
- [x] [https://github.com/dotansimha/graphql-code-generator/issues/5646](https://github.com/dotansimha/graphql-code-generator/issues/5646)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/5998](https://github.com/dotansimha/graphql-code-generator/issues/5998)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/5968](https://github.com/dotansimha/graphql-code-generator/issues/5968)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/5964](https://github.com/dotansimha/graphql-code-generator/issues/5964)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/6483](https://github.com/dotansimha/graphql-code-generator/issues/6483)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/6482](https://github.com/dotansimha/graphql-code-generator/issues/6482)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/6443](https://github.com/dotansimha/graphql-code-generator/issues/6443)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/6173](https://github.com/dotansimha/graphql-code-generator/issues/6173)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/7358](https://github.com/dotansimha/graphql-code-generator/issues/7358)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/7373](https://github.com/dotansimha/graphql-code-generator/issues/7373)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/7560](https://github.com/dotansimha/graphql-code-generator/issues/7560)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/5242](https://github.com/dotansimha/graphql-code-generator/issues/5242)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/5139](https://github.com/dotansimha/graphql-code-generator/issues/5139)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/6023](https://github.com/dotansimha/graphql-code-generator/issues/6023)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/6851](https://github.com/dotansimha/graphql-code-generator/issues/6851)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/6851](https://github.com/dotansimha/graphql-code-generator/issues/6851)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/7123](https://github.com/dotansimha/graphql-code-generator/issues/7123)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/7123](https://github.com/dotansimha/graphql-code-generator/issues/7123)
- [ ] [https://github.com/dotansimha/graphql-code-generator/issues/7671](https://github.com/dotansimha/graphql-code-generator/issues/7671)