El frontend no tenía por qué leer f_title
Impacto
El frontend no ve f_title
En 2024 tuve la oportunidad de participar en el desarrollo inicial de un marketplace de anuncios. La web era nueva. Las APIs no. En el server parseamos el JSON con Zod para que el frontend leyera `title`, no `f_title`.
En 2024 tuve la oportunidad de participar en el desarrollo inicial de un marketplace de anuncios. La web era nueva. Las APIs no. El JSON llegaba con nombres que nadie iba a querer leer en un componente. Un dump se veía más o menos así:
{
"id": "4412",
"f_title": "Bicicleta de montaña",
"f_descr": "Poco uso",
"f_price": "12990.5",
"usdprice": 140,
"userid": "8821",
"f_contact": "Ana",
"categoryname": "Deportes"
}No era un lío de nombres. Era el contrato. Prefijos f_, nombres pegados (userid, categoryname), el precio a veces texto y a veces número. Si copiábamos eso al código de las pantallas, el listado iba a hablar así el resto del proyecto.
Si eso llega al frontend, ya es tu modelo
TypeScript no se queja si tipas any o copias un interface de lo que llegó. Al otro día ad.f_title ya está en tres pantallas. El día que ellos cambian f_title por title, no se rompe “la integración”. Se te queda un blank, y te enteras a la tarde por Slack.
No íbamos a reescribir esas APIs. Tampoco íbamos a heredarlas. Si el frontend se quedaba con el JSON crudo, cada pantalla nueva copiaba las mismas claves. El problema dejaba de ser de ellos. Pasaba a ser nuestro.
Lo cambiamos en el server, antes de la pantalla
En el server armamos schemas de Zod. El z.object listaba las claves feas. El transform devolvía lo que nosotros sí queríamos usar: title, description, price, user. El frontend importaba Ad. No f_title.
El schema no estaba pegado al fetch. Types en un package, HTTP en otro. Los dos del lado del server. El endpoint parseaba y devolvía el tipo interno. Si el listado no coincidía, .parse() tiraba. El frontend no recibía medio objeto.
Si la API sumaba una propiedad, no aparecía en Ad hasta que alguien la metía en el schema. Eso limpió las pantallas. No limpió todo.
Lo que igual se nos coló
Los filtros y el orden seguían hablando como el listado: f_price, f_added en la URL. El frontend leía title. La barra del navegador no. Dijimos “la API lo pide así” y el nombre feo se quedó ahí.
Si no cortas nada, es peor. Un hook pide el crudo “por si acaso”. Tres pantallas leen f_title. El blank no te apunta al JSON de afuera. Te apunta a un componente.
Cierre
El frontend no tenía por qué saber que existió f_title. Si hoy quieres los pasos, más estrictos que lo que hicimos ahí, están en La API del tercero no es tu modelo. Entonces no teníamos esa nota. Teníamos el schema en el server y las pantallas leyendo Ad.