GraphQL Code Generator

GraphQL Code Generator

  • API & Documentation
  • GitHub
  • Help

›Presets

Getting Started

  • What is GraphQL Code Generator?
  • Codegen Options Config
  • `schema` field
  • `documents` field
  • `config` field
  • `require` field
  • Lifecycle Hooks
  • Development Workflow
  • Programmatic Usage
  • Further Reading

Plugins

  • Available Plugins
  • TypeScript
  • TypeScript Operations
  • TypeScript 1.0 Compatibility
  • TypeScript Resolvers
  • TypeScript GraphQL Files Modules
  • TypeScript document nodes
  • TypeScript MongoDB
  • TypeScript React Apollo
  • TypeScript Apollo Angular
  • TypeScript Stencil Apollo
  • TypeScript Urql
  • TypeScript GraphQL-Request
  • Flow Types
  • Flow Resolvers
  • Flow Operations
  • Kotlin
  • Java
  • Java Resolvers
  • Java Apollo Android
  • Fragment Matcher
  • Introspection
  • Add
  • Time
  • Schema AST
  • Reason Client
  • Relay Operation Optimizer.

Presets

  • near-operation-file
  • import-types

Integrations

  • Apollo Local State
  • Create-React-App
  • GatsbyJS
  • Prettier & Linters
  • Apollo Federation

Custom Code-Generator Plugins

  • What are Plugins?
  • Write your first Plugin
  • Validate Plugin Configuration
  • How to extend the GraphQL Schema?
  • Visitor Pattern

Migration

  • Migration to 1.0.0
  • Migration from 0.13 to 0.18

near-operation-file

This preset generates a file per each operation file.

Installation

$ yarn add @graphql-codegen/near-operation-file-preset

Example

In order to use this preset, you need to add 2 outputs to your codegen.yml file:

  • The first, is the base types, generated by typescript plugin.
  • The second, is the one that in charge of generating types per operation.

This following example generates operation typings and react-apollo component per each operation file, near the original file of the operation:

schema: src/schema.json
documents: 'src/**/*.graphql'
generates:
  src/types.ts:
    - typescript
  src/:
    preset: near-operation-file
    presetConfig:
      extension: .generated.tsx
      baseTypesPath: types.ts
    plugins:
      - typescript-operations
      - typescript-react-apollo

How does it work?

The first output is simple, and it only generates the base schema types to src/types.ts.

The second output refers to the base directory of the project (./src/) and it uses the near-operation-file preset to generate a file per each operation found under ./src/**/*.graphql.

The presetConfig section contains a key for setting the output files extension (in our case, .generated.tsx because of react-apollo), and the location of the base schema types file we created in the first section of this file (it will look for it in the base directory).

Configuration

baseTypesPath (string)

Required, should point to the base schema types file. The key of the output is used a the base path for this file.

Usage Example

generates:
src/:
 preset: near-operation-file
 presetConfig:
   baseTypesPath: types.ts
 plugins:
   - typescript-operations

extension (string, default value: .generates.ts)

Optional, sets the extension for the generated files. Use this to override the extension if you are using plugins that requires a different type of extensions (such as typescript-react-apollo)

Usage Example

generates:
src/:
 preset: near-operation-file
 presetConfig:
   baseTypesPath: types.ts
   extension: .generated.tsx
 plugins:
   - typescript-operations
   - typescript-react-apollo

cwd (string, default value: process.cwd())

Optional, override the cwd of the execution. We are using cwd to figure out the imports between files. Use this if your execuion path is not your project root directory.

Usage Example

generates:
src/:
 preset: near-operation-file
 presetConfig:
   baseTypesPath: types.ts
   cwd: /some/path
 plugins:
   - typescript-operations

folder (string, default value: '')

Optional, defines a folder, (Relative to the source files) where the generated files will be created.

Usage Example

generates:
src/:
 preset: near-operation-file
 presetConfig:
   baseTypesPath: types.ts
   folder: __generated__
 plugins:
   - typescript-operations

importTypesNamespace (string, default value: Types)

Optional, override the name of the import namespace used to import from the baseTypesPath file.

Usage Example

generates:
src/:
 preset: near-operation-file
 presetConfig:
   baseTypesPath: types.ts
   importTypesNamespace: SchemaTypes
 plugins:
   - typescript-operations

← Previousimport-types →
  • Installation
  • Example
  • Configuration
GraphQL Code Generator
githubmediumtwitter
DocsHelp
© Copyrights by The Guild, all rights reserved
© The Guild 2018
GraphQL Code Generator is licensed under MIT and can be used free of charge with no restrictions