DEV Community

Cover image for Top 3 GraphQL code generators
Tomek Poniatowicz for GraphQL Editor

Posted on • Updated on

Top 3 GraphQL code generators

There has been a lot of buzz in the web development world around GraphQL lately and for good reason!

GraphQL is a new query language for APIs and a server-side runtime for executing queries by using a type system you define for the data, so basically a syntax that describes how to ask for data and load it from a server to a client.

Why all the buzz?

The answer is simple:

It's all about the development speed.

The main reason why companies started using GraphQL is that it promises to speed up your API development, what's more, it manages to deliver!

In of the surveys directed to CTOs and lead developers of a variety of teams ranging from 1 to 100+ engineers (among which we can find tech giants like Uber or Paypal) about their perception of GraphQL implementation in their teams almost all companies felt GraphQL delivered on their expectations.

Let me introduce you three useful GrapphQL code generators to speed your development:

1. GraphQL Zeus

Zeus, son of Kronos, father of Apollo.

A simple tool working in Node.js & browser to generate an auto-complete client library for Javascript or Typescript. The unique thing about GraphQL Zeus is that it creates its own specification along with type-safe completion of request & responses.

graphql-zeus in action

Repo:

GitHub logo graphql-editor / graphql-zeus

GraphQL client and GraphQL code generator with GraphQL autocomplete library generation ⚡⚡⚡ for browser,nodejs and react native ( apollo compatible )

npm Commitizen friendly npm downloads

Strongly Typed GraphQL from the team at GraphQL Editor

How it works

GraphQL Zeus is the absolute best way to interact with your GraphQL endpoints in a type-safe way. Zeus uses your schema to generate Typescript types and strongly typed clients to unlock the power, efficiency, productivity and safety of Typescript on your GraphQL requests.

Features

⚡️ Types mapped from your schema
⚡️ Works with Apollo Client, React Query, Stucco Subscriptions (*more coming soon...)
⚡️ Works with Subscriptions
⚡️ Infer complex response types
⚡️ Create reusable selection sets (like fragments) for use across multiple queries
⚡️ Supports GraphQL Unions, Interfaces, Aliases and Variables
⚡️ Handles massive schemas
⚡️ Supports Browsers, Node.js and React Native in Javascript and Typescript
⚡️ Schema downloader
⚡️ JSON schema generation

Full documentation

Our full documentation has all the use cases of:

  • scalars
  • selectors

and much more...

Full documentation is available here

Join the Zeus Community

2. Prisma GraphQLGen

The tool from Prisma team provides a type-safe environment which helps maintain confidence about your code. As creators mention the motivation behind it was to

"(...) leverage the strongly typed GraphQL schema with the goal of making your backend type-safe while reducing the need to write boilerplate through code generation".

The graphqlgen generates & scaffolds type-safe resolvers based on your GraphQL Schema in TypeScript & Flow.

Repo:

GitHub logo prisma-labs / graphqlgen

⚙️ Generate type-safe resolvers based upon your GraphQL Schema

graphqlgen

CircleCI npm version

Generate & scaffold type-safe resolvers based on your GraphQL Schema in TypeScript, Flow & Reason

Deprecation note

graphqlgen has been officially deprecated in favor of the The Guild's project GraphQL Code Generator. Learn more about the collaboration of Prisma and the Guild in this blog post.


About

Highlights

  • Schema-first Design in SDL to derive ideal types
  • Type-safety Resolvers with precise signatures including parent, args and return type
  • DX Precise resolver types puts your editor intellisense to work
  • Ecosystem Interop codegen suitable for Yoga 1 or Apollo Server and supports prettier and graphql-import out of the box

Motivation

Programming in type-safe environments can contribute toward great confidence in your code's integrity. graphqlgen aims to leverage the GraphQL type system to make your resolvers completely…

3. GraphQL Code Generator

GraphQL Code Generator is a tool that generates code out of your GraphQL schema, supporting custom plugins & templates, so regardless of the language that you're using (i.e. TypeScript, React, Angular) GraphQL Code Generator will be a huge help.

Repo:

GitHub logo dotansimha / graphql-code-generator

A tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.

GraphQL Conf 2023

CodeGen

npm version

https://the-guild.dev/graphql/codegen

GraphQL Code Generator is a tool that generates code out of your GraphQL schema. Whether you are developing a frontend or backend, you can utilize GraphQL Code Generator to generate output from your GraphQL Schema and GraphQL Documents (query/mutation/subscription/fragment).

By analyzing the schema and documents and parsing it, GraphQL Code Generator can output code at a wide variety of formats, based on pre-defined templates or based on custom user-defined ones. Regardless of the language that you're using, GraphQL Code Generator has you covered.

GraphQL Code Generator lets you choose the output that you need, based on plugins, which are very flexible and customizable. You can also write your plugins to generate custom outputs that match your needs.

You can try this tool live on your browser and see some useful examples. Check out GraphQL Code Generator Live Examples.

We currently support and maintain these plugins (TypeScript, Flow…

Cover image powered by unDraw

Top comments (2)

Collapse
 
aayani profile image
Wahaj Aayani

What about the Apollo for GraphQL? How well does it fare against the 3?

Collapse
 
rmartins profile image
Ricardo Martins

I'm afraid apollo doesn't generate the code for you. You would need codegen working with apollo.