GraphQL Basics
Membaca GraphQL query sebagai permintaan data dengan field yang dipilih frontend, lalu membandingkannya dengan REST secara praktis.
Tujuan belajar
- Menjelaskan GraphQL query sebagai permintaan field dari schema yang tersedia
- Membaca query, variable, dan response data GraphQL sederhana
- Membedakan bentuk request GraphQL dan REST tanpa membuat klaim absolut
- Memilih field sesuai kebutuhan UI, bukan mengambil seluruh data secara acak
Isi lesson
6 blok- 1.GraphQL meminta bentuk data yang dibutuhkan UIBelum selesaiWajib
- 2.Query hanya mengambil field untuk CourseCardBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.REST dan GraphQL bukan pilihan menang-kalahBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
GraphQL meminta bentuk data yang dibutuhkan UI
WajibPada REST, frontend biasanya mengikuti beberapa endpoint yang ditentukan provider, misalnya GET /api/courses dan GET /api/courses/:id. Pada GraphQL, frontend mengirim query yang menyebut field yang ingin dibaca dari schema yang disediakan server. Query tidak memberi browser izin untuk membaca field apa saja; schema, authorization, dan resolver server tetap menentukan data yang tersedia.
Perbedaan yang perlu dipahami frontend adalah bentuk contract. REST sering terlihat pada path dan method. GraphQL sering terlihat pada operation, variable, serta selection set field. Keduanya tetap membutuhkan loading, error handling, type, mapping, dan QA response. Pilih berdasarkan contract, tooling, team, dan kebutuhan product yang nyata, bukan karena satu gaya terlihat lebih modern.
Bagian ini memengaruhi progres lesson.
Query hanya mengambil field untuk CourseCard
Wajibconst courseCardQuery = [
"query CourseCard($id: ID!) {",
" course(id: $id) { id title level lessonCount }",
"}",
].join("\n");
const variables = { id: "html-forms" };Operation bernama CourseCard menerima variable id. Selection set di dalam course menunjukkan field yang ingin dipakai UI. Jika CourseCard tidak membutuhkan field lain, jangan meminta field itu tanpa alasan. Response biasanya berada di data.course, tetapi error GraphQL dapat memiliki bentuk sendiri; baca provider docs serta type project sebelum menganggap semua request berhasil sama.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususSelect course GraphQL fields
Tulis query CourseCard yang menerima id dan hanya meminta field untuk UI card.
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
Apa yang paling tepat disimpulkan dari field title dan lessonCount di dalam GraphQL query?
Progres lesson naik setelah jawaban benar.
Catatan penting
WajibREST dan GraphQL bukan pilihan menang-kalah
REST dapat sangat jelas untuk resource dan HTTP semantics, sedangkan GraphQL dapat membantu UI meminta field sesuai kebutuhan. Keduanya dapat memiliki cache problem, error shape, pagination, permission, dan dokumentasi yang buruk bila contract tidak dirawat. Fokus pertama adalah membaca contract yang tersedia lalu membuat data boundary yang jujur.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- GraphQL query menyebut operation, variable, dan field yang dibutuhkan UI dari schema.
- REST umumnya mengekspresikan operation melalui path dan HTTP method.
- Schema serta authorization tetap membatasi data yang dapat diakses GraphQL.
- Pilih field sesuai model UI dan baca error shape provider, bukan hanya success example.
- Berikutnya, response status membantu frontend menentukan UI recovery pada HTTP-based API.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: GraphQL meminta bentuk data yang dibutuhkan UI.