Fue publicado / actualizado en 10/11/2021 Disponible online en https://desarrolloweb.com/articulos/metodos-http-nestjs
Recibir datos de Query String en controladores de Nest
Veremos qué es el Query String y cómo componer rutas de la aplicación que son capaces de recibir datos en la URL (cualquier conjunto clave / valor). Explicaremos cómo recibir los datos en el controlador con el decorador @Query.
Los controladores son capaces de recibir distintas informaciones de las solicitudes que realizan los clientes. En el Manual de Nest hemos aprendido a recibir datos como parámetros en la ruta (URL) y mediante el body de la solicitud, pero hay todavía otras posibilidades por explorar.
Una de las maneras más básicas y utilizadas para recibir datos en una ruta es la denominada "query string", que básicamente consiste en enviar cualquier conjunto de datos en la URL, para que puedan ser procesados por las aplicaciones.
Qué es Query String
Query String es la típica forma con la que se envían datos en solicitudes de tipo Get, usando la misma cadena de la URL. Mediante este mecanismo podemos enviar cualquier juego de datos clave / valor, expresado en la dirección del recurso al que se accede.
Las URL que envían datos por Query String tienen esta forma:
http://example.com?dato1=valor1&dato2=valor2
En la anterior URL estaríamos mandando dos datos:
dato1 con el valor "valor1"
dato2 con el valor "valor2"
Enviar datos en la URL no se considera algo muy elegante, porque los datos aparecen en la misma dirección y quedan muy a la vista del usuario. Incluso podría pasar que el usuario
http://desarrolloweb.com/manuales/manual-nestjs Página 36 de 112
manipule manualmente esos datos, pudiendo afectar al funcionamiento de las aplicaciones. Sin embargo tiene algunas ventajas importantes, como por ejemplo que se pueden crear enlaces profundos capaces de enviar datos desde el cliente al servidor. Esos enlaces profundos los podrías distribuir de diversos modos, por ejemplo en un email. Además se pueden guardar URLs complejas en favoritos que envían datos al servidor.
De hecho, las ventajas de usar Query String son las que hacen que servicios como Google usen ese mecanismo cuando hacemos una búsqueda con el buscador. Podemos hacer por ejemplo una búsqueda, copiar la URL y pasarla a un email o mensaje de Whatsapp, por ejemplo.
Cómo se reciben los datos del query string en los controladores Nest
Recibir los datos del query string es muy sencillo y, como podrías imaginar, se realiza mediante un decorador, en este caso @Query().
Básicamente declaramos un parámetro en el método del controlador que decoramos con
Por supuesto, no debemos olvidarnos de importar los decoradores que usamos:
import { Controller, Get, Query } from '@nestjs/common';
Esto permitirá recibir un objeto en el parámetro "query" que tendrá todos los datos que se están enviando en la URL.
Por tanto, si nosotros componemos una URL como esta:
http://localhost:3000/query?x=24&y=xxx
El valor que se inyectará en el parámetro query será este objeto:
{ "x": "24", "y": "xxx"
http://desarrolloweb.com/manuales/manual-nestjs Página 37 de 112
}
Dado que el parámetro query es un objeto, podemos perfectamente acceder a sus propiedades de manera precisa:
return `El dato query.x ha recibido el valor ${query.x}`;
Por supuesto, query es el nombre de un parámetro, podríamos ponerle cualquier nombre
que deseemos. Obviamente, el decorador @Query() decora cualquier parámetro donde quieras recibir los datos del query string.
Cómo recibir una variable en concreto por Query String
A veces no necesitamos recibir todas las variables posibles del Query String y requerimos solamente un dato. En el decorador @Query() podemos simplemente indicar qué variable del Query String se desea recibir y Nest nos la entregará, en vez de entregarnos todo el objeto completo con todos los posibles datos enviados.
Vamos a suponer que necesitamos recibir una variable llamada "count", con una URL que tendría esta forma:
http://localhost:3000/cars?count=3
Al declarar el método del controlador podemos recibir ese dato de manera única, indicándolo en el decorador @Query() como parámetro. Sería más o menos así:
Ahora, el valor que nos llegará al parámetro "carCount" sería el enviado en la URL. Solo el dato, si es que existe.
Debes tener cuidado porque, si no se manda en la URL el dato "count", dado que hemos tipado el dato como "number", nos entregará NaN (Not a Number). Si no hubiésemos tipado carCount nos entregaría una cadena vacía.
http://desarrolloweb.com/manuales/manual-nestjs Página 38 de 112
Cómo validar un dato que llega en Query String en un método del controlador
Puede que el dato que estamos recibiendo sea esencial para el funcionamiento de la aplicación. Validar estos datos es muy sencillo en Nest gracias al uso de pipes.
Imaginemos que en la ruta anterior (cars?count=3) sea fundamental recibir la variable count y asegurarse de que es un entero. Si no lo es, entonces no queremos ejecutar nada en esa ruta, sino mandar un mensaje de error al cliente.
En este caso podemos hacer uso del pipe "ParseIntPipe" que nos proporciona el framework, que hace justamente la función de validar el dato y convertirlo al tipo number dentro del método.
No hemos visto pipes todavía y es algo importante que vamos a abordar en el manual de Nest, así que si tienes cualquier duda puedes consultar capítulos siguientes donde los veremos con detalle. De momento tenemos aquí una sencilla muestra de uso de unos pipes.
El pipe lo tendrás que importar de @nestjs/common:
import { ParseIntPipe } from '@nestjs/common';
Ahora, si no nos pasan el dato "count" mediante el query string, o nos pasan un valor que no sea específicamente un numérico entero, la aplicación lanzará un mensaje de error automáticamente y no se ejecutará el método del controlador.
De momento es todo lo que necesitas saber sobre cómo recibir datos enviados por la URL, mediante query string. Como puedes ver, no es muy complicado de realizar en los controladores y hasta cierto punto es muy similar a cómo recibíamos los datos de los
http://desarrolloweb.com/manuales/manual-nestjs Página 39 de 112
parámetros con @Param().
A lo largo del manual de NestJS hemos dado un buen repaso a muchas de las cosas que podemos hacer con controladores en Nest. Son una de las piezas más importantes de toda aplicación con este framework, por lo que volveremos repetidas veces a ellos, pero en los siguientes artículos vamos a cambiar de tercio, para comenzar a hablar de los servicios.
Este artículo es obra de Miguel Angel Alvarez
Fue publicado / actualizado en 22/11/2021 Disponible online en https://desarrolloweb.com/articulos/recibir-datos-query-string- nest
http://desarrolloweb.com/manuales/manual-nestjs Página 40 de 112
