Aprende a enviar parámetros en las rutas de las aplicaciones desarrolladas con el framework NestJS y a recibirlos en los controladores. Veremos cómo recibir los parámetros en un objeto o desestructurados en variables sueltas.
En este punto del Manual de Nest ya tenemos alguna idea básica sobre cómo crear rutas de aplicación, o lo que se llaman endpoints en las aplicaciones basadas en API REST. A continuación vamos a abordar un nuevo y útil conocimiento en Nest: los parámetros en las rutas.
Las rutas en las aplicaciones web necesitan mecanismos para recibir parámetros, de modo que podamos enviarles datos que resultan útiles para los controladores. En este artículo te vamos a enseñar cómo realizar esta operativa común en las aplicaciones web, con el framework Nest.
Qué son los parámetros de las rutas
Como hemos dicho, los parámetros son datos que les pasamos a los controladores, que se indican en el texto de la ruta de un endpoint. Si ya sabes a lo que nos referimos puedes saltar este punto y ir directamente a cómo se implementa la recpción de los parámetros. Para quien nunca haya trabajado con este modelo de aplicaciones web vamos a dar un ejemplo.
Imagina que quieres hacer una ruta que te ofrezca los datos completos de un producto:
/products/18
Esa ruta te devolverá los datos del producto con identificador "18". Pero por supuesto querrás que, cambiando el número del final de la ruta, se puedan conseguir los datos del producto 100, o 27. Para ello tendrás otras rutas como estas:
/products/100
/products/27
Obviamente, no vas a querer definir una ruta independiente para cada producto que tengas en la base de datos, sino que querrás que todos los productos se resuelvan desde la misma ruta, es decir, un mismo método en el controlador de "products". Esto lo consigues simplemente creando un parámetro, que sería el segmento final de la URL, la parte del identificador numérico.
Crear una ruta que acepta parámetros
Siguiendo el modelo de URL que acabamos de explicar, en el controlador "ProductsController" vamos a crear un método para gestionar esa ruta con parámetros.
Para ello tenemos que especificar qué parámetros vamos a recibir en el decorador @Get y luego usar otro decorador @Params para que nos inyecten como parámetro del método el valor.
El código es el siguiente;
@Get(':id')
find( @Param() params) {
return `Estás consultando el producto ${params.id}`;
}
- Con @Get(':id') estamos indicando que esta ruta tendrá un parámetro llamado "id".
Recuerda que en el artículo anterior, en el que introducimos los controladores en Nest, el controlador que habíamos desarrollado y ahora estamos extendiendo, tenía declarada la ruta "products" en el decorador Controller(). Por tanto, no necesitamos volver a repetir "products" en el decorador de este endpoint @Get().
- En el método tenemos un nuevo decorador llamado @Params, el cual simplemente nos sirve para indicar que en el parámetro nos deben indicar los valores de todos los parámetros que esta ruta reciba. De momento es solo uno en este ejemplo, pero podrían ser varios.
- Dentro del cuerpo del método find() podemos acceder a los parámetros de la ruta como propiedades del objeto "params" que hemos recibido por parámetro del método. Por ejemplo,
params.id
accedemos al parámetro de la ruta "id".
Ahora podemos acceder a rutas como http://localhost:3000/products/55 y comprobaremos que nos indica el valor del parámetro enviado.
Recibir varios parámetros de la ruta
Ahora vamos a ver cómo se podrían crear rutas en los que recibo más de un parámetro. El mecanismo es muy parecido, solamente cambia el patrón de la ruta que vamos a recibir, que tiene que extenderse para colocar cualquier número de parámetros.
@Get(':id/:size')
findWithSize( @Param() params) {
return `En esta ruta obtenemos el producto ${params.id}, pero en su tamaño ${params.size}`;
}
Como puedes ver, ahora el patrón de la ruta, que enviamos en el decorador @Get consta de dos parámetros ":id/:size
".
Por tanto, a la hora de recibir los parámetros el objeto "params" contendrá todas esas propiedades.
Creo que no merece ni el comentario, pero "params" es solo el nombre de un parámetro. Podrías darle cualquier nombre como "p" o "parametros".
Las rutas que podemos acceder ahora tendrían este aspecto:
http://localhost:3000/products/11/small
http://localhost:3000/products/27/big
Supongo que no tiene ninguna dificultad, si es que hemos entendido el mecanismo de envío de parámetros de Nest.
Desestructuración de parámetros
Podemos si lo deseamos cambiar un poco el código de nuestros métodos para conseguir que los parámetros nos lleguen desestructurados: en variables sueltas, en lugar de en el objeto "params".
En este caso, vamos a pasarle el nombre del parámetro que queremos obtener desestructurado, en el decorador @Params. El código nos quedaría así:
@Get(':id')
find(@Param('id') id: number) {
return `Página del producto ${id}`;
}
- Como puedes ver, el decorador @Get queda igual.
- El decorador
@Params('id')
recibe el nombre del parámetro suelto que queremos recibir. - Luego el nombre del parámetro lo cambiamos por "id", ya que ahora no tendremos un objeto "params" sino un valor directamente. Además, podemos hacer un tipado del dato que estamos recibiendo, usando el sistema de declaración de tipos de TypeScript.
El método de la ruta de dos parámetros nos quedaría de la siguiente manera, haciendo la desestructuración de ambos parámetros enviados.
@Get(':id/:size')
findWithSize(@Param('id') id: number, @Param('size') size: string ) {
return `Página de detalle de producto ${id}, en tamaño ${size}`;
}
Conclusión sobre los parámetros en las rutas de controladores Nest
Hemos aprendido algo bastante importante y comúnmente utilizado como son los parámetros de las rutas de las aplicaciones. Hemos visto que podemos recibir cualquier número de parámetros, tanto en un objeto que los agrupa todos, como desestructurados en parámetros sueltos para cada valor.
Esperamos que te haya parecido un ejercicio sencillo. En el siguiente artículo seguiremos trabajando con controladores, pero dejaremos las rutas GET para comenzar a practicar con otros tipos de rutas, que envían datos del usuario por el cuerpo del HTTP, mediante POST.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...