DEV Community

Cover image for GraphQL Code Generator v0.11
The Guild profile image TheGuildBot
TheGuildBot for The Guild

Posted on • Edited on • Originally published at the-guild.dev

GraphQL Code Generator v0.11

#graphql #codegen

This article was published on Tuesday, August 21, 2018 by Dotan Simha @ The Guild Blog


This blog post refers to an outdated version, please check https://the-guild.dev/graphql/codegen
for the latest docs!
## 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 before, please
check out the following introductory blog posts:* GraphQL Code-Generator

  • What's new in GraphQL Code Generator 0.9.0v0.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 Templatesreact-apollo recently introduced a new default API 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, 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 for that amazing contribution!## Angular TemplatesBut why just React? Angular should get the same benefits!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, 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, 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, the creator and maintainer of 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
}
Enter fullscreen mode Exit fullscreen mode

MongoDB Schema TemplateWe are also working 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:

type User @entity {
  id: String @id
  username: String! @column
  email: @column
}
Enter fullscreen mode Exit fullscreen mode


You will get a generated TypeScript interface:

import { ObjectID } from 'mongodb'

export interface UserDbObject {
  _id: ObjectID
  username: string
  email?: string | null
}
Enter fullscreen mode Exit fullscreen mode


Then, you can use it with MongoDB driver for NodeJS:

import { Collection } from 'mongodb'
import { db } from './my-db-instance'

const MyCollection: Collection<UserDbObject> = db.collection<UserDbObject>('users')
Enter fullscreen mode Exit fullscreen mode


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:

type User @entity {
  id: String @id
  username: String! @column @map(path: "profile.credentials.username")
  email: @column
}
Enter fullscreen mode Exit fullscreen mode


Will output:

import { ObjectID } from 'mongodb';

export interface UserDbObject {
  _id: ObjectID;
  profile {
    credentials: {
      username: string;
    };
  };
  email?: string | null;
}
Enter fullscreen mode Exit fullscreen mode


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:

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
}
Enter fullscreen mode Exit fullscreen mode


Will output:

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
}
Enter fullscreen mode Exit fullscreen mode


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:

type User @entity(additionalFields: [
 { path: "services.login.token", type: "string" }
]) {
 id: String @id
 email: @column
}
Enter fullscreen mode Exit fullscreen mode


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.
We are planning to release the new version of that template next week and write a dedicated blog
post on it with more details.
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

Top comments (0)

Read next

romanmarshanski profile image

Custom GPTs: Revolutionizing Tech Integration

Roman Marshanski -

hannahanot profile image

TailwindCSS and Next.js

Hannah -

valaug profile image

Una Guía para Principiantes sobre la Autenticación usando API Gateway y Lambda Authorizer

Augusto Valdivia -

eggc0 profile image

Mastering Parentheses in Emacs: Essential Commands

eggc -