GraphQL code generator plugin to generate form validation schema from your GraphQL schema.
Start by installing this plugin and write simple plugin config;
$ npm i graphql-codegen-typescript-validation-schemagenerates:
path/to/graphql.ts:
plugins:
- typescript
- typescript-validation-schema # specify to use this pluginconfig:
# You can put the config for typescript plugin here# see: https://www.graphql-code-generator.com/plugins/typescriptstrictScalars: true# Overrides built-in ID scalar to both input and output types as string.# see: https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalarsscalars:
ID: string# You can also write the config for this plugin togetherschema: yup # or zodIt is recommended to write scalars config for built-in type ID, as in the yaml example shown above. For more information: #375
You can check example directory if you want to see more complex config example or how is generated some files.
The Q&A for each schema is written in the README in the respective example directory.
type: ValidationSchema default: 'yup'
Specify generete validation schema you want.
You can specify yup or zod or myzod.
generates:
path/to/graphql.ts:
plugins:
- typescript
- typescript-validation-schemaconfig:
schema: yuptype: string
When provided, import types from the generated typescript types file path. if not given, omit import statement.
generates:
path/to/graphql.ts:
plugins:
- typescriptpath/to/validation.ts:
plugins:
- typescript-validation-schemaconfig:
importFrom: ./graphql # path for generated ts codeThen the generator generates code with import statement like below.
import{GeneratedInput}from'./graphql';/* generates validation schema here */type: string
If defined, will use named imports from the specified module (defined in importFrom) rather than individual imports for each type.
generates:
path/to/types.ts:
plugins:
- typescriptpath/to/schemas.ts:
plugins:
- graphql-codegen-validation-schemaconfig:
schema: yupimportFrom: ./path/to/typesschemaNamespacedImportName: typesThen the generator generates code with import statement like below.
import*astypesfrom'./graphql';/* generates validation schema here */type: boolean default: false
Will use import type {} rather than import {} when importing generated TypeScript types.
This gives compatibility with TypeScript's "importsNotUsedAsValues": "error" option.
Should used in conjunction with importFrom option.
type: string default: (empty)
Prefixes all import types from generated typescript type.
generates:
path/to/graphql.ts:
plugins:
- typescriptpath/to/validation.ts:
plugins:
- typescript-validation-schemaconfig:
typesPrefix: IimportFrom: ./graphql # path for generated ts codeThen the generator generates code with import statement like below.
import{IGeneratedInput}from'./graphql';/* generates validation schema here */type: string default: (empty)
Suffixes all import types from generated typescript type.
generates:
path/to/graphql.ts:
plugins:
- typescriptpath/to/validation.ts:
plugins:
- typescript-validation-schemaconfig:
typesSuffix: IimportFrom: ./graphql # path for generated ts codeThen the generator generates code with import statement like below.
import{GeneratedInputI}from'./graphql';/* generates validation schema here */type: boolean default: false
Generates enum as TypeScript type instead of enum.
type: boolean default: false
Generates validation string schema as do not allow empty characters by default.
type: ScalarSchemas
Extends or overrides validation schema for the built-in scalars and custom GraphQL scalars.
config:
schema: yupscalarSchemas:
Date: yup.date()Email: yup.string().email()config:
schema: zodscalarSchemas:
Date: z.date()Email: z.string().email()type: string
Fallback scalar type for undefined scalar types in the schema not found in scalarSchemas.
config:
schema: yupdefaultScalarSchema: yup.unknown()config:
schema: zoddefaultScalarSchema: z.unknown()type: boolean default: false
Generates validation schema with GraphQL type objects. But excludes Query, Mutation, Subscription objects.
It is currently added for the purpose of using simple objects. See also #20, #107.
This option currently does not support fragment generation. If you are interested, send me PR would be greatly appreciated!
type: ValidationSchemaExportType default: 'function'
Specify validation schema export type.
type: boolean default: false
Uses the full path of the enum type as the default value instead of the stringified value.
type: NamingConventionMap default: { enumValues: "change-case-all#pascalCase" }
Uses the full path of the enum type as the default value instead of the stringified value.
Related: https://the-guild.dev/graphql/codegen/docs/config-reference/naming-convention#namingconvention
type: boolean default: false
Generates validation schemas for GraphQL operation variables (query, mutation, subscription parameters).
generates:
path/to/file.ts:
plugins:
- typescript
- typescript-operations
- graphql-codegen-validation-schemaconfig:
schema: zodwithOperationVariables: trueWhen enabled, the plugin will generate validation schemas for each named GraphQL operation's variables. For example, given this query:
queryEditor_StoryQuery($storyId: UUID!) {
story(id: $storyId) {
idtitle
}
}It will generate:
exportfunctionEditor_StoryQueryVariableSchema(): z.ZodObject<Properties<Editor_StoryQueryQueryVariables>>{returnz.object({storyId: z.string()});}The generated schemas properly handle:
- Required vs optional variables
- Default values
- References to existing input type schemas
- All GraphQL scalar types
- Enum types
- Array types
type: string default: 'VariableSchema'
Suffix for operation variable schema names when withOperationVariables is enabled.
generates:
path/to/file.ts:
plugins:
- typescript-operations
- graphql-codegen-validation-schemaconfig:
schema: zodwithOperationVariables: trueoperationVariablesSchemaSuffix: VarsSchemaThis will generate schema names like Editor_StoryQueryVarsSchema instead of Editor_StoryQueryVariableSchema.
type: DirectiveConfig
Generates validation schema with more API based on directive schema. For example, yaml config and GraphQL schema is here.
inputExampleInput {
email: String!@required(msg: "Hello, World!") @constraint(minLength: 50, format: "email")
message: String!@constraint(startsWith: "Hello")
}generates:
path/to/graphql.ts:
plugins:
- typescript
- typescript-validation-schemaconfig:
schema: yupdirectives:
# Write directives like## directive:# arg1: schemaApi# arg2: ["schemaApi2", "Hello $1"]## See more examples in `./tests/directive.spec.ts`# https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/blob/main/tests/directive.spec.tsrequired:
msg: requiredconstraint:
minLength: min# Replace $1 with specified `startsWith` argument value of the constraint directivestartsWith: [matches, /^$1/]format:
# This example means `validation-schema: directive-arg`# directive-arg is supported String and Enum.email: emailThen generates yup validation schema like below.
exportfunctionExampleInputSchema(): yup.SchemaOf<ExampleInput>{returnyup.object({email: yup.string().defined().required('Hello, World!').min(50).email(),message: yup.string().defined().matches(/^Hello/)});}generates:
path/to/graphql.ts:
plugins:
- typescript
- typescript-validation-schemaconfig:
schema: zoddirectives:
# Write directives like## directive:# arg1: schemaApi# arg2: ["schemaApi2", "Hello $1"]## See more examples in `./tests/directive.spec.ts`# https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/blob/main/tests/directive.spec.tsconstraint:
minLength: min# Replace $1 with specified `startsWith` argument value of the constraint directivestartsWith: [regex, /^$1/, message]format:
# This example means `validation-schema: directive-arg`# directive-arg is supported String and Enum.email: emailThen generates zod validation schema like below.
exportfunctionExampleInputSchema(): z.ZodSchema<ExampleInput>{returnz.object({email: z.string().min(50).email(),message: z.string().regex(/^Hello/,'message')});}Please see example directory.
This plugin supports generating validation schemas for GraphQL operation variables (queries, mutations, subscriptions). This is useful for validating user input before sending GraphQL operations.
generates:
path/to/types.ts:
plugins:
- typescript
- typescript-operationspath/to/schemas.ts:
plugins:
- graphql-codegen-validation-schemaconfig:
schema: zodimportFrom: ./typeswithOperationVariables: trueGiven these GraphQL operations:
queryGetUser($id: ID!, $includeProfile: Boolean = false) {
user(id: $id) {
idnameprofile@include(if: $includeProfile) {
bio
}
}
}
mutationCreatePost($input: CreatePostInput!) {
createPost(input: $input) {
idtitle
}
}The plugin will generate validation schemas like:
exportfunctionGetUserVariableSchema(): z.ZodObject<Properties<GetUserQueryVariables>>{returnz.object({id: z.string(),includeProfile: z.boolean().default(false).optional()});}exportfunctionCreatePostVariableSchema(): z.ZodObject<Properties<CreatePostMutationVariables>>{returnz.object({input: CreatePostInputSchema()});}exportfunctionGetUserVariableSchema(): yup.SchemaOf<GetUserQueryVariables>{returnyup.object({id: yup.string().defined(),includeProfile: yup.boolean().default(false).optional()});}exportfunctionCreatePostVariableSchema(): yup.SchemaOf<CreatePostMutationVariables>{returnyup.object({input: CreatePostInputSchema().defined()});}- Type Safety: Generated schemas reference the correct TypeScript operation variable types
- Smart Defaults: Handles GraphQL default values automatically
- Input Type References: Automatically references existing input type schemas
- Nullable/Optional Handling: Properly distinguishes between required and optional variables
- All Validation Libraries: Works with zod, yup, myzod, and valibot
- Configurable Naming: Customize schema naming with
operationVariablesSchemaSuffix
Their is currently a compatibility issue with the client-preset. A workaround for this is to split the generation into two (one for client-preset and one for typescript-validation-schema).
generates:
path/to/graphql.ts:
plugins:
- typescript-validation-schema/path/to/graphql/:
preset: 'client',plugins:
...