FluentStack

Mapping API Responses

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 12: Forms, Validation, and Data FetchingAdvanced70 menitBahasa Indonesia

Mapping API Responses

Mengubah response API menjadi model UI yang kecil, typed, dan tidak membuat component bergantung pada detail transport data.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Membedakan API response dan model yang dibutuhkan component
  • Menulis mapper kecil di data boundary
  • Menormalisasi nama field serta format display sebelum render
  • Menghindari asumsi response API valid hanya karena TypeScript memberi type
TypeScriptAPI BoundaryData MappingServer State

Isi lesson

6 blok
  1. 1.
    Component tidak perlu mengenal semua detail response APIBelum selesaiWajib
  2. 2.
    Ubah response course menjadi card modelBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Jangan memakai as sebagai jalan pintas untuk response yang tidak diketahuiBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Component tidak perlu mengenal semua detail response API

Wajib

API sering menggunakan nama field, nesting, tanggal, atau nullable value yang tidak nyaman untuk UI. Bila detail itu disebarkan langsung ke banyak component, perubahan endpoint akan memaksa banyak render layer ikut berubah. Letakkan transformasi di boundary: response mentah masuk, model UI yang jelas keluar.

Mapper bukan tempat untuk menyembunyikan data yang rusak. Ia menyatakan keputusan UI, misalnya lesson_count menjadi lessonLabel atau updated_at menjadi updatedLabel. Validasi runtime tetap perlu saat data datang dari sumber yang tidak dapat dipercaya. TypeScript membantu menjelaskan shape yang diharapkan, tetapi tidak memeriksa payload production dengan sendirinya.

Bagian ini memengaruhi progres lesson.

Ubah response course menjadi card model

Wajib
ts
type CourseApiResponse = {
  id: string;
  title: string;
  lesson_count: number;
  updated_at: string;
};

type CourseCardModel = {
  id: string;
  title: string;
  lessonLabel: string;
  updatedLabel: string;
};

export function toCourseCard(
  response: CourseApiResponse,
): CourseCardModel {
  return {
    id: response.id,
    title: response.title.trim(),
    lessonLabel: `${response.lesson_count} lesson`,
    updatedLabel: new Date(response.updated_at).toLocaleDateString("id-ID"),
  };
}

CourseCard hanya perlu id, title, dan dua label siap tampil. Ia tidak perlu mengetahui snake_case API atau format tanggal sumber. Jika tanggal invalid atau field dapat null, model response serta validation boundary harus menyatakannya secara eksplisit sebelum mapper membuat keputusan display.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Map course API response to card model

Map response course dari bentuk transport ke data card yang siap dirender tanpa membuat component mengenal detail API. Preview tidak memanggil endpoint course.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa alasan utama memakai mapper sebelum data API dirender oleh component card?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Jangan memakai as sebagai jalan pintas untuk response yang tidak diketahui

Menulis `response as CourseApiResponse` tidak memeriksa payload pada runtime. Jika endpoint belum terpercaya, gunakan validation di boundary, misalnya schema yang sesuai, lalu map hasil yang valid. Hindari membuat mapper raksasa yang sekaligus fetch, validate, format, menyimpan state, dan merender JSX. Pecah tanggung jawabnya saat complexity benar-benar muncul.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • API response adalah bentuk transport; component membutuhkan model UI yang jelas.
  • Mapper menjaga detail endpoint tidak menyebar ke banyak component.
  • Format display dan label dapat ditentukan sekali di data boundary.
  • TypeScript tidak menggantikan validation runtime untuk payload yang tidak tepercaya.
  • Berikutnya, optimistic UI mengubah tampilan sebelum server mengonfirmasi sehingga recovery harus dirancang lebih dahulu.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Component tidak perlu mengenal semua detail response API.

Memuat progresReview module