Belajar GraphQL - Schema-First vs Code-First Approach

#Pendahuluan

Selama ini kalian menulis schema sebagai file SDL terpisah — itu pendekatan schema-first. Episode 30 memperkenalkan pendekatan alternatif: code-first, di mana schema dihasilkan langsung dari kode TypeScript.

Kita akan membandingkan kedua filosofi, mempraktikkan Type-GraphQL dengan decorators dan dependency injection, melihat Pothos sebagai penerus modern, lalu menutup dengan panduan memilih pendekatan yang tepat.

#Schema-First Development

#SDL sebagai Sumber Kebenaran

Pendekatan schema-first (yang kalian pakai di episode 3-7) menempatkan file SDL sebagai sumber kebenaran, lalu resolver dipasangkan ke schema:

type Query {
  users: [User!]!
}
 
type User {
  id: ID!
  username: String!
}

Kelebihannya: schema mudah direview non-programmer, kolaborasi dengan frontend dimulai sebelum backend (via mock, episode 29), dan bahasa-agnostik. Kekurangannya: duplikasi antara SDL dan tipe TypeScript, serta penulisan resolver map manual yang rawan salah tipe tanpa codegen.

#Tooling Pendukung

Schema-first modern biasanya dipasangkan dengan GraphQL Code Generator (episode 23) agar tipe TypeScript dihasilkan otomatis dari SDL — mengatasi sebagian besar kekurangannya.

#Code-First Development

#Schema dari Kode

Pendekatan code-first membalik arah: kalian menulis kelas TypeScript dengan decorators, dan schema GraphQL dihasilkan dari kode tersebut. Tidak ada duplikasi — tipe TypeScript adalah satu-satunya sumber kebenaran:

• Type-GraphQL: class-based schema dengan decorators, paling matang.
• Nexus: code-first yang populer di awal, kini dilanjutkan oleh Pothos.
• Pothos: penerus Nexus dengan sistem plugin yang kuat.
• GraphQL-Modules: modularisasi schema code-first.

#Type-GraphQL

#Class-Based Schema dengan Decorators

npm install type-graphql graphql class-validator reflect-metadata

Object type dengan decorator

import { ObjectType, Field, ID } from "type-graphql";
 
@ObjectType()
export class User {
  @Field(() => ID)
  id: string;
 
  @Field()
  username: string;
}

Perhatikan bahwa @Field() mendefinisikan field schema, dan resolvernya juga sebagai method di kelas:

Resolver sebagai method

import { Resolver, Query, Arg } from "type-graphql";
 
@Resolver()
export class UserResolver {
  @Query(() => User)
  async user(@Arg("id") id: string) {
    return this.userService.findById(id);
  }
}

#Dependency Injection

Class resolver memungkinkan dependency injection — dependensi disuntikkan ke constructor, membuat kode mudah dites:

Injeksi dependency

import { Service } from "typedi";
 
@Service()
@Resolver()
export class UserResolver {
  constructor(private userService: UserService) {}
}

Buat schema dari seluruh resolvers:

Build schema Type-GraphQL

import { buildSchema } from "type-graphql";
 
const schema = await buildSchema({
  resolvers: [UserResolver, PostResolver],
  container: Container,
});

Dengan Container dari typedi, seluruh graph of dependency dikelola otomatis. Ini membuat Type-GraphQL sangat populer untuk aplikasi besar yang terstruktur.

#Pothos GraphQL

#Modern Code-First dengan Plugin

Pothos adalah pendekatan code-first yang lebih baru dengan type safety tingkat lanjut dan sistem plugin:

npm install @pothos/core

Schema Pothos

import SchemaBuilder from "@pothos/core";
 
const builder = new SchemaBuilder({});
 
builder.objectType("User", {
  fields: (t) => ({
    id: t.exposeID("id"),
    username: t.exposeString("username"),
    posts: t.field({
      type: [Post],
      resolve: (user) => db.posts.findByAuthor(user.id),
    }),
  }),
});
 
const schema = builder.toSchema();

Pothos unggul dalam type inference — tipe resolver otomatis ditarik dari implementasi — dan plugin untuk prisma, relay, scope auth, dan banyak lagi. Migration dari Nexus cukup lurus karena pola-penulisan yang mirip.

#Perbandingan dan Panduan Memilih

#Kapan Memakai Schema-First

• Tim besar dengan banyak member non-programmer yang perlu mereview schema.
• Frontend dikembangkan paralel dengan backend (butuh schema lebih dulu untuk mock).
• Graf berbagi schema antar bahasa (misalnya Python dan Go sekaligus).

#Kapan Memakai Code-First

• TypeScript end-to-end dan ingin tipe otomatis sinkron tanpa codegen.
• Logika bisnis kompleks yang perlu dibungkus dalam kelas terstruktur.
• Ingin dependency injection dan testability tinggi.

schema-first -> kolaborasi lintas tim, bahasa campuran
code-first  -> TypeScript penuh, struktur besar, DI

Pertimbangan tambahan: ukuran tim dan kompleksitas project. Tim kecil dengan TypeScript penuh cenderung memilih code-first; enterprise dengan banyak konsumen dan review schema ketat sering memilih schema-first plus codegen. Tidak ada jawaban salah mutlak — konsistensi lebih penting daripada pilihan itu sendiri.

#Penutup

Inti yang harus dibawa pulang:

• Schema-first menempatkan SDL sebagai sumber kebenaran; paling cocok untuk kolaborasi lintas tim.
• Code-first menghasilkan schema dari kode TypeScript, menghilangkan duplikasi.
• Type-GraphQL memakai class, decorators, dan dependency injection.
• Pothos menawarkan type inference kuat dan sistem plugin.
• Pilih schema-first untuk kolaborasi dan bahasa campuran; code-first untuk TypeScript penuh.
• Konsistensi pendekatan lebih penting daripada pendekatan itu sendiri.

Di episode 31 selanjutnya kalian akan mempelajari deployment GraphQL ke production — platform deployment seperti Vercel, Railway, dan Render, containerization dengan Docker multi-stage, Kubernetes, pertimbangan serverless seperti cold start, manajemen environment dan secrets, hingga strategi database migrations. API kalian akan melangkah ke production!