graphql-codegen-typescript-validation-schema

graphql-codegen-typescript-validation-schema

GraphQL code generator plugin to generate form validation schema from your GraphQL schema.

• support yup
• support zod

Quick Start

Start by installing this plugin and write simple plugin config;

$ npm i graphql-codegen-typescript-validation-schema

generates:
  path/to/graphql.ts:
    plugins:
      - typescript
      - typescript-validation-schema # specify to use this plugin
    config:
      # You can put the config for typescript plugin here
      # see: https://www.graphql-code-generator.com/plugins/typescript
      strictScalars: true
      # You can also write the config for this plugin together
      schema: yup

You can check example directory if you want to check more complex config example or how is generated some files.

Config API Reference

schema

type: ValidationSchema default: 'yup'

Specify generete validation schema you want.

generates:
  path/to/graphql.ts:
    plugins:
      - typescript
      - graphql-codegen-validation-schema
    config:
      schema: yup

importFrom

type: string

import types from generated typescript type path. if not given, omit import statement.

generates:
  path/to/graphql.ts:
    plugins:
      - typescript
  path/to/validation.ts:
    plugins:
      - graphql-codegen-validation-schema
    config:
      importFrom: ./graphql # path for generated ts code

Then the generator generates code with import statement like below.

import { GeneratedInput } from './graphql'

/* generates validation schema here */

enumsAsTypes

type: boolean default: false

Generates enum as TypeScript type instead of enum.

directives

type: DirectiveConfig

Generates validation schema with more API based on directive schema. For example, yaml config and GraphQL schema is here.

generates:
  path/to/graphql.ts:
    plugins:
      - typescript
      - graphql-codegen-validation-schema
    config:
      schema: yup
      directives:
        required:
          msg: required
        constraint:
          minLength: min
          # Replace $1 with specified `startsWith` argument value of the constraint directive
          startsWith: ["matches", "/^$1/"]
          format:
            email: email

input ExampleInput {
  email: String! @required(msg: "Hello, World!") @constraint(minLength: 50)
  message: String! @constraint(startsWith: "Hello")
}

Then generates yup validation schema like below.

export function ExampleInputSchema(): yup.SchemaOf<ExampleInput> {
  return yup.object({
    email: yup.string().defined().required("Hello, World!").min(50),
    message: yup.string().defined().matches(/^Hello/)
  })
}