Skip to content

Commit 2f3d482

Browse files
committed
fixed README
1 parent 978f2d1 commit 2f3d482

File tree

1 file changed

+52
-9
lines changed

1 file changed

+52
-9
lines changed

README.md

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
[GraphQL code generator](https://github.com/dotansimha/graphql-code-generator) plugin to generate form validation schema from your GraphQL schema.
66

77
- [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)
99

1010
## Quick Start
1111

@@ -26,7 +26,7 @@ generates:
2626
# see: https://www.graphql-code-generator.com/plugins/typescript
2727
strictScalars: true
2828
# You can also write the config for this plugin together
29-
schema: yup
29+
schema: yup # or zod
3030
```
3131
3232
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'`
3939

4040
Specify generete validation schema you want.
4141

42+
You can specify `yup` or `zod`.
43+
4244
```yml
4345
generates:
4446
path/to/graphql.ts:
@@ -87,6 +89,15 @@ type: `DirectiveConfig`
8789

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

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+
90101
```yml
91102
generates:
92103
path/to/graphql.ts:
@@ -114,13 +125,6 @@ generates:
114125
email: email
115126
```
116127
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-
124128
Then generates yup validation schema like below.
125129
126130
```ts
@@ -131,3 +135,42 @@ export function ExampleInputSchema(): yup.SchemaOf<ExampleInput> {
131135
})
132136
}
133137
```
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

Comments
 (0)