Route → Query → Mapper → UI

Keď komponent číta surové polia API priamo, vaše UI vlastní backend. Premenujete jedno pole a rozbije sa niekoľko komponentov; horšie je, že sa postupne plnia obranným kódom:

<h3>{cat?.name ?? cat?.title ?? cat?.categoryName ?? ""}</h3>

V e-shope Aments som namiesto toho zaviedol pravidlo: UI komponenty čítajú výhradne stabilné kľúče. Umožňujú to štyri vrstvy.

1. Mapper - jediné miesto, ktoré pozná API

src/mappers/popular-category.mapper.js

const PopularCategoryDefaults = {
  id: null, name: "", image: "", items: "(0 Items)", href: "/products",
};
 
export function mapPopularCategory(raw = {}) {
  return {
    ...PopularCategoryDefaults,
    id: raw?.id ?? PopularCategoryDefaults.id,
    name: raw?.name ?? PopularCategoryDefaults.name,
    image: raw?.image ?? PopularCategoryDefaults.image,
    items: `(${Number(raw?.orderCount ?? 0) || 0} Items)`,
    href: raw?.id != null
      ? `/products?categoryId=${encodeURIComponent(String(raw.id))}`
      : PopularCategoryDefaults.href,
  };
}

Predvolené hodnoty sú v jednom objekte. Odvodené hodnoty - text s počtom položiek, odkaz - sa počítajú tu, nie v JSX.

2. Query - jedna funkcia na endpoint

src/queries/popularCategories.query.js

export async function getPopularCategories({ lang } = {}) {
  const res = await ApiService.get(STATISTICS_CATEGORY_POPULAR_ROUTE, { params: { lang } });
  const list = Array.isArray(res?.data?.data) ? res.data.data : [];
  return list.map(mapPopularCategory).filter((x) => x?.id != null && x?.name);
}

Query odstráni opakovaný kód „požiadavka → extrakcia → mapovanie“ a vyradí neplatné položky skôr, než sa dostanú na stránku.

3. Route - skladanie na serveri

src/app/(main)/page.jsx

export default async function Page() {
  const lang = await getServerLang();
 
  let popularCategories = [];
  try {
    popularCategories = await getPopularCategories({ lang });
  } catch {
    popularCategories = [];
  }
 
  return <HomePage popularCategories={popularCategories} />;
}

Nefunkčný endpoint vráti prázdny zoznam. Sekcia zmizne, ale stránka sa aj tak vykreslí.

4. UI - čítať len stabilné kľúče

Komponenty dostanú name, image, items a href. Žiadne reťaze optional chainingu, žiadne záložné hodnoty, žiadna znalosť backendu.

Prečo to funguje

Ide o antikorupčnú vrstvu z domain-driven designu, aplikovanú na frontend. Externý model (API) sa na hranici preloží do vášho vlastného modelu, takže zmena backendu je zmena jedného súboru.