107 Menjalankan Code Generation untuk Resolver dan Model

Jika kamu membangun aplikasi modern dengan GraphQL dan TypeScript—katakanlah menggunakan stack kebanggaan seperti Apollo Server , NestJS , atau GraphQL Yoga —pasti pernah merasakan manual repetitive task seperti membuat resolver, model, dan map tipe GraphQL ke TypeScript. Untungnya, dunia modern engineering telah menyediakan “ramuan otomatis” berupa code generation tools.

Pada artikel kali ini, kita akan membahas end-to-end cara menjalankan code generation untuk resolver dan model, kamu akan menemukan contoh kode, simulasi, dan bahkan diagram alur prosedur codegen menggunakan mermaid .

Mengapa Perlu Code Generation?

Sebelum membahas “cara”, mari bahas dulu “mengapa”. Dengan code generation:

• Produktivitas meningkat: Tidak perlu menulis file resolver dan model secara manual setiap ada perubahan schema.
• Konsistensi tipe: Tidak ada lagi typo tipe data atau flow data/response yang tidak sinkron.
• Scalability: Ketika skema membesar, codegen menghemat ratusan menit kerja manusia.

Tool: @graphql-codegen/cli

Tool paling populer untuk code generation di ekosistem JavaScript/TypeScript adalah @graphql-codegen/cli . Ia fleksibel, banyak plugin, mendukung berbagai framework, mudah diintegrasikan ke dalam CI/CD, dan komunitasnya aktif.

Skema Diagram: Proses Code Generation

Mari mulai dari big picture—begini alur proses code generation untuk resolver dan model biasanya berlangsung:

flowchart TD
    A[Write GraphQL Schema (.graphql)] --> B[Konfigurasi codegen.yml]
    B --> C[Run Codegen Command]
    C --> D[Generate Typescript Models]
    C --> E[Generate Typed Resolvers]
    D --> F[Import Model/Types di Project]
    E --> F

flowchart TD
    A[Write GraphQL Schema (.graphql)] --> B[Konfigurasi codegen.yml]
    B --> C[Run Codegen Command]
    C --> D[Generate Typescript Models]
    C --> E[Generate Typed Resolvers]
    D --> F[Import Model/Types di Project]
    E --> F

Setup Proyek Simulasi

Misal, penggunaan di aplikasi TypeScript sederhana.

Struktur directory:

1/project-root
2 ├── src/
3 │    ├── resolvers/
4 │    ├── models/
5 │    └── schema.graphql
6 ├── codegen.yml
7 └── package.json

Kita mulai dari schema:

src/schema.graphql:

 1type User {
 2  id: ID!
 3  name: String!
 4  email: String!
 5}
 6
 7type Query {
 8  users: [User!]!
 9  user(id: ID!): User
10}

Instalasi Paket Codegen

Install dependency yang dibutuhkan:

1npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-resolvers

Penjelasan singkat plugin:

• typescript: Generate tipe TypeScript dari skema GraphQL.
• typescript-resolvers: Generate resolver type signatures lengkap.

Membuat Konfigurasi codegen.yml

codegen.yml:

1schema: ./src/schema.graphql
2generates:
3  ./src/generated/types.ts:
4    plugins:
5      - typescript
6      - typescript-resolvers
7    config:
8      contextType: ../context#Context
9      maybeValue: T | null // allow null response

Penjelasan penting:

• schema: path ke schema GraphQL.
• generates: target file output.
• contextType: menyesuaikan dengan context resolver.
• plugins: yang akan dijalankan untuk generate kode.

Menjalankan Code Generation

Command untuk generate kode:

1npx graphql-codegen

Setelah dijalankan, kamu akan mendapatkan file src/generated/types.ts berisi dua hal besar:

• Model cukup otomatis sesuai tipe di schema.
• Type signature untuk setiap resolver.

Contoh Hasil Generate

1. Generated Model Types

Sebagian dari types.ts yang dihasilkan akan tampak seperti ini:

1export type User = {
2  __typename?: 'User';
3  id: string;
4  name: string;
5  email: string;
6};

2. Generated Resolver Types

Juga tersedia signature resolver yang aman secara tipe:

1export type QueryResolvers<ContextType = Context, ParentType = ResolversParentTypes['Query']> = {
2  users?: Resolver<Array<User>, ParentType, ContextType>,
3  user?: Resolver<Maybe<User>, ParentType, ContextType, RequireFields<QueryUserArgs, 'id'>>,
4};

Dengan model ini, setiap implementasi resolver otomatis mendapat autocomplete tipe sekeren ini:

 1import { QueryResolvers } from './generated/types';
 2
 3export const queryResolvers: QueryResolvers = {
 4  users: (parent, args, context, info) => {
 5    // context: strongly typed!
 6    return context.dataSources.userAPI.getAllUsers();
 7  },
 8  user: (parent, { id }, context) => {
 9    return context.dataSources.userAPI.getUserById(id);
10  },
11};

Simulasi Perubahan Skema

Salah satu selling point codegen: ketika schema berubah, tinggal generate ulang!

Misal tambahkan field isActive:

1type User {
2  id: ID!
3  name: String!
4  email: String!
5  isActive: Boolean!
6}

1npx graphql-codegen

Maka seluruh model dan resolver signature otomatis diperbarui, tanpa perlu manual sync.

Tabel Perbandingan Manual vs Code Generation

Best Practices dalam Implementasi

1. Ignore hasil generate di VCS
Tambahkan /src/generated ke .gitignore agar hasil generate tidak membanjiri repository.

2. Integrasi dalam CI/CD
Di pipeline, jalankan codegen sebelum kompilasi atau testing, pastikan semua code up-to-date.

3. Cek Breaking Change schema
Perubahan schema = wajib generate ulang, lint dan build gagal jika tipe tak sesuai.

4. Custom Plugin
Gunakan plugin lain seperti typescript-operations jika perlu generate kode untuk query/mutation dari frontend.

Penutup

Dengan melakukan code generation untuk resolver dan model, development menjadi lebih scalable, aman dari typo, dan mudah untuk kolaborasi tim besar. Begitu pipeline codegen terintegrasi, productivitas engineermu akan naik berkali lipat.

Jadi, jika “musuh klasik” project GraphQL kamu adalah boilerplate manual, sudah waktunya hijrah ke code generation. Tidak perlu khawatir berapa besar schema yang kamu punya, karena automation siap menanganinya.

Referensi

• GraphQL Code Generator
• Apollo Codegen Guide
• TypeScript-GraphQL Plugin List

Happy coding & automating! 🚀