Filtra y ordena datos con la API de Supabase

Resumen

Consumir la API de Supabase desde el frontend se reduce a entender un patrón claro: eliges la tabla, seleccionas las columnas, aplicas filtros y ordenas los resultados. Con eso puedes armar casi cualquier pantalla de lectura de datos en tu aplicación, sin escribir SQL manual ni montar un backend desde cero.

¿Cómo ordenar resultados con order en Supabase?

Cuando filtras posts por cantidad de likes, la respuesta llega desordenada por defecto. Por ejemplo, al pedir los posts con más de 30 likes, Supabase devuelve cinco resultados, pero el primero tiene 31, el segundo 42 y el tercero vuelve a 32. Si quieres un ranking, necesitas ordenarlos.

Agregas el parámetro order=likes.asc y la respuesta llega de menor a mayor: 31, 32, 32, 42 y 44. Si prefieres mostrar primero el más popular, cambias a order=likes.desc y obtienes 44, 42, 35, 32 y 31.

¿Qué hace order en una consulta de Supabase? Ordena los resultados por la columna que elijas, en formato ascendente (asc) o descendente (desc). Es el equivalente directo del ORDER BY de SQL, pero expuesto vía HTTP.

Este pequeño cambio te permite construir un feed ordenado por popularidad o por fecha sin tocar la lógica del frontend.

¿Cómo filtrar posts por usuario en Supabase?

En una app tipo red social, mostrar el perfil de un usuario implica traer solo sus publicaciones. En lugar de pedir todos los posts y filtrar después en el cliente, le pasas el filtro a la API directamente.

La consulta usa user_id=eq. seguida del ID del usuario. Supabase devuelve únicamente los posts de ese perfil, en este caso cuatro publicaciones que coinciden con el ID enviado [02:13]. Esa misma llamada puede vivir detrás de la página de perfil sin lógica adicional.

La ventaja es directa: el filtrado ocurre en la base de datos, no en el navegador del usuario. Menos datos viajan por la red, menos trabajo hace el frontend.

¿Cuándo conviene filtrar desde la API y no desde el frontend?

Siempre que puedas. Filtrar en el servidor reduce el tamaño de la respuesta, baja el tiempo de carga y evita exponer información que el usuario no debería ver. El frontend recibe exactamente lo que necesita pintar.

¿Cómo seleccionar columnas específicas en la API de Supabase?

Por defecto, una consulta trae todas las columnas de la tabla. Pero si tu pantalla solo necesita la imagen y el conteo de likes, traer toda la fila es desperdicio.

Con el parámetro select defines qué campos quieres. Por ejemplo, pedir select=likes,image_url devuelve únicamente esos dos campos. Si después necesitas agrupar por usuario, agregas user_id y la respuesta se actualiza al instante.

Esto te permite preparar respuestas a la medida de cada vista:

  • Feed principal: image_url, likes, user_id.
  • Perfil del usuario: solo image_url y user_id.
  • Detalle del post: todas las columnas.

¿Para qué sirve select en Supabase? Sirve para pedir solo las columnas que tu pantalla necesita. Reduce el peso de la respuesta y mejora la velocidad percibida en el frontend.

¿Cuánto mejora el rendimiento al optimizar la consulta?

Aquí viene lo interesante. Usando httpie como cliente HTTP, puedes medir el peso y el tiempo de cada respuesta. Los números hablan solos.

Una consulta filtrada con solo image_url y user_id pesa 4 kilobytes y se ejecuta en 244 milisegundos [04:32]. La misma consulta sin filtros, trayendo todas las columnas, sube a 10 kilobytes y a 579 milisegundos. Más del doble de tiempo por datos que ni siquiera vas a mostrar.

En una aplicación con miles de usuarios, esa diferencia se acumula. La experiencia de usuario es lo que define si alguien vuelve a tu producto, y cada milisegundo cuenta.

¿Qué patrón debes recordar al consultar Supabase?

El flujo siempre es el mismo:

  1. Eliges la tabla (/posts, por ejemplo).
  2. Seleccionas las columnas con select.
  3. Aplicas filtros como eq, gt u otros operadores.
  4. Ordenas con order en formato asc o desc.

Con ese patrón puedes resolver lectura de feeds, perfiles, rankings y cualquier vista basada en datos. En las siguientes clases vas a conectar estas consultas con el proyecto real Platzigram para armar el feed completo, y después explorarás Storage, otra de las piezas fuertes de Supabase.

¿Qué pantalla de tu app vas a optimizar primero usando select y filtros del servidor? Cuéntalo en los comentarios.