|
| 1 | +### CLI Plugin |
| 2 | + |
| 3 | +> warning **Warning** This chapter applies only to the code first approach. |
| 4 | +
|
| 5 | +TypeScript's metadata reflection system has several limitations which make it impossible to, for instance, determine what properties a class consists of or recognize whether a given property is optional or required. However, some of these constraints can be addressed at compilation time. Nest provides a plugin that enhances the TypeScript compilation process to reduce the amount of boilerplate code required. |
| 6 | + |
| 7 | +> info **Hint** This plugin is **opt-in**. If you prefer, you can declare all decorators manually, or only specific decorators where you need them. |
| 8 | +
|
| 9 | +#### Overview |
| 10 | + |
| 11 | +The GraphQL plugin will automatically: |
| 12 | + |
| 13 | +- annotate all input object, object type and args classes properties with `@Field` unless `@HideField` is used |
| 14 | +- set the `nullable` property depending on the question mark (e.g. `name?: string` will set `nullable: true`) |
| 15 | +- set the `type` property depending on the type (supports arrays as well) |
| 16 | + |
| 17 | +Please, note that your filenames **must have** one of the following suffixes in order to be analyzed by the plugin: `['.input.ts', '.args.ts', '.entity.ts', '.model.ts']` (e.g., `author.entity.ts`). If you are using a different suffix, you can adjust the plugin's behavior by specifying the `typeFileNameSuffix` option (see below). |
| 18 | + |
| 19 | +With what we've learned so far, you have to duplicate a lot of code to let the package know how your type should be declared in GraphQL. For example, you could define a simple `Author` class as follows: |
| 20 | + |
| 21 | +```typescript |
| 22 | +@@filename(authors/models/author.model) |
| 23 | +@ObjectType() |
| 24 | +export class Author { |
| 25 | + @Field(type => Int) |
| 26 | + id: number; |
| 27 | + |
| 28 | + @Field({ nullable: true }) |
| 29 | + firstName?: string; |
| 30 | + |
| 31 | + @Field({ nullable: true }) |
| 32 | + lastName?: string; |
| 33 | + |
| 34 | + @Field(type => [Post]) |
| 35 | + posts: Post[]; |
| 36 | +} |
| 37 | +``` |
| 38 | + |
| 39 | +While not a significant issue with medium-sized projects, it becomes verbose & hard to maintain once you have a large set of classes. |
| 40 | + |
| 41 | +By enabling the GraphQL plugin, the above class definition can be declared simply: |
| 42 | + |
| 43 | +```typescript |
| 44 | +@@filename(authors/models/author.model) |
| 45 | +@ObjectType() |
| 46 | +export class Author { |
| 47 | + @Field(type => Int) |
| 48 | + id: number; |
| 49 | + firstName?: string; |
| 50 | + lastName?: string; |
| 51 | + posts: Post[]; |
| 52 | +} |
| 53 | +``` |
| 54 | + |
| 55 | +The plugin adds appropriate decorators on-the-fly based on the **Abstract Syntax Tree**. Thus, you won't have to struggle with `@Field` decorators scattered throughout the code. |
| 56 | + |
| 57 | +> info **Hint** The plugin will automatically generate any missing swagger properties, but if you need to override them, simply set them explicitly via `@Field()`. |
| 58 | +#### Using the CLI plugin |
| 59 | +To enable the plugin, open `nest-cli.json` (if you use [Nest CLI](/cli/overview)) and add the following `plugins` configuration: |
| 60 | + |
| 61 | +```javascript |
| 62 | +{ |
| 63 | + "collection": "@nestjs/schematics", |
| 64 | + "sourceRoot": "src", |
| 65 | + "compilerOptions": { |
| 66 | + "plugins": ["@nestjs/graphql/plugin"] |
| 67 | + } |
| 68 | +} |
| 69 | +``` |
| 70 | + |
| 71 | +You can use the `options` property to customize the behavior of the plugin. |
| 72 | + |
| 73 | +```javascript |
| 74 | +"plugins": [ |
| 75 | + { |
| 76 | + "name": "@nestjs/graphql/plugin", |
| 77 | + "options": { |
| 78 | + "typeFileNameSuffix": [".input.ts", ".args.ts"] |
| 79 | + } |
| 80 | + } |
| 81 | +] |
| 82 | +``` |
| 83 | + |
| 84 | +The `options` property has to fulfill the following interface: |
| 85 | + |
| 86 | +```typescript |
| 87 | +export interface PluginOptions { |
| 88 | + typeFileNameSuffix?: string[]; |
| 89 | +} |
| 90 | +``` |
| 91 | + |
| 92 | +<table> |
| 93 | + <tr> |
| 94 | + <th>Option</th> |
| 95 | + <th>Default</th> |
| 96 | + <th>Description</th> |
| 97 | + </tr> |
| 98 | + <tr> |
| 99 | + <td><code>typeFileNameSuffix</code></td> |
| 100 | + <td><code>['.input.ts', '.args.ts', '.entity.ts', '.model.ts']</code></td> |
| 101 | + <td>GraphQL types files suffix</td> |
| 102 | + </tr> |
| 103 | +</table> |
| 104 | + |
| 105 | +If you don't use the CLI but instead have a custom `webpack` configuration, you can use this plugin in combination with `ts-loader`: |
| 106 | + |
| 107 | +```javascript |
| 108 | +getCustomTransformers: (program: any) => ({ |
| 109 | + before: [require('@nestjs/graphql/plugin').before({}, program)] |
| 110 | +}), |
| 111 | +``` |
0 commit comments