Query parameters in NestJS - Mini Project: Build & Apply

Handling Query Parameters in NestJS

📖 Scenario: You are building a simple NestJS API that returns a list of books. You want to allow users to filter books by genre using query parameters.

🎯 Goal: Create a NestJS controller that reads a genre query parameter from the URL and returns only books matching that genre.

📋 What You'll Learn

Create a controller with a GET route /books

Use the @Query() decorator to read the genre query parameter

Filter the list of books by the genre parameter if it is provided

Return the filtered list of books as JSON

💡 Why This Matters

🌍 Real World

APIs often need to filter data based on user input in the URL. Query parameters let users specify filters without changing the route.

💼 Career

Backend developers use query parameters to build flexible APIs that serve filtered data, improving user experience and performance.

1

Set up the books data array

Create a variable called books that is an array of objects. Each object should have title and genre properties with these exact entries: { title: 'The Hobbit', genre: 'Fantasy' }, { title: '1984', genre: 'Dystopian' }, { title: 'The Catcher in the Rye', genre: 'Classic' }.

NestJS

# Create the books array with the given objects
# Your code here

Hint

Use const books = [ ... ] to create the array with the exact objects.

2

Create the controller and import decorators

Create a NestJS controller class called BooksController. Import Controller and Get from @nestjs/common. Add the @Controller('books') decorator above the class.

NestJS

const books = [
  { title: 'The Hobbit', genre: 'Fantasy' },
  { title: '1984', genre: 'Dystopian' },
  { title: 'The Catcher in the Rye', genre: 'Classic' }
];

// Import Controller and Get from @nestjs/common
// Create BooksController class with @Controller('books') decorator
# Your code here

Hint

Use @Controller('books') above the class and import the decorators from @nestjs/common.

3

Add a GET method with query parameter

Inside BooksController, add a method called getBooks with the @Get() decorator. Use the @Query('genre') decorator to get the genre query parameter as a string argument. Filter the books array to only include books where book.genre === genre if genre is provided. Return the filtered array or all books if no genre is given.

NestJS

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

const books = [
  { title: 'The Hobbit', genre: 'Fantasy' },
  { title: '1984', genre: 'Dystopian' },
  { title: 'The Catcher in the Rye', genre: 'Classic' }
];

@Controller('books')
export class BooksController {
  // Add getBooks method with @Get() decorator
  // Use @Query('genre') to get genre parameter
  // Filter books by genre if provided
  // Return filtered or all books
  # Your code here
}

Hint

Import @Query and use it to read the genre query parameter. Use filter to select matching books.

4

Export the controller and finalize

Make sure the BooksController class is exported with export class BooksController. This completes the controller setup to handle query parameters.

NestJS

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

const books = [
  { title: 'The Hobbit', genre: 'Fantasy' },
  { title: '1984', genre: 'Dystopian' },
  { title: 'The Catcher in the Rye', genre: 'Classic' }
];

@Controller('books')
// Ensure BooksController is exported
# Your code here

Hint

Use export class BooksController to make the controller available to the app.

Practice

1. What is the purpose of using @Query() decorator in a NestJS controller?

easy

A. To inject a service into the controller

B. To define a new route path

C. To handle POST request bodies

D. To access query parameters sent in the URL

Solution

1. Step 1: Understand the role of @Query()

   The @Query() decorator extracts query parameters from the URL in a GET request.

2. Step 2: Compare with other decorators

   Other decorators like @Body() handle POST bodies, and @Param() handles route params, so they don't fit here.

3. Final Answer:

   To access query parameters sent in the URL -> Option D

4. Quick Check:

   @Query() reads URL queries = A [OK]

Hint: Remember: @Query() reads URL query strings [OK]

Common Mistakes:

• Confusing @Query() with @Body()
• Thinking @Query() defines routes
• Using @Query() to inject services

2. Which of the following is the correct syntax to get a query parameter named page in a NestJS controller method?

easy

A. async getItems(@Param('page') page: number) {}

B. async getItems(@Body('page') page: number) {}

C. async getItems(@Query('page') page: number) {}

D. async getItems(@Query.page page: number) {}

Solution

1. Step 1: Identify correct decorator usage

   To get a specific query parameter, use @Query('paramName') syntax.

2. Step 2: Check syntax correctness

   async getItems(@Query('page') page: number) {} uses @Query('page') correctly. Options A and C use wrong decorators, and D has invalid syntax.

3. Final Answer:

   async getItems(@Query('page') page: number) {} -> Option C

4. Quick Check:

   Use @Query('param') for query params = B [OK]

Hint: Use @Query('name') to get specific query param [OK]

Common Mistakes:

• Using @Param() instead of @Query()
• Trying to access query param as @Query.page
• Using @Body() for query parameters

3. Given this NestJS controller method:

async find(@Query() query) {
  return query.page + '-' + query.limit;
}

What will be the output if the URL is /items?page=2&limit=5?

medium

A. "2-5"

B. "page-limit"

C. "undefined-undefined"

D. Runtime error

Solution

1. Step 1: Understand @Query() behavior

   The @Query() decorator without arguments returns an object with all query parameters as strings.

2. Step 2: Check the returned string concatenation

   With URL ?page=2&limit=5, query.page is "2" and query.limit is "5". Concatenation returns "2-5".

3. Final Answer:

   "2-5" -> Option A

4. Quick Check:

   Query object has keys = "2-5" [OK]

Hint: Without param name, @Query() gets all query params as object [OK]

Common Mistakes:

• Expecting numbers instead of strings from query params
• Assuming @Query() returns undefined
• Thinking it causes runtime error

4. What is wrong with this NestJS controller method to get a query parameter search?:

async search(@Query(search) searchTerm: string) {
  return searchTerm;
}

medium

A. The method must be synchronous, not async

B. The @Query decorator argument should be a string: @Query('search')

C. The parameter name cannot be searchTerm

D. The method should use @Param('search') instead

Solution

1. Step 1: Check @Query decorator syntax

   The argument to @Query() must be a string literal naming the query parameter, e.g., @Query('search').

2. Step 2: Identify the error in the code

   The code uses @Query(search) without quotes, which is invalid syntax and causes an error.

3. Final Answer:

   The @Query decorator argument should be a string: @Query('search') -> Option B

4. Quick Check:

   Decorator argument must be string literal = D [OK]

Hint: Always quote query param name in @Query('name') [OK]

Common Mistakes:

• Forgetting quotes around query param name
• Using @Param() for query params
• Thinking async keyword is disallowed

5. You want to create a NestJS GET endpoint that accepts optional query parameters sort and filter. If filter is missing, it should default to "all". Which code snippet correctly implements this behavior?

hard

A. async getItems(@Query() query) {
const filter = query.filter || 'all';
return { sort: query.sort, filter };
}

B. async getItems(@Query('sort') sort: string, @Query('filter') filter: string = 'all') {}

C. async getItems(@Query('sort') sort: string, @Query('filter') filter?: string) {
if (!filter) filter = 'all';
return { sort, filter };
}

D. async getItems(@Query('sort') sort: string, @Query('filter') filter: string) {
filter = filter ?? 'all';
return { sort, filter };
}

Solution

1. Step 1: Understand default value handling for query params

   Query parameters come as strings or undefined. Default values should be set inside the method, not in parameter defaults.

2. Step 2: Analyze each option

   async getItems(@Query('sort') sort: string, @Query('filter') filter: string = 'all') {} tries to set default in parameter, which doesn't work well with @Query(). async getItems(@Query() query) { const filter = query.filter || 'all'; return { sort: query.sort, filter }; } extracts all query params and sets default for filter inside method correctly. async getItems(@Query('sort') sort: string, @Query('filter') filter?: string) { if (!filter) filter = 'all'; return { sort, filter }; } tries to assign to parameter which is readonly. async getItems(@Query('sort') sort: string, @Query('filter') filter: string) { filter = filter ?? 'all'; return { sort, filter }; } assigns default after parameter, but parameter is readonly, so it causes error.

3. Final Answer:

   async getItems(@Query() query) { const filter = query.filter || 'all'; return { sort: query.sort, filter }; } -> Option A

4. Quick Check:

   Set defaults inside method body = A [OK]

Hint: Set default query values inside method, not in parameters [OK]

Common Mistakes:

• Trying to assign default values in parameter list with @Query()
• Mutating readonly parameters
• Not handling missing query params properly