GraphQL Code Generator

Apollo Graphql & Graphql vs Rest

graphql

GraphQL Code Generator

GraphQL code generator, with adaptable help for different dialects and stages, and the capacity to make specially produced ventures in view of GraphQL mapping or activities.

GraphQL substances are characterized as static and composed, which implies they can be investigated and use as a base for producing everything.

This generator produces the two models (in view of GraphQL server-side blueprint), and records (customer side tasks, for example, inquiry, change as membership).

Utilize Cases

The codegen allows you either utilize a predefined format, or compose your own.

The predefined layouts are basic formats that helps GraphQL designers.

For instance, on the off chance that you build up a server-agree with TypeScript and GraphQL, you can utilize the codegen with the TypeScript layout to create Typings for you server side, in view of your blueprint.

In the event that you build up a customer favor TypeScript, Angular and GraphQL, you can utilize the codegen with the TypeScript format to produce Typings for you customer side, in light of your blueprint and your inquiries/changes.

Installation

To install the generator, use the following:

Then, install the template package you wish to use, for example:

And then to use it, execute it from NPM script, or use $(npm bin)/gql-gen ... from the command line. If you are using Yarn, you can just use yarn gql-gen ...

You can also install it as global NPM module and use it with gql-gen executable.

Integrate with your project

Apollo GraphQL

To use inside an existing project, I recommend to add a pre-build script that executes the code generator, inside you package.json, for example:

Usage Examples

This package offers both modules exports (to use with NodeJS/JavaScript application), or CLI util.

CLI usage is as follow:

  • With local introspection JSON file, generate TypeScript types:
  • With local introspection JSON file, generate TypeScript files, from GraphQL documents inside code files (.ts):
  • With remote GraphQL endpoint that requires Authorization, generate TypeScript types:

Note: when specifying a glob path (with * or **), make sure to wrap the argument with double quotes ("...").

Generator-specific config

Graphql vs rest

Some of the generators supports a custom config, which you can specify using gqlgen.json like that:

Or, you can set the value using environment variables, before executing the codegen, with the CODEGEN_ prefix:

Custom Templates

To make custom layout, or produce an entire undertaking from GraphQL pattern, allude to Custom Templates Documentation

Watch mode

The watch mode is empowered by passing – watch alternative. To utilize the watch mode you need Watchman introduced in your framework. To help glob designs, form 3.7 or more is required.

Prettier Support

The generator will naturally executes prettier on the yield code, when conceivable. It will naturally utilize the right parser as per the document expansions of the yield record. In the event of a mistake, prettier will be overlooked, and will compose the document as-seems to be.

On the off chance that you anticipate has prettier config document, the generator will utilize it and regard your code-style.

TypeScript Support

On the off chance that you are utilizing TypeScript and might want to utilize your GraphQL Schema from a nearby document (utilizing – composition), you can utilize – require to stack a require expansion.

For instance, introduce ts-hub from NPM and utilize it along these lines:

Along these lines, the record ./src/my-schema.ts is stacked straightforwardly as TypeScript document, and you don’t have to gather it to plain JavaScript before utilizing it.

Different Environments

In the event that you are utilizing GraphQL with condition not the same as NodeJS and wish to produce composes and interfaces for your stage, begin by introducing NodeJS and the bundle as worldwide, and afterward add the age charge to your construct procedure.

Contrast with apollo-codegen

apollo-codegen creates a comparable outcomes, yet it in light of code that produces the outcomes. This bundle utilizes layouts (with Handlebars) to produce results, and it essentially underpins any yield since you can basically make you format and afterward aggregate it with your GraphQL composition and GraphQL activities and get a more modified outcome. This bundle likewise enable you to make custom layouts, in any case the inherent generators, so you can utilize your diagram as source to any created outcome you require.

80%
Awesome
  • Design

Leave A Reply

Your email address will not be published.