Belajar GraphQL - Persiapan Skill dan Setup Environment

#Pendahuluan

Selamat datang di series Belajar GraphQL! Series ini akan membawa kalian menguasai GraphQL — bahasa query untuk API yang dikembangkan Facebook, kini dikelola oleh GraphQL Foundation — dari konsep fundamental sampai deployment production-ready. Total ada 51 episode yang tersusun dari sepuluh fase, dari pre-requisites hingga real-world projects.

Sebelum menulis schema atau resolver pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa penting? GraphQL bukan pengganti HTTP atau database; dia adalah layer yang berdiri di atas keduanya. Kalau kalian belum paham bagaimana request HTTP bekerja, bagaimana JavaScript menangani promise, atau bagaimana data disimpan di database, akan sulit menelusuri aliran data saat terjadi error.

Episode 0 ini adalah peta jalan kalian. Kita akan memastikan skill dasar terpenuhi, menginstall Node.js dan tool pendukung, menginisialisasi project dengan TypeScript, lalu mengonfigurasi ESLint, Prettier, dan ekstensi GraphQL. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#HTTP Protocol

GraphQL hampir selalu berjalan di atas HTTP (kecuali transport WebSocket untuk subscriptions di episode 16). Kalian wajib paham metode HTTP seperti GET dan POST, struktur request dan response, serta status code populer seperti 200, 400, dan 500. Di GraphQL, hampir semua operasi dikirim sebagai POST ke satu endpoint.

curl -X POST http://localhost:4000/ -H "Content-Type: application/json" \
  -d "{\"query\":\"{ hello }\"}"

Perhatikan bahwa seluruh request dikirim sebagai JSON dengan kolom query. Kalian juga akan sering memakai curl untuk debugging cepat tanpa membuka browser.

#JavaScript atau TypeScript ES6+

GraphQL adalah ekosistem yang paling matang di JavaScript. Kuasai minimal sintaks ES6+: arrow function, destructuring, spread operator, template literal, dan module import-export. Untuk series ini kita memakai TypeScript karena memberikan type safety end-to-end. Pelajari juga pemrograman asynchronous dengan Promise dan async dan await, karena semua resolver yang berhubungan dengan database akan bersifat async.

#REST API, JSON, dan Database

Pengalaman dengan REST membantu kalian memahami perbedaan mendasar yang akan dibahas di episode 1: over-fetching, under-fetching, dan endpoint proliferation. Pahami juga format JSON sebagai media pertukaran data, serta konsep database relasional maupun NoSQL. Di episode 8 kita akan menghubungkan GraphQL ke PostgreSQL dan MongoDB.

#Software dan Tools yang Perlu Disiapkan

#Node.js dan Package Manager

GraphQL di ekosistem JavaScript membutuhkan Node.js versi 18 LTS atau lebih baru. Cek versi yang terpasang:

node --version
npm --version

Jika belum ada, install Node.js dari situs resminya atau melalui nvm. Package manager boleh npm, yarn, atau pnpm; series ini memakai npm karena paling umum. Pastikan juga Git terinstall untuk version control:

git --version

#Code Editor dan API Testing

Gunakan VS Code dan install ekstensi GraphQL (resmi dari GraphQL Foundation) untuk syntax highlighting, autocomplete, dan validasi schema. Untuk testing API, siapkan Apollo Sandbox yang menjadi bawaan Apollo Server 4, GraphQL Playground, atau tool seperti Postman dan Insomnia yang mendukung GraphQL. Docker bersifat opsional, tapi akan dipakai di episode 12 dan 33 untuk menjalankan database dan server tambahan.

#Setup Development Environment

#Inisialisasi Project

Buat direktori project dan inisialisasi package.json:

mkdir belajar-graphql
cd belajar-graphql
npm init -y

#Konfigurasi TypeScript

Install TypeScript beserta dependency untuk menjalankan kode langsung di Node:

npm install -D typescript tsx @types/node

Buat tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}

Opsi strict: true memaksa penulisan kode yang aman tipe — kebiasaan yang akan berguna saat kita mengetik resolver dan context di episode 6.

#ESLint, Prettier, dan Ekstensi GraphQL

Install linting dan formatting:

npm install -D eslint prettier eslint-config-prettier

Lalu di dalam VS Code, install ekstensi GraphQL dan aktifkan format-on-save. Untuk memvalidasi schema langsung dari editor, tambahkan graphql-eslint sebagai plugin linter. Konfigurasi lengkapnya akan kita pakai sejak episode 3 saat schema pertama dibuat.

#Verifikasi Environment

Jalankan perintah berikut untuk memastikan semuanya siap:

node --version
npm --version
git --version
npx tsc --version

Semua perintah di atas wajib mengeluarkan versi tanpa error. Setelah node --version dan kawan-kawannya berjalan normal, environment kalian siap untuk mengikuti episode 1 hingga 50.

#Penutup

Inti yang harus dibawa pulang:

• Kuasai HTTP, JavaScript atau TypeScript ES6+, JSON, dan dasar asynchronous programming.
• Siapkan Node.js 18 LTS atau lebih baru beserta npm.
• Install ekstensi GraphQL di VS Code dan tool testing API seperti Postman atau Insomnia.
• Inisialisasi project dengan TypeScript, ESLint, dan Prettier.
• Verifikasi environment dengan memeriksa versi Node, npm, Git, dan tsc.

Di episode 1 selanjutnya kalian akan mempelajari sejarah, latar belakang, dan alasan menggunakan GraphQL — dari kelahiran GraphQL di Facebook tahun 2012, masalah REST yang mendorong kelahirannya, hingga perbandingan GraphQL dengan REST dan gRPC. Pastikan environment kalian sudah siap, karena perjalanan Belajar GraphQL baru saja dimulai!