Skip to content

write more description in readme #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 23, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 120 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -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<ExampleInput> {
return yup.object({
email: yup.string().defined().required("Hello, World!").min(50),
message: yup.string().defined().matches(/^Hello/)
})
}
```
2 changes: 1 addition & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
@@ -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");
Expand Down
8 changes: 2 additions & 6 deletions src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion src/yup/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
39 changes: 0 additions & 39 deletions tests/yup.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<PrimitiveInput>",
"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);
}
});
});