Request body in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extract the request body in a NestJS controller method.

NestJS

import { Controller, Post, [1] } from '@nestjs/common';

@Controller('users')
export class UsersController {
  @Post()
  createUser(@[1]() body: any) {
    return body;
  }
}

Drag options to blanks, or click blank then click option'

AQuery

BParam

CBody

DHeaders

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Param() instead of @Body() to get the request body.

Forgetting to import the correct decorator.

Using @Query() which extracts query parameters, not the body.

The @Body() decorator extracts the request body in a NestJS controller method.

2fill in blank

medium

Complete the code to define a DTO class and use it to type the request body in a NestJS controller.

NestJS

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

class CreateUserDto {
  name: string;
  age: number;
}

@Controller('users')
export class UsersController {
  @Post()
  createUser(@Body() body: [1]) {
    return body;
  }
}

Drag options to blanks, or click blank then click option'

AUser

Bany

CObject

DCreateUserDto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'any' defeats the purpose of typing the request body.

Using a class name that is not defined.

Using 'Object' which is less specific than the DTO.

Using a DTO class like CreateUserDto helps type the request body for better validation and clarity.

3fill in blank

hard

Fix the error in the code to correctly extract the request body in a NestJS controller method.

NestJS

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

@Controller('products')
export class ProductsController {
  @Post()
  addProduct(@[1] body: any) {
    return body;
  }
}

Drag options to blanks, or click blank then click option'

ABody()

BParam()

CQuery()

DRequest()

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Body without parentheses.

Using other decorators like @Param or @Query incorrectly.

Forgetting to import the decorator.

The @Body() decorator is required to extract the request body; missing parentheses cause errors.

4fill in blank

hard

Fill both blanks to create a POST route that extracts and types the request body using a DTO in NestJS.

NestJS

import { Controller, Post, [1] } from '@nestjs/common';

class UpdateUserDto {
  email: string;
  password: string;
}

@Controller('users')
export class UsersController {
  @Post('update')
  updateUser(@[2]() body: UpdateUserDto) {
    return body;
  }
}

Drag options to blanks, or click blank then click option'

ABody

BParam

CQuery

DHeaders

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong decorator.

Using different decorators for import and parameter.

Forgetting parentheses in the parameter decorator.

The @Body decorator is imported and used to extract the typed request body in the controller method.

5fill in blank

hard

Fill all three blanks to create a NestJS controller method that extracts a typed request body and returns a confirmation message.

NestJS

import { Controller, Post, [1] } from '@nestjs/common';

class CreateOrderDto {
  productId: number;
  quantity: number;
}

@Controller('orders')
export class OrdersController {
  @Post()
  createOrder(@[2]() order: [3]) {
    return `Order for product ${order.productId} with quantity ${order.quantity} received.`;
  }
}

Drag options to blanks, or click blank then click option'

ABody

BCreateOrderDto

COrderDto

DParam

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong DTO class name.

Using @Param instead of @Body.

Not importing the @Body decorator.

Import and use @Body decorator and type the parameter with the correct DTO class CreateOrderDto.

Practice

1. In NestJS, which decorator is used to access the data sent in the request body?

easy

A. @Body()

B. @Param()

C. @Query()

D. @Headers()

Solution

1. Step 1: Understand the purpose of decorators in NestJS

   Decorators like @Body(), @Param(), @Query(), and @Headers() extract different parts of the request.

2. Step 2: Identify which decorator accesses the request body

   @Body() specifically extracts the data sent in the request body from the client.

3. Final Answer:

   @Body() -> Option A

4. Quick Check:

   Request body data = @Body() [OK]

Hint: Request body data always uses @Body() decorator [OK]

Common Mistakes:

• Using @Param() to get body data
• Confusing @Query() with @Body()
• Trying to access body data without any decorator

2. Which of the following is the correct way to type the request body in a NestJS controller method?

easy

A. create(@Body: any data) {}

B. create(@Body data: any) {}

C. create(@Body() data: any) {}

D. create(@Body data) {}

Solution

1. Step 1: Recall the syntax for decorators with typed parameters

   In NestJS, the decorator is followed by parentheses and the parameter is typed after the colon.

2. Step 2: Check each option's syntax

   create(@Body() data: any) {} correctly uses @Body() with typed parameter 'data: any'. Options B, C, and D have syntax errors or missing parentheses.

3. Final Answer:

   create(@Body() data: any) {} -> Option C

4. Quick Check:

   Correct decorator syntax = create(@Body() data: any) {} [OK]

Hint: Always use parentheses with @Body() and type after colon [OK]

Common Mistakes:

• Omitting parentheses after @Body
• Placing type before parameter name
• Not typing the parameter at all

3. Given this NestJS controller method, what will be the output if the client sends {"name": "Alice"} in the request body?

  @Post()
  create(@Body() data: { name: string }) {
    return `Hello, ${data.name}!`;
  }

medium

A. "Hello, null!"

B. "Hello, undefined!"

C. Error: data.name is not defined

D. "Hello, Alice!"

Solution

1. Step 1: Understand the method behavior with typed body

   The method expects an object with a 'name' string property and returns a greeting using that name.

2. Step 2: Analyze the input and output

   The client sends {"name": "Alice"}, so data.name is "Alice". The method returns "Hello, Alice!".

3. Final Answer:

   "Hello, Alice!" -> Option D

4. Quick Check:

   Input name "Alice" produces greeting "Hello, Alice!" [OK]

Hint: Match input keys to typed properties for correct output [OK]

Common Mistakes:

• Assuming undefined if typing is missing
• Expecting runtime error for missing type
• Confusing property names in the body

4. Identify the error in this NestJS controller method:

  @Post()
  create(@Body data: { age: number }) {
    return `Age is ${data.age}`;
  }

medium

A. Return statement syntax error

B. Missing parentheses after @Body decorator

C. Incorrect type for data parameter

D. Method should be named differently

Solution

1. Step 1: Check the decorator syntax

   @Body decorator requires parentheses even if empty, so it should be @Body()

2. Step 2: Verify other parts of the method

   The type and return statement are correct; only the decorator syntax is wrong.

3. Final Answer:

   Missing parentheses after @Body decorator -> Option B

4. Quick Check:

   @Body() needs parentheses [OK]

Hint: Always write @Body() with parentheses, even if empty [OK]

Common Mistakes:

• Omitting parentheses after @Body
• Misplacing type annotation
• Assuming method name causes error

5. You want to accept a request body with optional fields in NestJS. Which method signature correctly types the body to allow optional 'email' and required 'username' fields?

  @Post()
  create(???) {
    // method body
  }

hard

A. @Body() data: { username: string; email?: string }

B. @Body() data: { username?: string; email: string }

C. @Body() data: { username: string; email: string }

D. @Body() data: { username?: string; email?: string }

Solution

1. Step 1: Understand optional and required fields in TypeScript types

   A question mark (?) after a property name means it is optional; absence means required.

2. Step 2: Match the requirement to the type

   Username is required, so no '?'. Email is optional, so it has '?'. @Body() data: { username: string; email?: string } matches this.

3. Final Answer:

   @Body() data: { username: string; email?: string } -> Option A

4. Quick Check:

   Required username, optional email = @Body() data: { username: string; email?: string } [OK]

Hint: Use '?' after optional fields in type definitions [OK]

Common Mistakes:

• Marking required fields as optional
• Marking optional fields as required
• Forgetting to use @Body() decorator