⬅️GET BACK

🧠 PART 2: Mappers — Taming the API Dumpster Fire

FIRST we create the damn types. Gotta identify those objects, what they have, and what they’ll return. This is your blueprint, your sanity layer, your line between order and chaos.


type HumanBeing = {
  name: string;
  lastName: string;
  age: number;
  gender: any; // because you never know
};
      

Aight, now that we’ve created our super-structured type... let’s say we’re receiving many human beings from some dusty-ass API. We’ll store them and map them to our little farm of digital BS:


type HumanBeingFarm = {
  items: HumanBeing[];
  pagination?: {
    page: number;
    totalPages: number;
  };
};
      

Now head over to your /mappers folder and make a humanBeings.ts file. That’s where the magic (and cleanup) goes down.


export const humanBeingMapper = (apiHuman: any): HumanBeingFarm => {
  const humans = apiHuman.items.map((item: any) => {
    return {
      name: item.name,
      lastName: item.lastName,
      age: item.age,
      gender: item.gender,
      // you get the idea , make it safe and clean
    };
  });

  return {
    items: humans,
    pagination: {
      page: apiHuman.page,
      totalPages: apiHuman.totalPages
    }
  };
};
      

Once that BS is handled, head to your service file. When you call the damn API:


const res = await getHumansFromAPI();
const mappedHumans = humanBeingMapper(res.data);
      

✅ MAP THAT RESPONSE.
🧹 Clean it. Sanitize it. Turn backend junk into frontend gold.

Then, yeet it into your store like humanResources.ts — and use it however the hell you want. It’s now *yours*. Own it.

TL;DR: Don’t trust the API. Use mappers. Always.