Query parameters in NestJS - Step-by-Step Execution

Concept Flow - Query parameters

Client sends HTTP GET request

↓

NestJS Controller receives request

↓

Extract query parameters using @Query()

↓

Use query parameters in handler logic

↓

Send response back to client

The flow shows how a NestJS controller extracts query parameters from an HTTP GET request and uses them in the handler.

Execution Sample

NestJS

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

@Controller('items')
export class ItemsController {
  @Get()
  findAll(@Query('search') search: string) {
    return `Searching for: ${search}`;
  }
}

This code defines a GET endpoint that reads the 'search' query parameter and returns a message including it.

Execution Table

Step	Action	Request URL	Query Extracted	Handler Output
1	Client sends GET request	/items?search=book	N/A	N/A
2	NestJS receives request	/items?search=book	search=book	N/A
3	Controller method called	/items?search=book	search=book	N/A
4	Return response	/items?search=book	search=book	Searching for: book
5	Response sent to client	/items?search=book	search=book	Searching for: book

💡 Request handled and response sent back to client with query parameter value.

Variable Tracker

Variable	Start	After Request
search	undefined	"book"

Key Moments - 2 Insights

Why do we use @Query('search') instead of just @Query()?

Using @Query('search') extracts only the 'search' parameter from the query string, as shown in execution_table step 3. Using @Query() alone would give all query parameters as an object.

What happens if the query parameter is missing?

If 'search' is missing, the variable 'search' will be undefined (see variable_tracker start value). The handler can check for this and handle it accordingly.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the value of the 'search' query parameter extracted?

A "items"

B "book"

C undefined

D "search"

💡 Hint

Check the 'Query Extracted' column at step 2 in the execution_table.

At which step does the controller method receive the query parameter value?

A Step 3

B Step 1

C Step 4

D Step 5

💡 Hint

Look at the 'Action' column to find when the controller method is called.

If the URL was /items without any query, what would be the value of 'search' in variable_tracker?

A "" (empty string)

B null

C undefined

D 0

💡 Hint

Refer to variable_tracker start value for 'search' when no query parameter is provided.

Concept Snapshot

NestJS Query Parameters:
- Use @Query('paramName') to get a single query parameter.
- The parameter is extracted from the URL after '?'.
- If missing, the value is undefined.
- Use in GET handlers to customize responses.
- Example: /items?search=book extracts 'book' as search.

Full Transcript

In NestJS, query parameters come from the URL after the question mark. The controller uses the @Query decorator to get these values. For example, @Query('search') gets the 'search' parameter. When a client sends a GET request like /items?search=book, NestJS extracts 'book' and passes it to the handler. If the parameter is missing, the value is undefined. The handler can then use this value to customize the response. This flow helps build flexible APIs that respond to client queries.

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