Tujuan Pembelajaran

Memahami konsep GraphQL dan bedanya dengan REST
Bisa menulis query dan mutation GraphQL

Analogi

Diagram


      REST = Nasi Campur Tetap:
'Pesan nasi campur' → Dapat semua lauk

GraphQL = Build-Your-Own:
'Nasi + ayam, TIDAK pakai tempe'
(Hanya yang diminta)

GraphQL seperti menu custom — ambil hanya data yang dibutuhkan

Penjelasan Konsep

GraphQL

GraphQL adalah query language untuk API yang dikembangkan Facebook. Bedanya dengan REST: di REST server yang menentukan data yang dikembalikan, di GraphQL client yang menentukan.

Keunggulan GraphQL

Fetch exactly what you need → Tidak over-fetching.
Single endpoint → Semua query ke /graphql.
Strongly typed → Schema jelas, auto-documentation.
Nested data → Ambil data relasi dalam 1 query.

GraphQL vs REST

REST	GraphQL
Banyak endpoint	Satu endpoint
Server tentukan response	Client tentukan response
Over/under fetching	Exact data

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami konsep GraphQL dan bedanya dengan REST., dan bisa menulis query dan mutation GraphQL. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca GraphQL, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

GraphQL seperti menu custom — ambil hanya data yang dibutuhkan. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa graphql. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Baris 2-10: Query GraphQL. Baris 13-20: Mutation. Baris 23-30: Fetch GraphQL di JavaScript.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sedang membangun skill inti. Setelah bagian ini, kamu bisa memilih spesialisasi sesuai minat: frontend, backend, atau DevOps.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

graphql

# GRAPHQL QUERY
query GetUser {
  user(id: 1) {
    name
    email
    posts {
      title
      createdAt
    }
  }
}

# MUTATION
mutation CreateUser {
  createUser(input: { name: "Budi", email: "budi@mail.com" }) {
    id
    name
    email
  }
}

# FETCH DI JAVASCRIPT
const fetchGraphQL = async (query, variables = {}) => {
  const res = await fetch('/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query, variables })
  });
  return res.json();
};

Penjelasan Kode

Baris 2-10: Query GraphQL. Baris 13-20: Mutation. Baris 23-30: Fetch GraphQL di JavaScript.

Prompt AI

Jelaskan kenapa GraphQL tidak memerlukan versioning.

Pertanyaan Reflektif

Coba GraphQL di playground. Lihat auto-documentation-nya.