Route handlers (GET, POST, PUT, DELETE) in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a GET route handler in a NestJS controller.

NestJS

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

@Controller('items')
export class ItemsController {
  @[1]()
  findAll() {
    return 'This action returns all items';
  }
}

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

ADelete

BPost

CPut

DGet

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Post instead of @Get for fetching data.

Forgetting to import the decorator.

The @Get() decorator defines a GET route handler in NestJS.

2fill in blank

medium

Complete the code to create a POST route handler in a NestJS controller.

NestJS

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

@Controller('items')
export class ItemsController {
  @[1]()
  create() {
    return 'This action adds a new item';
  }
}

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

APost

BGet

CPut

DDelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Get instead of @Post for creating data.

Not importing the correct decorator.

The @Post() decorator defines a POST route handler used to create new resources.

3fill in blank

hard

Fix the error in the code by choosing the correct decorator for updating an item.

NestJS

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

@Controller('items')
export class ItemsController {
  @[1](':id')
  update() {
    return 'This action updates an item';
  }
}

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

APost

BPut

CGet

DDelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Post instead of @Put for updates.

Using @Get for update operations.

The @Put() decorator is used for updating existing resources in NestJS.

4fill in blank

hard

Fill both blanks to create a DELETE route handler that deletes an item by id.

NestJS

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

@Controller('items')
export class ItemsController {
  @[2](':id')
  remove() {
    return 'This action removes an item';
  }
}

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

ADelete

BGet

CPost

DPut

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Post or @Put instead of @Delete for removal.

Importing the wrong decorator.

The @Delete() decorator is used to handle HTTP DELETE requests to remove resources.

5fill in blank

hard

Fill all three blanks to create a NestJS controller with GET, POST, and DELETE route handlers.

NestJS

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

@Controller('products')
export class ProductsController {
  @Get()
  findAll() {
    return 'Return all products';
  }

  @Post()
  create() {
    return 'Create a product';
  }

  @Delete(':id')
  remove() {
    return 'Delete a product';
  }
}

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

AGet

BPost

CDelete

DPut

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import one or more decorators.

Importing decorators not used in the controller.

Import all needed decorators: @Get(), @Post(), and @Delete() for the respective route handlers.

Practice

1. Which decorator is used in NestJS to create a route handler that responds to HTTP GET requests?

easy

A. @Get

B. @Post

C. @Put

D. @Delete

Solution

1. Step 1: Understand HTTP methods and their decorators

   In NestJS, each HTTP method has a specific decorator: @Get for GET, @Post for POST, @Put for PUT, and @Delete for DELETE.

2. Step 2: Match the decorator to the GET method

   The decorator @Get is specifically designed to handle HTTP GET requests.

3. Final Answer:

   @Get -> Option A

4. Quick Check:

   GET method uses @Get decorator [OK]

Hint: GET requests use @Get decorator in NestJS [OK]

Common Mistakes:

• Confusing @Post or @Put with @Get
• Using @Delete for GET requests
• Not using any decorator

2. Which of the following is the correct syntax to define a POST route handler in a NestJS controller?

easy

A. @Post('/create') createItem() {}

B. Post('/create') createItem() {}

C. @post('/create') createItem() {}

D. @Put('/create') createItem() {}

Solution

1. Step 1: Check the decorator syntax

   Decorators in NestJS start with '@' and are case-sensitive. The correct decorator for POST is '@Post'.

2. Step 2: Verify the route path and method name

   The route path '/create' is correctly passed as a string argument, and the method name is valid.

3. Final Answer:

   @Post('/create') createItem() {} -> Option A

4. Quick Check:

   Correct decorator syntax uses '@Post' with parentheses [OK]

Hint: Decorators start with '@' and are case-sensitive [OK]

Common Mistakes:

• Missing '@' before decorator
• Using lowercase '@post' instead of '@Post'
• Using wrong decorator like '@Put' for POST

3. Given the following NestJS controller code, what will be the HTTP method and route path to access the handler?

@Controller('users')
export class UserController {
  @Put(':id')
  updateUser() {
    return 'User updated';
  }
}

medium

A. GET /users/:id

B. DELETE /users/:id

C. PUT /users/:id

D. POST /users/:id

Solution

1. Step 1: Identify the controller base path

   The @Controller('users') decorator sets the base route path to '/users'.

2. Step 2: Identify the route handler method and path

   The @Put(':id') decorator means this handler responds to HTTP PUT requests at the path '/users/:id', where ':id' is a route parameter.

3. Final Answer:

   PUT /users/:id -> Option C

4. Quick Check:

   @Put with ':id' means PUT method at /users/:id [OK]

Hint: Decorator @Put means HTTP PUT method [OK]

Common Mistakes:

• Confusing @Put with @Get or @Post
• Ignoring the controller base path
• Misreading ':id' as a literal string

4. What is wrong with this NestJS route handler code?

@Controller('items')
export class ItemController {
  @Delete('/remove')
  removeItem() {
    console.log('Item removed');
  }
}

medium

A. The method name must be 'deleteItem' for @Delete decorator

B. The decorator @Delete cannot have a path argument

C. The controller path 'items' is invalid

D. The method should return a value, not just console.log

Solution

1. Step 1: Check the decorator and path usage

   @Delete can have a path argument like '/remove', so this is valid.

2. Step 2: Check the method implementation

   The method only logs to console but does not return any response. HTTP handlers should return a response to the client.

3. Final Answer:

   The method should return a value, not just console.log -> Option D

4. Quick Check:

   Route handlers must return a response [OK]

Hint: Route handlers must return a response, not just log [OK]

Common Mistakes:

• Assuming console.log sends response
• Thinking decorator cannot have path
• Believing method name must match decorator

5. You want to create a NestJS controller with a route handler that updates a product by its ID using HTTP PUT. The handler should accept the ID as a route parameter and the updated data in the request body. Which code snippet correctly implements this?

hard

A. @Put updateProduct(@Param('id') id: string, @Body() data: any) { return `Updated product ${id}`; }

B. @Put(':id') updateProduct(@Param('id') id: string, @Body() data: any) { return `Updated product ${id}`; }

C. @Put(':id') updateProduct(id: string, data: any) { return `Updated product ${id}`; }

D. @Post(':id') updateProduct(@Param('id') id: string, @Body() data: any) { return `Updated product ${id}`; }

Solution

1. Step 1: Use the correct HTTP method and route parameter

   Updating a resource uses HTTP PUT, so @Put(':id') is correct to capture the ID as a route parameter.

2. Step 2: Use parameter decorators to access route and body data

   @Param('id') extracts the ID from the route, and @Body() extracts the request body data. Both are required for this handler.

3. Step 3: Check method signature and return

   The method correctly returns a string confirming the update with the ID.

4. Final Answer:

   @Put(':id') updateProduct(@Param('id') id: string, @Body() data: any) { return `Updated product ${id}`; } -> Option B

5. Quick Check:

   Use @Put with ':id' and @Param plus @Body [OK]

Hint: Use @Put(':id') with @Param and @Body for updates [OK]

Common Mistakes:

• Missing route parameter in @Put decorator
• Not using @Param or @Body decorators
• Using wrong HTTP method like @Post for update