diff --git a/README.md b/README.md index 2d7c8169..77d92d8a 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,123 @@ # graphql-codegen-typescript-validation-schema -GraphQL Code Generator plugin to generate form validation schema from your GraphQL schema +[![Test](https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/actions/workflows/ci.yml/badge.svg)](https://github.com/Code-Hex/graphql-codegen-typescript-validation-schema/actions/workflows/ci.yml) [![npm version](https://badge.fury.io/js/graphql-codegen-typescript-validation-schema.svg)](https://badge.fury.io/js/graphql-codegen-typescript-validation-schema) -## THIS IS ALPHA VERSION +[GraphQL code generator](https://github.com/dotansimha/graphql-code-generator) plugin to generate form validation schema from your GraphQL schema. + +- [x] support [yup](https://github.com/jquense/yup) +- [ ] support [zod](https://github.com/colinhacks/zod) + +## Quick Start + +Start by installing this plugin and write simple plugin config; + +```sh +$ npm i graphql-codegen-typescript-validation-schema +``` + +```yml +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 +``` + +## Config API Reference + +### `schema` + +type: `ValidationSchema` default: `'yup'` + +Specify generete validation schema you want. + +```yml +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. + +```yml +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. + +```ts +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. + +```yml +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 +``` + +```graphql +input ExampleInput { + email: String! @required(msg: "Hello, World!") @constraint(minLength: 50) + message: String! @constraint(startsWith: "Hello") +} +``` + +Then generates yup validation schema like below. + +```ts +export function ExampleInputSchema(): yup.SchemaOf { + return yup.object({ + email: yup.string().defined().required("Hello, World!").min(50), + message: yup.string().defined().matches(/^Hello/) + }) +} +``` \ No newline at end of file diff --git a/jest.config.js b/jest.config.js index 4476f4b2..7fc37cec 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,5 +1,5 @@ const { resolve } = require("path"); -const { pathsToModuleNameMapper } = require("ts-jest/utils"); +const { pathsToModuleNameMapper } = require("ts-jest"); const pkg = require("./package.json"); const tsconfig = require("./tsconfig.json"); diff --git a/src/config.ts b/src/config.ts index 5aa28529..66be125e 100644 --- a/src/config.ts +++ b/src/config.ts @@ -74,17 +74,13 @@ export interface ValidationSchemaPluginConfig extends TypeScriptPluginConfig { */ enumsAsTypes?: boolean; /** - * @description this is for yup schema. use this when you specified `schema: yup` - */ - yup?: YupSchemaPluginConfig; - /** - * @description Generates yup schema as strict. + * @description Generates validation schema with more API based on directive schema. * @exampleMarkdown * ```yml * generates: * path/to/file.ts: * plugins: - * - graphql-codegen-validation-schema: + * - graphql-codegen-validation-schema * config: * schema: yup * directives: diff --git a/src/yup/index.ts b/src/yup/index.ts index d9fd78cc..28eeebc4 100644 --- a/src/yup/index.ts +++ b/src/yup/index.ts @@ -185,7 +185,7 @@ const generateNameNodeYupSchema = ( } const primitive = yup4Scalar(tsVisitor, node.value); - return config.yup?.strict ? `${primitive}.strict(true)` : primitive; + return primitive; }; const maybeLazy = (type: TypeNode, schema: string): string => { diff --git a/tests/yup.spec.ts b/tests/yup.spec.ts index b8c48048..a442661f 100644 --- a/tests/yup.spec.ts +++ b/tests/yup.spec.ts @@ -214,43 +214,4 @@ describe("yup", () => { "export const PageTypeSchema = yup.mixed().oneOf(['PUBLIC', 'BASIC_AUTH'])" ); }); - it("with yup.strict", async () => { - const schema = buildSchema(/* GraphQL */ ` - input PrimitiveInput { - a: ID - b: String - c: Boolean - d: Int - e: Float - f: F! - } - - input F { - a: String! - } - `); - const result = await plugin( - schema, - [], - { - yup: { - strict: true, - }, - }, - {} - ); - const wantContains = [ - "export function PrimitiveInputSchema(): yup.SchemaOf", - "a: yup.string().strict(true),", - "b: yup.string().strict(true),", - "c: yup.boolean().strict(true),", - "d: yup.number().strict(true),", - "e: yup.number().strict(true),", - "f: FSchema().defined()", - "a: yup.string().strict(true).defined()", // for FSchema - ]; - for (const wantContain of wantContains) { - expect(result.content).toContain(wantContain); - } - }); });