Pagination and Webhooks
Membaca pagination response dan memahami webhook sebagai notifikasi server-ke-server yang memengaruhi refresh UI, bukan request langsung dari browser.
Tujuan belajar
- Membedakan offset/page dan cursor sebagai informasi pagination tingkat dasar
- Membaca item serta metadata halaman tanpa menganggap array pertama selalu lengkap
- Memetakan next cursor ke action Load more atau request berikutnya
- Menjelaskan webhook sebagai notifikasi server-ke-server yang tidak dieksekusi langsung oleh browser
Isi lesson
6 blok- 1.Daftar panjang dan event eksternal memerlukan context tambahanBelum selesaiWajib
- 2.Response cursor page menjadi action Load moreBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan menganggap halaman pertama adalah seluruh koleksiBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Daftar panjang dan event eksternal memerlukan context tambahan
WajibEndpoint koleksi sering tidak mengirim semua item sekaligus. Pagination membagi hasil menjadi page atau cursor agar request dan UI tetap terkendali. Offset/page biasanya mengirim nilai seperti page=2, sedangkan cursor memakai penanda dari response sebelumnya seperti next_cursor. Tugas frontend adalah membaca contract, menyimpan metadata yang diperlukan, mencegah request berikutnya saat tidak ada halaman lagi, dan memberi user feedback yang jujur.
Webhook adalah hal berbeda. Ia adalah notifikasi dari satu server ke server lain ketika event terjadi, misalnya payment provider memberi tahu application server bahwa pembayaran telah dikonfirmasi. Browser tidak seharusnya menerima webhook secret atau memverifikasi signature provider. Setelah server memproses event, frontend dapat melihat perubahan lewat refresh data, polling, realtime channel, atau navigasi berikutnya sesuai product.
Bagian ini memengaruhi progres lesson.
Response cursor page menjadi action Load more
Wajibtype CoursePageResponse = {
data: Array<{ id: string; title: string }>;
next_cursor: string | null;
};
function mapCoursePage(response: CoursePageResponse) {
return {
courses: response.data,
nextCursor: response.next_cursor,
canLoadMore: response.next_cursor !== null,
};
}data berisi item halaman saat ini. next_cursor adalah token contract yang dikirim kembali pada request berikutnya bila tidak null. UI memakai canLoadMore untuk menentukan apakah action perlu tersedia, tetapi request berikutnya tetap harus menangani loading, duplicate click, dan response error. Untuk webhook, alur yang perlu diingat adalah provider ke application server, data berubah, lalu frontend membaca data baru.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususMap course cursor page
Map data dan next_cursor dari response pagination menjadi model Load more yang jelas untuk 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
Manakah alur webhook yang tepat pada payment event?
Progres lesson naik setelah jawaban benar.
Peringatan
WajibJangan menganggap halaman pertama adalah seluruh koleksi
Jika response memiliki next cursor, total, page info, atau has_more, UI perlu memutuskan bagaimana user meminta data berikutnya dan bagaimana state loading/error-nya terlihat. Jangan menghapus metadata saat memetakan response. Untuk webhook, jangan membuka secret, endpoint internal, atau detail signature ke browser. Module auth dan security berikutnya akan memperluas boundary ini.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Pagination response berisi item serta metadata untuk mengetahui apakah halaman berikutnya tersedia.
- Cursor berasal dari contract server dan perlu dipakai apa adanya pada request berikutnya.
- Load more atau infinite scroll tetap membutuhkan loading, error, dan duplicate-request handling.
- Webhook adalah notifikasi server-ke-server; browser melihat hasil setelah data server berubah.
- Berikutnya, Uji Kompetensi menggabungkan pembacaan endpoint, status, response shape, pagination, dan webhook concept.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Daftar panjang dan event eksternal memerlukan context tambahan.