Consultas de API en Supabase: filtrar y ordenar

Construye confianza al consumir la API generada automáticamente por Supabase y prepara datos listos para el front end. Aquí verás cómo leer, filtrar y ordenar posts, seleccionar solo las columnas necesarias y medir el impacto en peso y tiempo de respuesta, sin memorizar recetas: solo entendiendo el patrón correcto.

¿Cómo consultar la API de Supabase con un patrón simple?

La idea clave es aplicar siempre el mismo flujo. Así reduces complejidad y aseguras respuestas útiles para la interfaz de usuario.

• Elegir la tabla: por ejemplo, posts.
• Seleccionar columnas: solo lo que la pantalla necesita.
• Aplicar filtros: por likes o por usuario.
• Ordenar resultados: ascendente o descendente.

Este patrón permite construir casi cualquier pantalla de lectura: desde el perfil del usuario hasta el feed principal, con datos limpios y listos.

¿Qué columnas seleccionar para cada pantalla?

Cuando una vista solo requiere imagen y contador de likes, selecciona esas columnas (por ejemplo: likes, image_url, user_id) y evita traer el resto. Así no hay datos repetidos ni sin uso.

Ejemplos de selección y filtros mínimos:

// Seleccionar solo lo necesario
.select('likes,image_url,user_id')

// Filtrar por usuario
.eq('user_id', '<ID_DEL_USUARIO>')

¿Cómo leer, filtrar y ordenar posts por likes y usuario?

Primero, es posible leer todos los posts. Luego, filtrar por condición, como likes mayores a 30. En el ejemplo, la consulta devolvió cinco posts, pero estaban desordenados por cantidad de likes.

¿Cómo ordenar por likes ascendente o descendente?

Ordena por la columna de likes según lo que necesites: ranking ascendente o descendente para destacar más o menos interacción.

// Ascendente: de menor a mayor
.order('likes', { ascending: true })

// Descendente: de mayor a menor
.order('likes', { ascending: false })

• Ascendente: devuelve 31, 32, 35, 42, 44.
• Descendente: devuelve 44, 42, 35, 32, 31.

Esto deja la respuesta lista para una interfaz que muestre el ranking de likes con claridad.

¿Cómo filtrar por usuario con user_id?

Si la vista es el perfil, filtra por el usuario específico usando su user_id. La respuesta incluye solo sus posts, ideal para mostrar en su página sin lógicas extra en el front end.

// Posts de un usuario
.eq('user_id', '<ID_DEL_USUARIO>')

• Útil para la página de perfil.
• Evita filtrar en el cliente o en otra consulta.
• Llega ya listo desde la HTTP request.

¿Cómo optimizar la respuesta para un front end más rápido?

Seleccionar menos columnas reduce el peso de la respuesta y mejora la percepción de velocidad. En la prueba, pedir solo image_url y user_id dio una respuesta de 4 KB en 244 ms. Pedir “toda la base” subió a 10 KB y 579 ms. Más del doble de tiempo para datos que no se usan.

• Selecciona campos precisos para cada pantalla.
• Evita traer columnas innecesarias.
• Ordena en el servidor y llega con el formato final.

¿Cómo medir peso y tiempo de la respuesta?

Herramientas como HTTPie muestran el tamaño de la respuesta y el tiempo de ejecución. Así puedes validar que tu selección de columnas y ordenamiento impacten en la experiencia real del usuario.

En adelante, cada consulta seguirá este patrón: elegir tabla, seleccionar columnas, filtrar y ordenar. Con esto podrás construir el feed y páginas como el perfil de usuario, y luego integrar storage cuando toque manejar archivos.

¿Quieres que veamos otra combinación de filtros u ordenamientos aplicada a tu pantalla actual? Comparte tu caso en los comentarios.