DEV Community: Nithin K Joy

How to use class-validator and generate custom error object in nest.js

Nithin K Joy — Tue, 06 Jun 2023 06:43:36 +0000

Objective

The main objective of this article is showing how to generate custom error object when the validation fails, but we will go through the process of using class-validator and later about generating custom error object.

What is class-validator

class-validator allows use of decorator and non-decorator based validation. Internally uses validator.js to perform validation. class-validator works on both browser and node.js platforms.

How to use it

In order to use class-validator in nest.js we need to install class-validator and class-transformer.
npm i --save class-validator class-transformer

To configure, in main.ts file we need to invoke ValidationPipe() constructor function imported form @nestjs/common and pass it as a argument for app.useGlobalPipes method.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(new ValidationPipe({ stopAtFirstError: true }));
  await app.listen(3500);
}

bootstrap();

{ stopAtFirstError: true } is just an optional argument to stop after getting the first error and return it. we can always customize it.

Let us assume we have a users resource. We need a create create-user.dto.ts file inside a dto folder under users resource as in image given below.

Inside create-user.dto.ts file add the class validation you need to add. Refer class-validator docs for which validation you need to apply. docs: https://www.npmjs.com/package/class-validator

This is my create-user.dto.ts file

import {
  IsNotEmpty,
  IsString,
  MinLength,
  IsAlpha,
  Matches,
  IsEnum,
} from 'class-validator';

export enum UserState {
  ACTIVE = 'Active',
  IN_ACTIVE = 'Inactive',
}

export class CreateUserDto {
  @IsNotEmpty()
  @IsString()
  @IsAlpha()
  @MinLength(1)
  readonly firstName: string;

  @IsNotEmpty()
  @IsString()
  readonly lastName: string;

  @IsNotEmpty()
  @IsString()
  @IsNotEmpty()
  @Matches(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,3}$/g)
  readonly email: string;

  @IsNotEmpty()
  @IsString()
  @Matches(/^[6789]\d{9}$/)
  readonly phoneNumber: string;

  @IsNotEmpty()
  @IsString()
  @MinLength(3)
  readonly companyName: string;

  @IsEnum(UserState)
  readonly userState: UserState;
}

Next import CreateUserDto class and use it inside the user controller.

import { Controller, Post, Body } from '@nestjs/common';
import { UsersService } from './users.service';
import { CreateUserDto } from './dto/create-user.dto';

@Controller('users')
export class UsersController {
  constructor(private readonly usersService: UsersService) {}

  @Post()
  create(@Body() user: CreateUserDto) {
    return this.usersService.create(user);
  }
}

After sending request in postman or any other api testing application this will automatically validate and send error message as shown below
Request body

{
  "firstName":"",
  "lastName":"K Joy",
  "email":"Nn@gail.com",
  "phoneNumber":"9160000000",
  "companyName":"abcgf",
  "userState":"Active"
}

Response

{
  "statusCode": 400,
  "message": [
    "firstName must be longer than or equal to 1 characters"
  ],
  "error": "Bad Request"
}

How to generate custom error message object

But we need to get which property just gave us this error along with the error message. In order to do that we need to configure the ValidationPipe() in main.ts file with some configurations.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe, BadRequestException } from '@nestjs/common';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(
    new ValidationPipe({
      exceptionFactory: (errors) => {
        const result = errors.map((error) => ({
          property: error.property,
          message: error.constraints[Object.keys(error.constraints)[0]],
        }));
        return new BadRequestException(result);
      },
      stopAtFirstError: true,
    }),
  );
  await app.listen(3500);
}

bootstrap();

Let me break down the above code. The object below is the error object.

{
  property: 'firstName',
  children: [],
  constraints: {
    minLength: 'firstName must be longer than or equal to 1 characters'
  }
}

property: error.property usage is straight forward.
message is basically the value inside the the constraints object. But the key for the constraint object (here minLength) is not static. The key will be different for different validation failure.

Object.keys(error.constraints)[0] Object.keys just changes all object keys to array and we access the first key by [0].

Request body

{
  "firstName":"",
  "lastName":"K Joy",
  "email":"Nn@gail.com",
  "phoneNumber":"9160000000",
  "companyName":"abcgf",
  "userState":"Active"
}

Response

{
  "statusCode": 400,
  "message": [
    {
      "property": "firstName",
      "message": "firstName must be longer than or equal to 1 characters"
    }
  ],
  "error": "Bad Request"
}

If you found this helpful, be sure to leave a 💖 on the post. Thank you!

How to call React Query hooks conditionally!

Nithin K Joy — Mon, 22 May 2023 17:38:12 +0000

Yes, You heard it right! We are only able to use React hooks directly inside a component. If you put hooks inside a conditional statement or a looping statement we will get error (Error: Invalid hook call.)

Problem

Let us try it by using react-query useMutation or useQuery hook inside conditional statement.

We need to use it conditionally when you use same form component for both adding and editing data.

const submit = async data => {
    if (action == "Add") {
      const mutation = useMutation({
        mutationFn: addCompany, //post
        onSuccess: () => {
          queryClient.invalidateQueries({ queryKey: ['companies'] })
        },
      })
      mutation.mutate(data);
    }

    if (action == "Edit") {
      const mutation = useMutation({
        mutationFn: editCompany, //put,
        onSuccess: () => {
          queryClient.invalidateQueries({ queryKey: ['companies'] })
        },
      })
      mutation.mutate(data);
    }
  };

Above code will result in this error

Solution

Create new custom hook inside hooks folder and return useMutation hook with required properties passed from the component where it is called.

import {useMutation} from "@tanstack/react-query"

const useMutateHook = (properties) => {
    return useMutation(properties)
}

export default useMutateHook

Create another file and write code for action=="Add"

In the below code we are just returning Object with mutationFn, onError, onSuccess methods.

// This code should execute when user is in add mode

import APIClient from "../../services/api-client";

const apiClient = new APIClient("/companies");

const addCompany = () => {
  return {
    mutationFn: data => {
      return apiClient.post(data);
    },
    onError: (error, variables, context) => {
      //handle error
    },
    onSuccess: (data, variables, context) => {
      //handle success
    },
  };
};

export default addCompany;

Look at below code incase you want to know what does api-client.js file contain

import axios from "axios";

export const axiosInstance = axios.create({
  baseURL: "http://localhost:3500/api",
});

class APIClient {
  endpoint

  constructor(endpoint) {
    this.endpoint = endpoint;
  }

  getAll = (queryString) => {
    return axiosInstance
      .get(this.endpoint+queryString)
      .then((res) => res.data);
  };

  get = () => {
    return axiosInstance
      .get(this.endpoint)
      .then((res) => res.data);
  };

  post = (body) => {
    return axiosInstance
      .post(this.endpoint,body)
      .then((res) => res.data);
  };

  put = (id,body) => {
    return axiosInstance
      .put(`${this.endpoint}/${id}`,body)
      .then((res) => res.data);
  };

  delete = (id) => {
    return axiosInstance
      .delete(`${this.endpoint}/${id}`)
      .then((res) => res.data);
  };
}

export default APIClient;

Create another file and write code for action=="Edit"

//This code should execute when user is in edit mode

import APIClient from "../../services/api-client";

const apiClient = new APIClient("/companies");

const editCompany = () => {
  return {
    mutationFn: data => {
      return apiClient.put(data._id, data);
    },
    onError: (error, variables, context) => {
      //handle error
    },
    onSuccess: (data, variables, context) => {
      //handle success
    },
  };
};

export default editCompany;

Finally import custom useMutation hook, addCompany hook, editCompany hook and use it as per your needs.

const mutation = useMutateHook(action == "Add"? addCompany():editCompany());

If you found this helpful, be sure to leave a 💖 on the post. Thank you!