Request and Response Shape
Memperlakukan payload success dan error sebagai contract yang perlu diberi type serta dipetakan sebelum masuk ke component UI.
Tujuan belajar
- Membaca path, method, header, request body, success response, dan error response sebagai satu contract
- Membedakan API response transport dari model yang dibutuhkan component
- Membuat type response serta mapper kecil untuk data course
- Menggunakan validation error field tanpa menganggap semua failure sebagai error umum
Isi lesson
6 blok- 1.Bentuk data adalah bagian dari contractBelum selesaiWajib
- 2.Type transport lalu map ke model CourseCardBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Type client bukan pengganti contract validationBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Bentuk data adalah bagian dari contract
WajibAPI contract tidak berhenti pada endpoint. Untuk satu mutation, frontend perlu tahu method, request body, header yang dibutuhkan, bentuk success response, dan bentuk error response. Misalnya POST /api/course-notes dapat menerima course_id serta body, mengembalikan note baru saat berhasil, dan mengembalikan field errors bila input tidak valid. TypeScript membantu memberi nama pada bentuk yang diharapkan, tetapi type di browser bukan bukti server selalu mengirim data valid.
Jangan membuat component mengenal setiap detail transport. API mungkin memakai snake_case, null, wrapper data, timestamp ISO, pagination metadata, atau error code internal. Mapper di data boundary mengubah response menjadi model UI yang jelas, misalnya title, lessonCount, dan updatedLabel. Component lalu fokus menampilkan state. Saat contract berubah, satu mapper dan type lebih mudah direview dibanding detail endpoint yang tersebar di banyak JSX.
Bagian ini memengaruhi progres lesson.
Type transport lalu map ke model CourseCard
Wajibtype CourseApiResponse = { id: string; title: string; lesson_count: number; updated_at: string };
type CourseCardModel = { id: string; title: string; lessonCount: number; updatedLabel: string };
function mapCourseResponse(course: CourseApiResponse): CourseCardModel {
return {
id: course.id,
title: course.title,
lessonCount: course.lesson_count,
updatedLabel: new Date(course.updated_at).toLocaleDateString("id-ID"),
};
}CourseApiResponse mengikuti nama field transport dari endpoint. CourseCardModel mengikuti kebutuhan component. Mapper adalah tempat yang tepat untuk rename sederhana dan format yang memang dipakai UI. Untuk input user, baca error shape API juga: 422 mungkin mengembalikan errors.body yang perlu disambungkan ke field, sedangkan 500 tidak boleh diperlakukan sebagai kesalahan field user.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususType and map course API response
Beri type pada response course transport lalu map lesson_count dan updated_at ke model CourseCard UI.
Tujuan awal: Fokus di tab TS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Mengapa CourseCard sebaiknya menerima CourseCardModel, bukan response API mentah?
Progres lesson naik setelah jawaban benar.
Kesalahan umum
WajibType client bukan pengganti contract validation
Menulis type CourseApiResponse tidak membuat server, network, atau third-party API otomatis benar. Gunakan type untuk membuat code client lebih jelas, lalu tambahkan runtime validation bila boundary project memang membutuhkannya. Untuk module ini, fokus pada kebiasaan membaca contoh response, menangani null dan error shape, serta tidak menyebarkan field transport ke component.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Endpoint, input, success response, dan error response adalah satu API contract.
- Type transport dapat berbeda dari model yang ingin dirender component.
- Mapper menjaga rename, formatting, dan detail response di satu boundary.
- Validation error field dan server error umum membutuhkan UI recovery berbeda.
- Berikutnya, kita melihat daftar data yang tidak selalu dikirim dalam satu response serta event webhook yang tidak langsung masuk ke browser.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Bentuk data adalah bagian dari contract.