DTO (class-validator) Validation Example

import { prefix, post, operation } from 'vovk';
import { withDto } from 'vovk-dto';
import { UpdateUserBodyDto, UpdateUserParamsDto, UpdateUserQueryDto, UpdateUserResponseDto } from './UserDto.ts';
 
@prefix('users-dto')
export default class UserDtoController {
  @operation({
    summary: 'Update user (DTO)',
    description: 'Update user by ID with DTO validation',
  })
  @post('{id}')
  static updateUser = withDto({
    body: UpdateUserBodyDto,
    params: UpdateUserParamsDto,
    query: UpdateUserQueryDto,
    output: UpdateUserResponseDto,
    async handle(req, { id }) {
      const { name, age, email } = await req.json();
      const notify = req.nextUrl.searchParams.get('notify');
      // do something with the data
      console.log(`Updating user ${id}:`, { name, age, email, notify });
      return {
        success: true,
      } satisfies UpdateUserResponseDto;
    },
  });
}
 

import { IsString, IsNumber, Min, IsEmail, IsUUID, IsIn, IsBoolean, Max } from 'class-validator';
import { JSONSchema } from 'class-validator-jsonschema';
 
@JSONSchema({ description: 'User object' })
export class UpdateUserBodyDto {
  @IsString()
  @JSONSchema({ description: 'User full name' })
  name!: string;
 
  @IsNumber()
  @Min(0)
  @Max(120)
  @JSONSchema({ description: 'User age' })
  age!: number;
 
  @IsEmail()
  @JSONSchema({ description: 'User email' })
  email!: string;
 
  /* 
  @IsDefined({ message: 'File is required' })
  @JSONSchema({ description: 'User file', type: 'string', format: 'binary' })
  file!: File; 
  */
}
 
@JSONSchema({ description: 'Path parameters' })
export class UpdateUserParamsDto {
  @IsUUID()
  @JSONSchema({ description: 'User ID' })
  id!: string;
}
 
@JSONSchema({ description: 'Query parameters' })
export class UpdateUserQueryDto {
  @IsIn(['email', 'push', 'none'])
  @JSONSchema({ description: 'Notification type' })
  notify!: string;
}
 
@JSONSchema({ description: 'Response object' })
export class UpdateUserResponseDto {
  @IsBoolean()
  @JSONSchema({ description: 'Success status' })
  success!: boolean;
}
 

'use client';
import { useState, type FormEvent } from 'react';
import { UserDtoRPC } from '@/client';
import type { VovkReturnType } from 'vovk';
import { validateOnClient } from 'vovk-dto/validateOnClient.js';
import { plainToInstance } from 'class-transformer';
import { UpdateUserBodyDto, UpdateUserParamsDto, UpdateUserQueryDto } from '@/modules/dto/UserDto.ts';
 
export default function DtoFormExample() {
  const [response, setResponse] = useState<VovkReturnType<typeof UserDtoRPC.updateUser> | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [age, setAge] = useState(30);
  const [disableClientValidation, setDisableClientValidation] = useState(false);
  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      setResponse(
        await UserDtoRPC.updateUser({
          body: plainToInstance(UpdateUserBodyDto, { name, email, age } satisfies UpdateUserBodyDto),
          query: plainToInstance(UpdateUserQueryDto, { notify: 'push' } satisfies UpdateUserQueryDto),
          params: plainToInstance(UpdateUserParamsDto, {
            id: '5a279068-35d6-4d67-94e0-c21ef4052eea',
          } satisfies UpdateUserParamsDto),
          disableClientValidation,
          // vovk.config explicitly uses vovk-ajv as a client-side validation library,
          // so we need to pass "validateOnClient" manually for this particular example.
          // This is not needed in a real project when config.imports.outputConfig.validateOnClient is set to 'vovk-dto/validateOnClient'.
          validateOnClient,
        })
      );
      setError(null);
    } catch (e) {
      setError(e as Error);
      setResponse(null);
    }
  };
 
  return (
    <form onSubmit={onSubmit}>
      <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
      <input type="text" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <label>Age:</label>
      <input type="number" placeholder="Age" value={age} onChange={(e) => setAge(e.target.valueAsNumber)} />
      <label className="block mb-4">
        <input
          type="checkbox"
          className="mr-2"
          checked={disableClientValidation}
          onChange={(e) => setDisableClientValidation(e.target.checked)}
        />
        Disable client-side validation
      </label>
      <button>Submit</button>
 
      {response && (
        <div className="text-left">
          <h3>Response:</h3>
          <pre>{JSON.stringify(response, null, 2)}</pre>
        </div>
      )}
 
      {error && <div className="overflow-auto">❌ {String(error)}</div>}
    </form>
  );
}