How to get or extract URL parameters from a GET request in Nestjs?

To get the URL parameter values or params from a GET request, we can use the @Param decorator function from the @nestjs/common module before the Controller method in Nestjs.

TL;DR

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

// DTO
interface SendDetailsDTO {
  name: string;
  designation: string;
}

// the @Controller() decorator function will instruct Nestjs
// to add a route of `/greet`
@Controller("greet")
export class GreetController {
  // 1. The @Get() decorator function creates
  // an endpoint with URL parameters
  // of /:name/:desingation with the /greet endpoint.
  // 2. And using the @Param() decorator function
  // to extract the `name` and `designation` URL parameters
  @Get(":name/:designation")
  sendDetails(@Param() params: SendDetailsDTO) {
    // send response
    return {
      name: params.name,
      designation: params.designation,
    };
  }
}

For example, let's say we have an endpoint that looks like this,

/greet/:name/:designation

As you can see, the URL endpoint has fields called name and designation, which are prefixed with the : symbol (colon). These are called URL parameters.

Now you may ask why do we need URL parameters in an endpoint? The answer to that is to provide dynamic values, which get assigned to each URL parameter respectively.

So if we requested the above endpoint where we replace the :name URL parameter with the value of john and :designation URL parameter with the value of admin like this,

/greet/john/admin

In the server or the backend service, we will have a variable called name where the value is john and for the variable designation, we will have the value of admin assigned. The only static part in the above endpoint is the /greet part. This is the general working of URL parameters in an endpoint. Cool Right! 🔥

Now let's discuss this in the context of Nestjs 😃.

First, we need to make the /greet endpoint, for that we can make a class called GreetController and use the @Controller decorator and pass the greet string as its argument.

It can be done like this,

import { Controller } from "@nestjs/common";
// the @Controller() decorator function will instruct Nestjs
// to add a route of `/greet`
@Controller("greet")
export class GreetController {}

This creates an endpoint called '/greet'.

Now let's make a method called sendDetails() that should be called on a GET request to the /greet/:name/:designation endpoint. For that we need to use the @Get decorator function above the sendDetails() method and pass the ':name/:designation' string as its argument.

It can be done like this,

import { Controller, Get } from "@nestjs/common";
// the @Controller() decorator function will instruct Nestjs
// to add a route of `/greet`
@Controller("greet")
export class GreetController {
  // The will create an endpoint with URL parameters
  // of /:name/:desingation with the /greet endpoint
  @Get(":name/:designation")
  sendDetails() {
    // cool code here!
  }
}

This will create an endpoint of /greet/:name/:designation. To extract the values from the :name and the :designation URL parameters, we have to use the @Param decorator function inside the parameters brackets with a parameter variable.

It can be done like this,

import { Controller, Get, Param } from "@nestjs/common";
// the @Controller() decorator function will instruct Nestjs
// to add a route of `/greet`
@Controller("greet")
export class GreetController {
  // 1. The @Get() decorator function creates
  // an endpoint with URL parameters
  // of /:name/:desingation with the /greet endpoint.
  // 2. And using the @Param() decorator function
  // to extract the `name` and `designation` URL parameters
  @Get(":name/:designation")
  sendDetails(@Param() params) {
    // cool code here!
  }
}

To add types to the params variable, let's use an interface called SendDetailsDTO which has the types for the name and designation URL parameters.

It can be done like this,

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

// DTO
interface SendDetailsDTO {
  name: string;
  designation: string;
}

// the @Controller() decorator function will instruct Nestjs
// to add a route of `/greet`
@Controller("greet")
export class GreetController {
  // 1. The @Get() decorator function creates
  // an endpoint with URL parameters
  // of /:name/:desingation with the /greet endpoint.
  // 2. And using the @Param() decorator function
  // to extract the `name` and `designation` URL parameters
  @Get(":name/:designation")
  sendDetails(@Param() params: SendDetailsDTO) {
    // cool code here!
  }
}

Finally, we can extract the name and designation values from the params variable and return them as an object from the sendDetails method which will then be used as the response to the /greet/:name/:designation API endpoint.

It can be done like this,

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

// DTO
interface SendDetailsDTO {
  name: string;
  designation: string;
}

// the @Controller() decorator function will instruct Nestjs
// to add a route of `/greet`
@Controller("greet")
export class GreetController {
  // 1. The @Get() decorator function creates
  // an endpoint with URL parameters
  // of /:name/:desingation with the /greet endpoint.
  // 2. And using the @Param() decorator function
  // to extract the `name` and `designation` URL parameters
  @Get(":name/:designation")
  sendDetails(@Param() params: SendDetailsDTO) {
    // send response
    return {
      name: params.name,
      designation: params.designation,
    };
  }
}

Now if we send a request of /greet/john/admin, we will get a response like this,

// response
{
  "name": "john",
  "designation": "admin"
}

We have successfully extracted the URL parameters from a GET request in Nestjs. Yay 🥳!

See the above code live in codesandbox.

You can also see the response by visiting this URL.

That's all 😃!

TL;DR

Feel free to share if you found this helpful 😃.