query-stringpaginationrestMenengah3 mnt baca

Query Parameter Praktis: Filter, Sort, dan Pagination

Pola query string yang dipakai API nyata untuk filter, sorting, dan pagination.

Indeks di belakang buku tebal

Buku 1000 halaman tidak dibaca sekaligus; kamu memakai indeks dan membaca per bab. API yang punya ribuan data bekerja sama: ia tidak mengirim semuanya sekaligus, melainkan per halaman lewat query parameter. Pola ini disebut pagination.

Kenapa pagination harus ada

Mengirim 10.000 produk dalam satu response akan membuat server lambat, koneksi macet, dan browser kehabisan memori. Pagination memecah data menjadi potongan kecil yang cepat diunduh dan nyaman ditampilkan. Hampir semua daftar di aplikasi (feed, katalog, riwayat transaksi) memakai teknik ini.

Contoh 1: pagination dasar

http

GET /api/produk?page=2&limit=10 HTTP/1.1
Host: toko.contoh.id

"Ambilkan halaman 2, 10 produk per halaman." Response-nya menyertakan info navigasi:

json

{
  "data": [ "...10 produk..." ],
  "page": 2,
  "limit": 10,
  "total": 95,
  "totalPages": 10
}

Dari totalPages frontend tahu harus membuat 10 tombol halaman. Rumus sederhananya: data yang dilewati = (page - 1) x limit.

Contoh 2: filter, sort, dan search digabung

Query parameter bukan cuma untuk halaman:

http

GET /api/produk?kategori=kopi&min_harga=10000&urut=harga_asc&q=tubruk&page=1&limit=20 HTTP/1.1
Host: toko.contoh.id

Satu request bisa berarti: "cari produk kategori kopi, harga minimal 10000, mengandung kata tubruk, urutkan harga termurah, halaman 1 isi 20." Semua filter katalog e-commerce pada dasarnya adalah query parameter seperti ini. Di frontend, setiap klik filter cukup mengubah query string lalu fetch ulang.

Kesalahan umum

Salah: meminta semua data lalu filter di frontend. GET /api/produk tanpa limit untuk 10.000 item akan membekukan browser. Yang benar: selalu pakai pagination dari API, filter berat di server.

Salah: tidak memvalidasi page dan limit. ?page=-5&limit=999999 bisa membuat server ngadat. Yang benar (untuk backend): batasi limit maksimal, misalnya 100, dan tolak page tidak valid.

Salah: pagination offset untuk data yang terus berubah. Feed yang datanya bertambah cepat bisa menampilkan item ganda atau lompat saat user pindah halaman. Yang benar (level lanjut): pakai cursor-based pagination dengan ?cursor=....

Salah: lupa encode karakter khusus di query. ?q=kopi tubruk harus menjadi ?q=kopi%20tubruk. Yang benar: bangun query dengan URLSearchParams di JavaScript agar encoding otomatis.

Tips: parameter yang konsisten

Sepakati nama parameter di seluruh API-mu dan jangan ubah-ubah:

http

?page=2&limit=20&sort=harga_asc&q=kopi

Hindari mencampur gaya (page di satu endpoint, offset di endpoint lain). Konsistensi membuat frontend bisa memakai satu fungsi pagination untuk semua endpoint. Dokumentasikan default-nya: page default 1, limit default 20, limit maksimal 100.

Catatan teknis: Di JavaScript, new URLSearchParams({page: 2, limit: 10}).toString() menghasilkan page=2&limit=10 yang sudah ter-encode dengan benar. Biasakan memakainya daripada merangkai string manual.

Tantangan

Bangun URL filter produk

Buat fungsi cariProduk({ kata, kategori, hargaMax, halaman }) yang mengembalikan URL lengkap memakai URLSearchParams:

base: https://api.contoh.id/produk
parameter: q, kategori, harga_max, halaman, dan selalu per_halaman=20
Abaikan parameter yang nilainya undefined atau string kosong.

Uji dengan cariProduk({ kata: "sepatu lari", hargaMax: 500000 }) dan pastikan spasinya ter-encode dengan benar.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />

</head>
<body>
<h1>Halo JS</h1>
<p>Buka console preview untuk melihat output.</p>
<script src="index.js"></script>
</body>
</html>

Open Sandbox