Belajar GraphQL - Membuat GraphQL Server dengan Apollo Server

#Pendahuluan

Semua konsep yang kalian pelajari — schema, query, mutation, resolver, context — kini akan menyatu menjadi sebuah server yang benar-benar berjalan. Episode 7 membangun GraphQL server pertama dengan Apollo Server 4, framework GraphQL paling populer di ekosistem JavaScript.

Kita akan menginstall dependency, menyusun schema dari type definitions dan resolver map, menjalankan server standalone maupun dengan Express, memakai Apollo Sandbox untuk menguji query, dan menyiapkan workflow development dengan hot reload serta TypeScript.

#Apollo Server Fundamentals

#Mengapa Apollo Server

Apollo Server dipilih karena matang, terdokumentasi baik, dan terintegrasi dengan ekosistem Apollo yang lengkap: Apollo Client, Apollo Studio, dan tooling otomasi. Versi 4 adalah versi stabil terbaru dengan arsitektur yang lebih modular: semua library dipecah berdasarkan integrasi, dan sandbox built-in untuk development.

Install dependency intinya:

npm install @apollo/server graphql

Library graphql adalah implementasi referensi dari spesifikasi GraphQL, sementara @apollo/server membungkusnya menjadi server HTTP yang siap pakai.

#Struktur Dasar Server

Apollo Server dibangun dari dua hal: typeDefs (schema dalam SDL) dan resolvers (objek berisi fungsi-fungsi resolver):

Server minimal Apollo Server 4

import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";
 
const typeDefs = `
  type Query {
    hello: String
  }
`;
 
const resolvers = {
  Query: {
    hello: () => "Halo dunia GraphQL",
  },
};
 
const server = new ApolloServer({ typeDefs, resolvers });
 
const { url } = await startStandaloneServer(server, { listen: { port: 4000 } });
console.log("Server siap di", url);

Jalankan dengan npx tsx src/index.ts dan buka http://localhost:4000 untuk masuk ke Apollo Sandbox.

#Schema Construction

#Type Definitions dan Resolver Map

typeDefs bisa berupa template literal string SDL atau dokumen AST dari graphql-tag. resolvers adalah objek bersarang: key Query, Mutation, atau nama tipe, dan di dalamnya fungsi-fungsi per field:

Resolver map lengkap

const resolvers = {
  Query: {
    products: (_, args, ctx) => ctx.db.products.findMany(args),
  },
  Mutation: {
    createProduct: (_, args, ctx) => ctx.db.products.create(args.input),
  },
  Product: {
    reviews: (product, _, ctx) => ctx.db.reviews.where({ productId: product.id }),
  },
};

Kombinasi typeDefs dan resolvers menghasilkan executable schema. Apollo menyebutnya "schema construction": mendefinisikan bentuk data lalu melengkapinya dengan logika pengambilan data.

#Server Integration

#Standalone, Express, dan Fastify

Apollo Server 4 memisahkan integrasi HTTP ke package terpisah. Untuk server Express:

npm install express cors body-parser
npm install @apollo/server@4.7 express4

Lalu pasang expressMiddleware ke aplikasi Express. Pilihan lain: @apollo/server/express4, @apollo/server/fastify, atau @as-integrations/next untuk Next.js API routes (episode 27). Untuk sebagian besar kebutuhan, startStandaloneServer sudah cukup.

#Serverless Deployment

Apollo Server 4 mendukung deployment serverless karena arsitekturnya memisahkan lapisan HTTP. Dengan startServerAndCreateHandler, server bisa dijalankan di AWS Lambda, Vercel, dan Netlify — topik yang dibahas di episode 31 dan 37.

#Apollo Sandbox dan Development Setup

#Menguji dengan Apollo Sandbox

Apollo Sandbox terbuka otomatis saat server berjalan di mode development. Kalian bisa menulis query, melihat dokumentasi schema lewat panel schema reference, dan memantau tab response. Ini pengganti GraphQL Playground klasik yang tersedia sejak Apollo Server 4.

Untuk menonaktifkan sandbox di production:

Matikan sandbox di production

const server = new ApolloServer({
  typeDefs,
  resolvers,
  introspection: process.env.NODE_ENV !== "production",
});

#Hot Reload dan Environment Variables

Setup development yang nyaman: jalankan server dengan tsx watch agar restart otomatis saat file berubah, dan kelola konfigurasi lewat environment variables:

{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "start": "node dist/index.js"
  }
}

Tambahkan juga .env untuk menyimpan variabel seperti port dan koneksi database, serta graphql-eslint untuk menjaga kualitas schema — keduanya sudah kalian siapkan di episode 0.

#Penutup

Inti yang harus dibawa pulang:

• Apollo Server 4 terdiri dari typeDefs dan resolvers, dijalankan dengan startStandaloneServer.
• Resolver map punya struktur bersarang: tipe root di luar, field di dalam.
• Integrasi HTTP dipisah ke package terpisah: standalone, Express, Fastify, atau Next.js.
• Apollo Sandbox tersedia otomatis di development untuk menguji query dan membaca schema.
• Matikan introspection dan sandbox di production, dan gunakan tsx watch untuk hot reload.

Di episode 8 selanjutnya kalian akan mempelajari data sources dan integrasi database — menghubungkan GraphQL ke PostgreSQL dengan Prisma, MongoDB dengan Mongoose, Redis untuk caching, class RESTDataSource untuk API eksternal, hingga pola separation of concerns antara resolver dan data layer. Server kalian akan mulai berbicara dengan data sungguhan!