NestJSにてクエリパラメータで渡した値が文字列になってしまう件について

NestJSでAPIを作成した際に、クエリパラメータでnumberやbooleanを渡すと文字列になってしまって、わざわざ自分で変換していたのですが、変換する方法が用意されていました。。

結論：Pipeを使おう

@Get()
async findOne(@Query('id', ParseIntPipe) id: number) {
  return this.catsService.findOne(id);
}

参考：https://docs.nestjs.com/pipes

現象について実際に動かして説明します

バージョン

$ nest --version
6.12.2

プロジェクト作成

nest new pipe-test
cd pipe-test

コントローラーを修正

src/app.controller.ts

import { Controller, Get, Query } from '@nestjs/common';

@Controller()
export class AppController {
    @Get()
    getTest(@Query('id') id: number, @Query('flg') flg: boolean) {
        console.log(id, typeof id);
        console.log(flg, typeof flg);
        return 'test';
    }
}

動作確認

npm startで起動し、ブラウザでhttp://localhost:3000/?id=1&flg=trueにアクセスします

1 string
true string

id/flgともにstringになっています

パイプをかませる

src/app.controller.ts

import { Controller, Get, ParseIntPipe, Query } from '@nestjs/common';
import { ParseBoolPipe } from './pipes/parse-bool.pipe';

@Controller()
export class AppController {
    @Get()
    getTest(@Query('id', ParseIntPipe) id: number, @Query('flg', ParseBoolPipe) flg: boolean) {
        console.log(id, typeof id);
        console.log(flg, typeof flg);
        return 'test';
    }
}

※NestJS6系だとParseBoolPipeとParseArrayPipeはないなので、雑に移植して試してみました。
参考：https://github.com/nestjs/nest/blob/master/packages/common/pipes/parse-bool.pipe.ts

src/pipes/parse-bool.pipe.ts

import { ArgumentMetadata, BadRequestException, Injectable, PipeTransform } from "@nestjs/common";

/**
 * Defines the built-in ParseBool Pipe
 *
 * @see [Built-in Pipes](https://docs.nestjs.com/pipes#built-in-pipes)
 *
 * @publicApi
 */
@Injectable()
export class ParseBoolPipe
    implements PipeTransform<string | boolean, Promise<boolean>> {
    protected exceptionFactory: (error: string) => any;

    /**
     * Method that accesses and performs optional transformation on argument for
     * in-flight requests.
     *
     * @param value currently processed route argument
     * @param metadata contains metadata about the currently processed route argument
     */
    async transform(
        value: string | boolean,
        metadata: ArgumentMetadata,
    ): Promise<boolean> {
        if (value === true || value === 'true') {
            return true;
        }
        if (value === false || value === 'false') {
            return false;
        }
        throw new BadRequestException('Validation failed (boolean string is expected)');
    }
}

これで同じようにhttp://localhost:3000/?id=1&flg=trueにアクセスします

1 'number'
true 'boolean'

idがnumber型に、flgがboolean型になりました！

想定外の値を渡すとどうなるか

想定した型以外の値を渡すと以下のような戻り値になります

• http://localhost:3000/?id=eee&flg=true

{"statusCode":400,"error":"Bad Request","message":"Validation failed (numeric string is expected)"}

• http://localhost:3000/?id=1&flg=aaa

{"statusCode":400,"error":"Bad Request","message":"Validation failed (boolean string is expected)"}

※この時、controllerのメソッドは実行されません。

まとめ

提供されているパイプは少ないですが、自作することもできるので色々出来そうです！