GET: parámetros query

Con el decorador @Query podemos recibir parámetros de consulta (Query Params) de una URL.

@Get('products')
getProducts(
  @Query('limit') limit = 100,
  @Query('offset') offset = 0,
  @Query('brand') brand: string,
) {
  return `products limit=> ${limit}`;
}

uff se siente muy cómodo utilizar nestjs por el orden que lleva, me está gustando bastante.

Otra forma de trabajar con los distintos params, aprofechando un poco lo que es ts:

interface: (fuera de la clase controller)

interface PaginateParams {
    limit?: number;
    offset?: number;
}

El EP:

@Get()
    getCategories(@Query() params: PaginateParams): string {
        const { limit = 20, offset = 0 } = params;
        return `categoríes paginated with limit(${limit}) and offset(${offset})`;
    }

Al menos a mi me parece más limpia, o al menos me queda más comoda a la vista

Una manera más sencilla de darle formato a nuestro código al momento de guardar algún cambio, es colocar lo siguiente en nuestro archivo settings.json de vscode:

"[typescript]": {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Oficialmente amo Nest ❤️

Igual que en el @Param podemos usar Pipes.

@Get('products')
  getProducts(
    @Query(
      'limit',
      new ParseIntPipe({ errorHttpStatusCode: HttpStatus.NOT_ACCEPTABLE }),
    )
    limit = 100,
    @Query(
      'offset',
      new ParseIntPipe({ errorHttpStatusCode: HttpStatus.NOT_ACCEPTABLE }),
    )
    offset = 0,
    @Query('brand') brand: string,
  ) {
    return `Product: Brand->${brand} Limit->${limit}. Offset ->${offset}`;
  }

Parámetros tipo Query

Los parámetros tipo query o Query Params son una serie de clave-valor que se agregan al final de la URL, justo después del signo de interrogación (?).

https://myapi.com/customers?name=oscar

Algunos de los usos que le podemos dar a los query params pueden ser, para limitar la cantidad de registros que vamos a traer, realizar algún filtro, o para la paginación de nuestra respuesta, entre otros

Con el decorador @Query podemos recibir parámetros de consulta (Query Params) de una URL.

@Get('products')
getProducts(
  @Query('limit') limit = 100,
  @Query('offset') offset = 0,
  @Query('brand') brand: string,
) {
  return `products limit=> ${limit}`;
}

• En caso que dentro de la URL no se encuentre el valor, se tomara el valor que asignamos en nuestro controller
• Si no asignamos un valor inicial nos mostrara undefined
• También podemos realizar la desestructuración para acceder a los valores.

@Get('products')
	getProduct(@Query() params: any){
		const { limit, offset } = params;
		return `product ${limit} ofset ${offset}}`
	}

En síntesis, se podría decir a modo comparativo que la diferencia entre el decorator @Param y @Query, es la clásica diferencia entre “rutas amigables” Friendly y rutas “no amigables” No Friendly. Muy buena explicación. Saludos Profe! 😃

Utilizando el decorador Query de la siguiente manera:

@Get('products')
  getProducts(@Query() params: any) {
    const { limit, offset } = params;
    return `products: limit=> ${limit} offset=> ${offset}`;
  }

Tendríamos como salida lo siguiente:

Los parámetros pueden cambiar, sin embargo, si no pasamos parámetros, se vería de la siguiente manera:

Tenemos undefined

Ojo Los Query params a peasr de tiparlos como “number” van a recibirse como strings.

  @Get('products')
  getProducts(
    @Query('limit') limit: number,
    @Query('offset') offset: number,
    @Query('brand') brand: string,
  ) {
    typeof limit
    return `products limit=> ${typeof limit} offset=> ${typeof offset} brand=> ${brand}`;
  }

El choque de rutas que sucede en esta clase, se debe a que cuando se hace un request a la ruta “/products/filter” under the hood el programa buscara en order una por una de las rutas buscando la primera que haga match con el request.

por lo tanto entraria buscando y cuando encuentra las rutas de /products/ si la ruta /products/:productId esta primero la tomaria de una vez sin necesidad de revisar las otras.

Lo mismo sucede en orden inverso con la ruta /products/filter/ y por eso este resultado

Otra forma de asignar valores por defecto seria la siguiente:

  @Get('products')
  getProducts(
    @Query('limit', new DefaultValuePipe(100)) limit: number,
    @Query('offset', new DefaultValuePipe(0)) offset: number,
    @Query('brand') brand: string,
  ) {
    return `products limit=> ${limit}`;
  }

Aquí utilizamos pipes para asignar valores por defecto simplemente agregamos el pipe DefaultValuePipe como segundo parametro de nuestro @Query decorador.

La documentación de Nest detalla mas sobre esto: https://docs.nestjs.com/pipes#providing-defaults

Genial!

aqui el link directo a la documentaciòn del decorador @param
https://docs.nestjs.com/custom-decorators#param-decorators

En VS para formatear el código se puede con Shift + Alt + F

Creo que así es un poco más prolijo

interface ProductsFindAllQueryParams {
  limit: number;
  offset: number;
}

@Get('/products')
  findAll(
    @Query() { limit = 100, offset = 0 }: ProductsFindAllQueryParams,
  ): string {
    return `Products Limit=>${limit} OffSet=>${offset}`;
  }

Creo que me estoy enamorando de NestJS y la facilidad de implementar cosas 🥰

Les dejo una anotación del tip que me pareció importante.

Datazo lo del choque de rutas

Excelente maestro, ojala mas curso de este gran instructor 🥴

Excelente, gracias por el consejo del orden de declaracion de rutas estaticas y dinamicas similares.

Me gusta mucho este curso. No sabía lo de colocar las rutas estáticas antes para evitar esos choques. Genial todo ❤️

Se ve tan limpio NestJS, se está poniendo interesante el curso, y el profesor lo explica tan bien.

Buen tip el de la ruta…

NestJS tiene mucho potencial, la forma esta pensada para que nos centremos en la lógica de negocio. Me interesaría saber más al respecto del manejo de microservicios y el manejo de websockets