Zenn
Open3

NestJS ✖️ class-valdator Tips集📝

Tips
NestJS
classvaldator
まさぴょんまさぴょん

FE Req と BE Req に差分がある場合の確認ポイント📝

この問題は、フロントエンド（FE）からバックエンド（BE）にリクエストを送信する際に、データが正しく受け取られない原因がいくつか考えられます。
以下に、考えられる原因とその解決策を示します。

1. データの送信形式

リクエストが正しい形式で送信されているか確認してください。特に、JSON形式でデータを送信する場合、正しいヘッダー（Content-Type: application/json）が設定されているか確認します。

2. NestJSのDTO（Data Transfer Object）

NestJSでは、リクエストデータを受け取るためにDTOを使用することが一般的です。UpdateArchiveVideoUploadedReqクラスがDTOとして正しく機能しているか確認してください。
特に、class-validatorを使用している場合、バリデーションが正しく設定されているか確認します。

import { IsBoolean } from 'class-validator';

export class UpdateFileReq extends FileBaseReq {
  @IsBoolean()
  isUpdateFile: boolean;

  constructor(arg: {
    isUpdateFile: boolean;
    captionJa: string;
    captionEn: string;
    descriptionJa: string;
    descriptionEn: string;
    thumbnailUrl?: string;
    displayOrder: number;
  }) {
    super(arg);
    this.displayOrder = arg.displayOrder;
  }
}

3. バックエンドの受け取り側の設定

バックエンドでリクエストを受け取る際に、正しいエンドポイントが設定されているか、
また、リクエストボディが正しくパースされているか確認してください。
@Body()デコレーターを使用して、リクエストボディを正しく受け取るようにします。

import { Controller, Post, Body } from '@nestjs/common';

@Controller('file')
export class FileController {
  @Post('update')
  async updateFile(@Body() updateReq: UpdateFileReq) {
    // ここでupdateReqを使用して処理を行う
  }
}

4. フロントエンドのデータ構造

フロントエンドから送信するデータが、バックエンドで期待される構造と一致しているか確認してください。特に、オブジェクトのプロパティ名や型が一致しているかを確認します。

5. エラーハンドリング

リクエストが失敗した場合、エラーメッセージやレスポンスを確認して、どの部分で問題が発生しているかを特定します。
NestJSのデバッグ機能を使用して、リクエストの流れを追跡することも有効です。

これらのポイントを確認し、問題を特定して修正することで、データが正しく受け取れるようになるはずです。

参考・引用

https://zenn.dev/minateru/articles/afc74c519461a9