96 Migrasi REST API ke GraphQL: Panduan Lengkap dengan Studi Kasus

Migrasi dari REST API ke GraphQL telah menjadi tren di banyak perusahaan yang ingin memberikan pengalaman API yang lebih fleksibel dan efisien untuk para pengembang frontend. Fenomena ini sangat terasa terutama di kalangan startup yang memiliki kebutuhan rapid development dan iterasi UI/UX yang tinggi. Artikel ini akan membahas alasan, tantangan, pola migrasi, dan best practice dalam transisi dari REST ke GraphQL—serta studi kasus sederhana berikut contoh kode implementasinya.

Kenapa Migrasi ke GraphQL?

REST API telah menjadi standar de-facto selama lebih dari satu dekade. Namun, beberapa masalah mulai muncul dalam praktik nyata:

• Overfetching & Underfetching: REST API biasanya terstruktur berdasarkan resource. Seringkali client mengambil data lebih banyak atau justru kurang dari yang dibutuhkan.
• Banyak Roundtrip: Mengumpulkan data yang tersebar di beberapa endpoint REST dapat memerlukan beberapa request untuk satu tampilan aplikasi frontend.
• Evolusi API yang Lambat: Iterasi perubahan pada REST API cenderung lebih lambat dan rentan breaking-change.

GraphQL memecahkan masalah ini dengan pendekatan “query what you need”. Client bisa mengambil data sesuai kebutuhan dalam satu query, menjadikan API lebih dinamis dan mudah berevolusi.

Studi Kasus: Migrasi Sederhana dari REST ke GraphQL

Mari kita ambil contoh kasus aplikasi marketplace sederhana yang memiliki dua resource utama:

• GET /products — Mengambil list produk
• GET /products/:id — Mengambil detail produk termasuk data merchant

Struktur REST API

GET /products

Response:

[
  {
    "id": "1",
    "name": "T-Shirt",
    "merchant_id": "42"
  },
  // ...
]

GET /merchants/42

Response:

{
  "id": "42",
  "name": "KaosMerah",
  "address": "Jakarta"
}

Untuk menampilkan detail produk beserta informasi merchant di frontend, aplikasi perlu melakukan multiple API calls:

sequenceDiagram
    participant Client
    participant REST_API
    Client->>REST_API: GET /products/1
    REST_API-->>Client: product detail (with merchant_id)
    Client->>REST_API: GET /merchants/42
    REST_API-->>Client: merchant detail

Pola Migrasi: The Strangler Pattern

Migrasi REST ke GraphQL sebaiknya tidak dilakukan secara sekaligus demi mitigasi risiko. Salah satu pendekatan klasik adalah Strangler Pattern: membangun GraphQL bersebelahan dengan REST, lalu secara bertahap memindahkan fitur.

graph TD
    A[REST API] -->|Routing| D[API Gateway]
    B[GraphQL Server] -->|Routing| D
    D -->|Client Request| C[Frontend]

• API Gateway dapat mengarahkan request /graphql ke GraphQL, yang lain ke REST.
• Secara bertahap, fitur REST dipindah ke GraphQL.

Implementasi: Contoh Migrasi Endpoint

1. Membuat Skema GraphQL

type Product {
  id: ID!
  name: String!
  merchant: Merchant!
}

type Merchant {
  id: ID!
  name: String!
  address: String!
}

type Query {
  product(id: ID!): Product
  products: [Product!]!
}

2. Resolver GraphQL yang Memanggil REST

Migrasi awal sering kali menggunakan schema stitching atau REST data source pada GraphQL, sehingga backend GraphQL hanya act sebagai proxy terhadap REST.

// Menggunakan Apollo Server di Node.js
const { RESTDataSource } = require('apollo-datasource-rest');

class ProductAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = 'https://api.96market.com/';
  }

  async getProduct(id) {
    return this.get(`products/${id}`);
  }
  
  async getProducts() {
    return this.get('products');
  }
}

class MerchantAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = 'https://api.96market.com/';
  }

  async getMerchant(id) {
    return this.get(`merchants/${id}`);
  }
}

const resolvers = {
  Query: {
    product: async (_, { id }, { dataSources }) => {
      const product = await dataSources.productAPI.getProduct(id);
      // merchant field akan di-load oleh nested resolver
      return product;
    },
    products: async (_, __, { dataSources }) => {
      return dataSources.productAPI.getProducts();
    }
  },
  Product: {
    merchant: async (product, _, { dataSources }) => {
      return dataSources.merchantAPI.getMerchant(product.merchant_id);
    }
  }
};

Perbandingan Efisiensi: REST vs GraphQL Query

Contoh Query GraphQL:

query {
  product(id: "1") {
    name
    merchant {
      name
      address
    }
  }
}

Sample Response:

{
  "data": {
    "product": {
      "name": "T-Shirt",
      "merchant": {
        "name": "KaosMerah",
        "address": "Jakarta"
      }
    }
  }
}

Tantangan dan Tips Migrasi

1. N+1 Problem

GraphQL memungkinkan nested query, tapi berhati-hatilah pada “N+1 Problem”. Gunakan data loader untuk batch request ke backend.

2. Authorization

REST API biasanya menggunakan resource-level permission. Di GraphQL, authorization perlu diperhatikan hingga ke field-level, jika perlu.

3. Schema Evolution

GraphQL mendorong backward compatibility dengan field deprecation, tapi pengelolaan schema harus disiplin dilakukan.

4. Error Handling

REST biasanya mengandalkan HTTP status code. Di GraphQL, error handling menggunakan array of errors di response JSON. Strukturkan error Anda secara konsisten.

5. Monitoring & Logging

Migrasi ke GraphQL membutuhkan observability yang baik. Pantau query apa yang sering diminta, waktu response, serta potensi bottleneck.

Kesimpulan

Migrasi REST API ke GraphQL menawarkan efisiensi data transfer dan fleksibilitas bagi frontend, tapi bukan tanpa tantangan. Penerapan Strangler Pattern, penggunaan RESTDataSource di awal, dan displin evolusi schema adalah kunci migrasi yang sukses.

Dengan pola bertahap seperti ini, kita bisa menjaga existing client tetap berjalan sembari menyajikan API yang lebih modern dan powerful pada pengembang baru.

GraphQL bukan silver bullet—namun untuk banyak kasus, terutama yang membutuhkan agility dan evolusi cepat, migrasi dari REST ke GraphQL adalah salah satu investasi paling strategis bagi tim engineering Anda pada tahun 2024.

Referensi:

• Apollo GraphQL Docs
• Martin Fowler - Strangler Pattern
• REST vs GraphQL — Medium Article

Tertarik migrasi atau ingin berdiskusi lebih lanjut? Silakan tinggalkan komentar di bawah! 🚀