GraphQL Code Generator v0.11
Tags: graphql, codegen
Published: 2021-07-29 08:56:12

> This article was published on Tuesday, August 21, 2018 by [Dotan Simha](https://twitter.com/dotansimha) @ [The Guild Blog](https://the-guild.dev/)

<Callout type="warning">
  This blog post refers to an outdated version, please check http://graphql-code-generator.com/ for
  the latest docs!
</Callout>## Generate React and Angular Apollo Components, Resolver Signatures and Much More!We are very excited to announce a new release for graphql-code-generator!If you haven't checkout [graphql-code-generator](https://graphql-code-generator.com) before, please
check out the following introductory blog posts:*   [GraphQL Code-Generator](/blog/graphql-code-generator)
*   [What's new in GraphQL Code Generator 0.9.0](/blog/graphql-code-generator-090)**v0.11** holds a lot of improvements, new features and a couple of new templates, mostly in
Typescript — for frontend and backend!Here is the gist of it:*   **New React and Angular templates** to greatly simplify the usage of Apollo Client and Typescript
    and auto-generate a lot of the current boilerplate
*   **Generate types for resolvers**
*   Major overall to support generation of **custom scalar types**
*   Support for **GraphQL-Yoga** with **graphql-import**
*   Watch mode
*   Major refactoring and improvements to the **Typescript Mongo template*****But the best part of all — on this release we saw a **major increase in contributions and
contributors**! This is a strong sign for the growth of the ecosystem around graphql-code-generator.> Thank you so much everyone, we are humbled by your help. keep it coming!Even though we haven't decided to declare 1.0 yet, we use this library on each one of our projects
and our clients projects.Each PR merged creates an alpha release to npm which we then test out and upgrade all of those
applications.Only then we release a full npm version, so you can be assured that by time of the release, it has
already been tested by major Enterprise applications who deploy daily into production, on top of all
the unit tests on the project!So all the new features that are being mention on this post, are already being used by us
extensively.OK, let's start with the new features for the **client side** Typescript users:## React Templates[react-apollo](https://github.com/apollographql/react-apollo) recently introduced
[a new default API](https://blog.apollographql.com/introducing-react-apollo-2-1-c837cc23d926) with
Query, Mutation and Subscription components.Whether you use the new API or prefer HOC and you use Typescript, there is no need to write those
wrapper components again and again!With the new
[TypeScript React Apollo Template](https://github.com/dotansimha/graphql-code-generator/tree/master/packages/templates/typescript-react-apollo),
you don't need to anymore!All you need to do is to write your GraphQL Query, Mutation or Subscription, and the codegen will
generate **fully typed** react-apollo components and HOC for each one.That makes using React Apollo with Typescript so much simpler!You can read more about it in the following blog post:/blog/codegen-typescript-react-apolloThank you [Arda TANRIKULU](https://twitter.com/ardatanrikulu) for that amazing contribution!## Angular TemplatesBut why just React? Angular should get the same benefits\![Apollo-angular](https://github.com/kamilkisiela/apollo-angular) also recently added added the
Query, Mutation and Subscription services.But why writing them by yourself?With the new
[TypeScript Angular Apollo Template](https://github.com/dotansimha/graphql-code-generator/tree/master/packages/templates/typescript-apollo-angular),
all you need to do is to write your GraphQL Query, Mutation or Subscription, and the codegen will
generate a fully functioning, fully typed Angular service for each of those!As this was a contribution by [Kamil Kisiela](https://twitter.com/kamilkisiela), the creator and
maintainer of the apollo-angular library, we believe we can endorse it from now on as the best way
of using apollo-angular!You can read more about it in the following blog post:/blog/apollo-angular-12Thank you very much [Kamil Kisiela](https://twitter.com/kamilkisiela), the creator and maintainer of
[`apollo-angular`](https://github.com/kamilkisiela/apollo-angular) for that amazing contribution,
from the `apollo-angular` and the `graphql-code-generator` side!Moving on to the new **backend features**.## Generate Types for ResolversThe TypeScript template is now able to generate Typescript types not only for a schema and documents
but also for GraphQL Resolvers. And It's enabled by default!We think this was another missing piece of making your code even more strongly typed, from end to
end.The template now generates a Typescript type for each GraphQL type with resolvers for all of its
fields but it is also possible to extract a type of a single field.```typescript
import { QueryResolvers } from './generated/graphql'
import { getPosts } from './posts'

const Query: QueryResolvers.Resolvers = {
  posts() {
    return getPosts()
  }
}
```As you can see the usage is straightforward, but we recommend to explore the source code of a
generated file.## Custom Scalars ImprovementsPrior to this version, scalars were declared with `any` which means we didn't take enough advantage
of TypeScript here. This was an another opportunity to strengthen up your code. We're happy to tell
you it's now possible to **customize a scalar** and provide a type instead of having it as `any`.We also introduced a new option called **prepend** to add a code at the beginning of a generated
file, it completes the custom scalars feature.## Unified Naming StrategycamelCase, PascalCase, snake\_case, lowercase, UPPERCASE, CONSTANT\_CASE, there's a lot of ways for
people to name their types in GraphQL schema. It was a wild west, until now.We decided to unify the naming strategy in codegen and pick just one. We chose PascalCase. And now,
everything generated by codegen follows that rule.Maybe at some point in the future, graphql-code-generator will allow to set your own naming
strategy. Contributions are welcome so don't feel afraid, we will help you!*Keep on mind that it's a breaking change, TypeScript might warn about non-existing type, if so then
change it to be PascalCased.*## Watch-ModeNow the GraphQL Code Generator detects changes in your schema and type definitions, and generates
typings automatically after you edit these files.The only thing you need to do is add `-w` parameter to the command line.Thank you [Arda TANRIKULU](https://twitter.com/ardatanrikulu) and
[FredyC](https://github.com/FredyC) for that great contribution!## Support for GraphQL-Yoga with `graphql-import`Thanks to
[David Yahalomi](https://medium.com/u/c544f341ba49?source=post_page-----15bb9b02899e----------------------)'s
great contribution, GraphQL Code Generator now understands the graphql-import syntax being used by
GraphQL Yoga.```graphql
# import B from "b.graphql"

type A {
  # test 1
  first: String
  second: Float
  b: B
}
```## MongoDB Schema TemplateWe are also [working](https://github.com/dotansimha/graphql-code-generator/pull/490) on improving
the **MongoDB Typescript** schema template.We are using this template in many of our apps in production, it saves us a lot of boilerplate and
potential bugs, and it's also easier to maintain and keep track of the MongoDB schema objects.Basically, this template lets you generate TypeScript typings for the shape of your MongoDB objects
based on your GraphQL schema.For example, using the following schema:```graphql
type User @entity {
  id: String @id
  username: String! @column
  email: @column
}
```You will get a generated TypeScript interface:```typescript
import { ObjectID } from 'mongodb'

export interface UserDbObject {
  _id: ObjectID
  username: string
  email?: string | null
}
```Then, you can use it with MongoDB driver for NodeJS:```typescript
import { Collection } from 'mongodb'
import { db } from './my-db-instance'

const MyCollection: Collection<UserDbObject> = db.collection<UserDbObject>('users')
```Now your MongoDB collection is typed, and it's easier to find bugs during development.We understand that a lot of edge cases might occur because of the differences between GraphQL schema
and the lack of schema in MongoDB, so we added `@map` directive that lets you do custom mapping of
fields:```graphql
type User @entity {
  id: String @id
  username: String! @column @map(path: "profile.credentials.username")
  email: @column
}
```Will output:```typescript
import { ObjectID } from 'mongodb';

export interface UserDbObject {
  _id: ObjectID;
  profile {
    credentials: {
      username: string;
    };
  };
  email?: string | null;
}
```There is also the need to handle the difference between embedded types and linked types, so you can
use `@entity(embbeded: true)` and `@embbeded` to declare link and embedded entities:```graphql
type User @entity {
 id: String @id
 profile: Profile! @embedded
 email: @column
 photos: [Photo] @link
}

type Profile @embedded {
 fullName: String
}

type Photo @entity {
 id: String! @id
 url: String! @column
}
```Will output:```typescript
import { ObjectID } from 'mongodb'

export interface UserDbObject {
  _id: ObjectID
  profile: ProfileDbObject
  photos: [ObjectID]
  email?: string | null
}

export interface ProfileDbObject {
  fullName: string
}

export interface PhotoDbObject {
  _id: ObjectID
  url: string
}
```Another issue is to add fields that are relevant only for the MongoDB schema, and not relevant to
your GraphQL schema (such as security token and login hashes), so you can define it in your GraphQL
Schema:```graphql
type User @entity(additionalFields: [
 { path: "services.login.token", type: "string" }
]) {
 id: String @id
 email: @column
}
```We also addressed GraphQL Interface, and now you can use `@abstractEntity` to override your
interfaces, and if you are using GraphQL Unions, you can add a custom `@discriminatorField` to your
union, and it will add the field to your MongoDB schema.We are also thinking about adding more templates for entities schemas in the future, such as
[JSON schema](http://json-schema.org).<Callout>
  We are planning to release the new version of that template next week and write a dedicated blog
  post on it with more details.
</Callout>Also, that template can be a great start for others to add the same generated features to other data
sources like **SQL** and **NoSQL** databases, **DB ORMs** and more!Other honorable mentions on this release:*   [Support for AWS AppSync](https://github.com/dotansimha/graphql-code-generator/pull/354)
*   [Generate introspection file](https://github.com/dotansimha/graphql-code-generator/pull/371)
*   [Huge performance improvements](https://github.com/dotansimha/graphql-code-generator/pull/434)
    thanks to [prevostc](https://github.com/prevostc)
*   [Added implementingTypes for interfaces](https://github.com/dotansimha/graphql-code-generator/pull/339)*Watch the complete breakdown of the releases and features here:
(https://github.com/dotansimha/graphql-code-generator/releases)\[https://github.com/dotansimha/graphql-code-generator/releases]*As usual, we keep all of our dependencies up to date with each release thanks to **renovate**. This
release updates everything to latest as usual, including **TypeScript 3.0**.We believe it is a good open source practice and helps not just us and our users but it also helps
our open source dependencies authors to get early feedback on any issue that might happen.> Friends help friends test early! ;)We encourage that practice on for any open source library and any application!***## What Other Ideas Do You Have for Generating Things?If you have any ideas or custom needs, that's exactly where the graphql-code-generator shines, let
us know about your needs, and we would be happy to support you!This version wouldn't be possible without the great help of [sgoll](https://github.com/sgoll),
[David Yahalomi](https://medium.com/u/c544f341ba49?source=post_page-----15bb9b02899e----------------------),
[Arda TANRIKULU](https://twitter.com/ardatanrikulu),
[Kamil Kisiela](https://twitter.com/kamilkisiela), [degroote22](https://github.com/degroote22),
[jycouet](https://github.com/jycouet), [FredyC](https://github.com/FredyC),
[prevostc](https://github.com/prevostc), arvind-chandrashekar-ck,
[Cactucs](https://github.com/Cactucs).Also want to contribute? here are some ideas for future contributions (*but any ideas would be
welcomed!*), we would love to support and help any new contributor who want to give it a try!*   [Support for graphql-config](https://github.com/dotansimha/graphql-code-generator/issues/382)
*   [Additional examples of generator templates written in JS](https://github.com/dotansimha/graphql-code-generator/issues/311)
*   [Flow template](https://github.com/dotansimha/graphql-code-generator/issues/160)Don't forget — if you created your own template and think it could benefit others,
[link it on our readme here](https://github.com/dotansimha/graphql-code-generator#available-templates).***Star and follow us on **GitHub** and **Twitter**, we have a lot more coming soon!