CODEWITHSUNDEEP
reactjsnestjsclass-validator
serv-inc
serv-inc

Reputation: 38197

Using class-validator DTO also in front-end

A NestJS project uses a ValidationPipe with class-validator to validate POST requests. It would be nice to use the same class-validator DTO in the (react) front-end .

How could the entities in the DTO be linked to react elements ?

This may be similar to How to Sync Front end and back end validation, but more focused on specific tools.

Upvotes: 12

Views: 6339

Answers (2)

Facundo Petre
Facundo Petre

Reputation: 47

Well Nestjs itself uses class-validators for DTOs,

So you can move them to an external package, there you'll be able to declare your DTOs.

After doing that you can consume the DTOs from your NestJS app and also from your React app.

For example, this is my implementation of a DTO on a package:

    
    export const getCreateUserDto = (ApiPropertySwagger?: any) => {
      // We did this to avoid having to include all nest dependencies related to ApiProperty on the client side too
      // With this approach the value of this decorator will be injected by the server but wont affect the client
      const ApiProperty = ApiPropertySwagger || function () {};
    
      class CreateUserDto {
        @IsEmail()
        @ApiProperty({
          description: "This is required and must be a valid email",
          type: String,
        })
        email: string;
    
        @IsString()
        @MinLength(2)
        @ApiProperty({
          description: "This is required and must be at least 2 characters long",
          type: String,
        })
        firstName: string;
    
        @IsString()
        @IsOptional()
        lastName?: string;
    
        @IsString()
        @IsOptional()
        nationality?: string;
      }
    
      return CreateUserDto;
    };

In your NestJS app you can do the following:

import { ApiProperty } from '@nestjs/swagger';
// Here we send `ApiProperty` dependency to  be added to`CreateUserDto`
export const _CreateUserDto = getCreateUserDto(ApiProperty);

// This allows using it as a TS type and as a constructor class
export class CreateUserDto extends _CreateUserDto {}

And in your react app you can do:

import { getCreateUserDto } from "@sample/dtos";    
    // We don't need `ApiProperty` on the client,
    // so it will fallback on the default empty decorator 
    const _CreateUserDto = getCreateUserDto();
    // This allows using it as a TS type and as a constructor class
    class CreateUserDto extends _CreateUserDto {}

I just posted a blog with this implementation:

https://dev.to/facup3/fullstack-nestjs-dtos-for-your-web-app-4f60

I used React + react-hook-form to run same validations on the client side than in the nest controllers.

Upvotes: 2

Fel
Fel

Reputation: 4818

We had exactly the same need a couple of months ago with a NestJS backend and Angular frontend. What we've done is to create a third project called "API-Common" using NestJS where we've gathered all the common DTOs and utilities that are needed in both the backend and frontend. To share it, we create an NPM package from the project so we can import it in both applications.

You can learn more about creating your private NPM registry in the following link:

https://gemfury.com/help/npm-registry/

Upvotes: 7

Related Questions