NestJS: How to transform an array in a @Query object

Question

I'm new to NestJS and I am trying to fill a filter DTO from query Parameters.

Here is what I have:

Query:

localhost:3000/api/checklists?stations=114630,114666,114667,114668

Controller

@Get()
public async getChecklists(@Query(ValidationPipe) filter: ChecklistFilter): Promise<ChecklistDto[]> {
    // ...
}

DTO

export class ChecklistFilter {

    @IsOptional()
    @IsArray()
    @IsString({ each: true })
    @Type(() => String)
    @Transform((value: string) => value.split(','))
    stations?: string[];

    // ...
}

With this, the class validator does not complain, however, in the filter object stations is not actually an array but still a single string.

I want to transform it into an array within the validation pipe. How can I achieve that?

Btw. it should be: @Transform(({value}) => value.split(',')) — Krzysztof Szala, Feb 17 '21 at 13:34

score 13 · Accepted Answer · answered Dec 11 '19 at 16:28

You can pass an instance of the ValidationPipe instead of the class, and in doing so you can pass in options such as transform: true which will make class-validatorand class-transformer run, which should pass back the transformed value.

@Get()
public async getChecklists(@Query(new ValidationPipe({ transform: true })) filter: ChecklistFilter): Promise<ChecklistDto[]> {
    // ...
}

score 11 · Answer 2 · answered Oct 18 '21 at 02:19

11

export class ChecklistFilter {
    
            @IsOptional()
            @IsArray()
            @IsString({ each: true })
            @Type(() => String)
            @Transform(({ value }) => value.split(','))
            stations?: string[];
        
            // ...
        }

--

     @Get()
     public async getChecklists(@Query() filter: ChecklistFilter): Promise<ChecklistDto[]> {
                // ...
            }

"class-transformer": "^0.4.0"
"class-validator": "^0.13.1"

answered Oct 18 '21 at 02:19

Juan Diego Garcia

191
2
3

Hi, any idea on how to achieve this for an array of numbers in a query param? imagine im trying to validate [www.url.com/path?ids=1,2,3] , where [ids] should be an array of numbers, and nothing else. tried converting your answer, but with no success so far. – Maor Barazani Nov 07 '21 at 22:12
6

`@IsArray() @IsInt({ each: true }) @Transform(({ value }) => value.trim().split(',').map(id=>Number(id))) @ApiProperty({ type: [Number], format: 'form' }) ids?: number[];` **/path?ids=1,2,3,4** – Juan Diego Garcia Nov 10 '21 at 20:42

score 10 · Answer 3 · answered Aug 08 '22 at 17:47

10

This can be handled without a separate DTO class using the ParseArrayPipe:

@Get()
findByIds(
  @Query('ids', new ParseArrayPipe({ items: Number, separator: ',' }))
  ids: number[],
) {
  console.log(ids);
  console.log(Array.isArray(ids)); //returns true
  return 'This action returns users by ids';
}

ref: https://docs.nestjs.com/techniques/validation#parsing-and-validating-arrays

answered Aug 08 '22 at 17:47

chrismarx

11,488
9
84
97

1

this was almost exactly what i needed, thank you! only exception is i needed array of strings instead of numbers but that was easy enough to figure out :) – Qamar Stationwala Aug 28 '23 at 22:07

score 5 · Answer 4 · answered Aug 24 '22 at 07:26

You can change your initial query a bit:

localhost:3000/api/checklists?stations[]=114630&stations[]=114666&stations[]=114667&stations[]=114668

And your controller:

@Get()
public async getChecklists(@Query('stations') filter: string[]): Promise<ChecklistDto[]> {
    // ...
}

This way the default mechanism will work fine and will convert query params into string array and no any additional dependencies or handling required.

You also can wrap it with your DTO if needed, but you get the idea.

score 2 · Answer 5 · answered Sep 19 '22 at 17:11

the only problem you had there is in the order of validations. You can do it like this:

export class ChecklistFilter {

        @IsOptional()
        @Transform((params) => params.value.split(',').map(Number))
        @IsInt({ each: true })
        stations?: number[]
    
        // ...
    }

If you want numbers instead of ints: @IsNumber({}, { each: true })

score 0 · Answer 6 · answered Nov 19 '22 at 21:45

Had a similar issue, what works for me is apply a custom transform:

export class ChecklistFilter {
  @ApiProperty({ type: [Number] })
  @IsOptional()
  @IsArray()
  @Transform((item) => item.value.map((v) => parseInt(v, 10)))
  stations?: number[];
  //...
}

NestJS: How to transform an array in a @Query object

6 Answers6