5
5
[ GraphQL code generator] ( https://github.com/dotansimha/graphql-code-generator ) plugin to generate form validation schema from your GraphQL schema.
6
6
7
7
- [x] support [ yup] ( https://github.com/jquense/yup )
8
- - [ ] support [ zod] ( https://github.com/colinhacks/zod )
8
+ - [x ] support [ zod] ( https://github.com/colinhacks/zod )
9
9
10
10
## Quick Start
11
11
@@ -26,7 +26,7 @@ generates:
26
26
# see: https://www.graphql-code-generator.com/plugins/typescript
27
27
strictScalars : true
28
28
# You can also write the config for this plugin together
29
- schema : yup
29
+ schema : yup # or zod
30
30
` ` `
31
31
32
32
You can check [example directory](https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/tree/main/example) if you want to see more complex config example or how is generated some files.
@@ -39,6 +39,8 @@ type: `ValidationSchema` default: `'yup'`
39
39
40
40
Specify generete validation schema you want.
41
41
42
+ You can specify `yup` or `zod`.
43
+
42
44
` ` ` yml
43
45
generates:
44
46
path/to/graphql.ts:
@@ -87,6 +89,15 @@ type: `DirectiveConfig`
87
89
88
90
Generates validation schema with more API based on directive schema. For example, yaml config and GraphQL schema is here.
89
91
92
+ ` ` ` graphql
93
+ input ExampleInput {
94
+ email: String! @required(msg: "Hello, World!") @constraint(minLength: 50, format: "email")
95
+ message: String! @constraint(startsWith: "Hello")
96
+ }
97
+ ` ` `
98
+
99
+ # ### yup
100
+
90
101
` ` ` yml
91
102
generates:
92
103
path/to/graphql.ts:
@@ -114,13 +125,6 @@ generates:
114
125
email : email
115
126
` ` `
116
127
117
- ` ` ` graphql
118
- input ExampleInput {
119
- email : String! @required(msg: "Hello, World!") @constraint(minLength: 50, format: "email")
120
- message : String! @constraint(startsWith: "Hello")
121
- }
122
- ```
123
-
124
128
Then generates yup validation schema like below.
125
129
126
130
` ` ` ts
@@ -131,3 +135,42 @@ export function ExampleInputSchema(): yup.SchemaOf<ExampleInput> {
131
135
})
132
136
}
133
137
```
138
+
139
+ #### zod
140
+
141
+
142
+ ``` yml
143
+ generates :
144
+ path/to/graphql.ts :
145
+ plugins :
146
+ - typescript
147
+ - graphql-codegen-validation-schema
148
+ config :
149
+ schema : zod
150
+ directives :
151
+ # Write directives like
152
+ #
153
+ # directive:
154
+ # arg1: schemaApi
155
+ # arg2: ["schemaApi2", "Hello $1"]
156
+ #
157
+ # See more examples in `./tests/directive.spec.ts`
158
+ # https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/blob/main/tests/directive.spec.ts
159
+ constraint :
160
+ minLength : min
161
+ # Replace $1 with specified `startsWith` argument value of the constraint directive
162
+ startsWith : ["regex", "/^$1/", "message"]
163
+ format :
164
+ email : email
165
+ ` ` `
166
+
167
+ Then generates yup validation schema like below.
168
+
169
+ ` ` ` ts
170
+ export function ExampleInputSchema() : z.ZodSchema<ExampleInput> {
171
+ return z.object({
172
+ email : z.string().min(50).email(),
173
+ message : z.string().regex(/^Hello/, "message")
174
+ })
175
+ }
176
+ ```
0 commit comments