Route → Query → Mapper → UI

Komponent xam API sahələrini birbaşa oxuyanda UI-nin sahibi backend olur. Bir sahənin adı dəyişir və bir neçə komponent sınır; daha pisi, komponentlər yavaş-yavaş müdafiə kodu ilə dolur:

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

Aments onlayn mağazasında bunun əvəzinə bir qayda tətbiq etdim: UI komponentləri yalnız sabit açarları oxuyur. Bunu dörd qat mümkün edir.

1. Mapper - API-ni bilən yeganə yer

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,
  };
}

Susmaya görə dəyərlər bir obyektdə saxlanılır. Hesablanan dəyərlər - element sayının mətni, link - JSX-də yox, burada hesablanır.

2. Query - hər endpoint üçün bir funksiya

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 təkrarlanan "sorğu → çıxar → map et" kodunu aradan qaldırır və yanlış elementləri səhifəyə çatmamış atır.

3. Route - serverdə birləşdirmək

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} />;
}

Uğursuz endpoint boş siyahı qaytarır. Bölmə görünmür, amma səhifə yenə də render olunur.

4. UI - yalnız sabit açarları oxumaq

Komponentlər name, image, items və href alır. Uzun optional chaining zəncirləri, ehtiyat dəyərlər və backend haqqında bilik yoxdur.

Niyə işləyir

Bu, domain-driven design-dakı anti-korrupsiya qatıdır, frontendə tətbiq edilib. Xarici model (API) sərhəddə sizin öz modelinizə çevrilir, ona görə backenddəki dəyişiklik yalnız bir faylın dəyişməsi deməkdir.