Query parameters in NestJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this NestJS controller method when called with ?page=3&limit=10?

Consider the following NestJS controller method that reads query parameters:

  @Get('items')
  getItems(@Query('page') page: string, @Query('limit') limit: string) {
    return `Page: ${page}, Limit: ${limit}`;
  }

What will be the response body when a client requests /items?page=3&limit=10?

NestJS

  @Get('items')
  getItems(@Query('page') page: string, @Query('limit') limit: string) {
    return `Page: ${page}, Limit: ${limit}`;
  }

A "Page: 3, Limit: 10"

B "Page: 0, Limit: 0"

C "Page: undefined, Limit: undefined"

D "Page: null, Limit: null"

💡 Hint

Query parameters are passed as strings from the URL and injected by NestJS into the method parameters.

The @Query('param') decorator extracts the query parameter as a string. Since the URL has page=3 and limit=10, these values are passed as strings to the method, resulting in the returned string showing those values.

📝 Syntax

intermediate

Which option correctly extracts all query parameters as an object in NestJS?

In NestJS, you want to get all query parameters as a single object inside a controller method. Which code snippet correctly does this?

A getData(@Query: any query) { return query; }

B getData(@Query('query') query: any) { return query; }

C getData(@Query({}) query) { return query; }

D getData(@Query() query: any) { return query; }

💡 Hint

Use @Query() without parameters to get all query params as an object.

The @Query() decorator without arguments injects all query parameters as an object. Option D correctly uses this syntax. Option D tries to get a parameter named 'query' which is incorrect. Option D and D are invalid syntax.

❓ state_output

advanced

What is the value of 'page' after this controller method runs with URL ?page=5?

Given this NestJS controller method:

  @Get('search')
  search(@Query('page') page: number = 1) {
    return page;
  }

What will be the returned value if the client calls /search?page=5?

NestJS

  @Get('search')
  search(@Query('page') page: number = 1) {
    return page;
  }

A NaN

B "5"

C 1

D 5

💡 Hint

Query parameters are strings by default. TypeScript types do not convert them automatically.

The @Query('page') page: number = 1 declares page as a number in TypeScript, but NestJS injects the query parameter as a string ('5'). TypeScript types do not affect runtime behavior or perform automatic conversion. Thus, page is the string "5", and it is returned as such.

🔧 Debug

advanced

Which option causes a runtime error when accessing query parameters?

Consider these NestJS controller methods. Which one will cause a runtime error when called with /data?filter=active?

A getData(@Query('filter') filter: string) { return filter.toUpperCase(); }

B getData(@Query('filter') filter: string) { return filter.length; }

C getData(@Query('filter') filter: string) { return filter.toFixed(2); }

D getData(@Query('filter') filter: string) { return filter.trim(); }

💡 Hint

Check which string method does not exist or is invalid.

Options A, B, and D call valid string methods. Option C calls toFixed, which is a method for numbers, not strings. Since filter is a string, calling toFixed causes a runtime error.

🧠 Conceptual

expert

How does NestJS handle missing query parameters with default values in method signatures?

Given this controller method:

  @Get('list')
  list(@Query('page') page: number = 1) {
    return page;
  }

If the client calls /list without any query parameters, what will be the returned value?

NestJS

  @Get('list')
  list(@Query('page') page: number = 1) {
    return page;
  }

A undefined

B 1

C null

D NaN

💡 Hint

Consider how NestJS injects query parameters and how default values in TypeScript work with decorators.

The default value = 1 in the method signature does not apply because NestJS injects undefined when the query parameter is missing. The decorator parameter overrides the default, so page is undefined. To have a default, you must handle it inside the method or use pipes.

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