Acceso con filtros a Bases de Datos (2)

Parámetros GET en Astro

Para leer parámetros de búsqueda en la URL (query parameters o parámetros GET como ?categoria=1 o ?search=laptop) desde Astro, debes acceder al objeto Astro.url.searchParams.

Ejemplo de cómo se ve una URL con parámetros GET en el servidor:

Parametros GET en URL

Para utilizar este enfoque, la página debe estar configurada para renderizado en el servidor (SSR) , ya que en la generación estática (SSG) no existen solicitudes de servidor dinámicas al momento de la petición.

Configuración previa (SSR)

Recordemos cómo se habilita el modo de salida en servidor dentro del archivo astro.config.mjs:

astro.config.mjs

Leer parámetros GET y consultar la Base de Datos

El parámetro GET se extrae en el Frontmatter (entre los tres guiones `---` de tu archivo .astro) y se pasa a la función SQL.

productos.astro

Analicemos productos.astro:

Estas dos líneas extraen el parámetro categoria de la URL en Astro:

  1. const { searchParams } = Astro.url;: Desestructura el objeto searchParams desde la URL de Astro. Este objeto contiene los parámetros de la URL actual (todo lo que va después de ?).
    No existe un límite oficial fijado en cuanto a la cantidad absoluta de parámetros GET. El factor limitante es la longitud total de la cadena de URL (incluyendo dominio, ruta y toda la query string ?param1=valor&m2=valor...). La recomendación práctica es de 2.048 caracteres para compatibilidad universal (SEO + cualquier stack).

  2. const categoriaQuery = searchParams.get('categoria');: Obtiene el valor del parámetro categoria. Por ejemplo, si la URL es /productos?categoria=4, categoriaQuery será "4" (string). Si el parámetro categoria no existe en la URL, se retorna null..

  3. La función getProductosPorCategoria(categoria) que estaría guardada en lib/productos.ts contendrá la función con el sql necesario para obtener los productos de la categoría que se ha leído desde el parametro GET.

  4. La variable productos, devuelta por la función getProductosPorCategoria(categoria) es un array de objetos que traerá las filas de la tabla productos que se corresponda con la categoría enviada como argumento a la misma. Cada objeto representa una fila de la tabla productos con las columnas como propiedades ({ id, nombre, precio, ... }).
    Si la categoría no tiene productos, se retornará [] (array vacío), no null. Asegúrate de que tu código maneje ese caso.


La función de consulta getProductosPorCategoria(categoria) en lib/productos.ts

Es indispensable utilizar consultas preparadas sql (Prepared Statements) para prevenir ataques de Inyección SQL cuando se reciben datos directamente de la URL. A continuación el fragmento que se corresponde con la función getProductosPorCategoria(categoria)

productos.ts

Importante: Nunca se debe concatenar el input del usuario en una consulta SQL, porque permitiría que un atacante incluya código SQL arbitrario (inyección SQL) como parámetro GET (o a través de cualquier entrada del usuario: POST, headers, cookies, uploads...) y acceda o destruya datos e incluso exponga el esquema de la base de datos (nombres de tablas y columnas).
Por ejemplo: ❌"WHERE fk_categoria = '" + categoria + "'".

En el Desarrollo WEB se usan siempre los Prepared Statements, los cuales usan marcadores de posición (`$1`, `?`, `:categoria`, etc.) que varían según la librería o cliente SQL que se utilice.


Cómo probar la URL

Usando una función getProductos() (sin filtrar)

http://localhost:4321/productos

Usando la función getProductosPorCategoria(categoria) (filtrando con el parámetro GET)

http://localhost:4321/productos?categoria=3