56 Apa Itu Subscription di GraphQL?

Jika kamu sudah pernah mengembangkan aplikasi menggunakan GraphQL, kemungkinan besar kamu sudah akrab dengan dua operasi utama: query dan mutation. Namun, masih banyak yang belum maksimal memanfaatkan subscription, fitur ketiga yang memungkinkan komunikasi real-time antara klien dengan server. Dalam artikel ini, saya akan membahas secara mendalam tentang apa itu subscription di GraphQL, mengapa kita membutuhkannya, dan bagaimana cara mengimplementasikan subscription dengan contoh kode, alur sederhana, hingga simulasi agar kamu mendapatkan pemahaman end-to-end.

Konsep Dasar: Query, Mutation, dan Subscription

Sebelum membahas lebih lanjut tentang subscription, mari tinjau kembali tiga root operation dalam GraphQL:

Sederhananya, query bersifat stateless — klien bertanya, server menjawab. Mutation sama, hanya saja dia mengubah kondisi server. Nah, subscription berbeda: klien “berlangganan” ke perubahan tertentu dan menerima data secara otomatis setiap kali terjadi event yang relevan.

Definisi Subscription di GraphQL

Subscription adalah operation GraphQL yang memungkinkan klien menerima data secara real-time ketika event tertentu terjadi di server. Berbeda dengan query/mutation yang menggunakan protokol HTTP request-response, biasanya subscription menggunakan WebSocket agar koneksi antara klien dan server tetap terbuka.

Menggunakan subscription, kamu bisa membangun fitur seperti:

• Notifikasi real-time (mis: ada pesan/chat baru)
• Update stok barang langsung
• Status online user yang up-to-date
• Monitor transaksi live

Flow Subscription: Bagaimana Cara Kerjanya?

Mari kita lihat alur sederhana subscription pada GraphQL melalui diagram berikut:

sequenceDiagram
    participant Klien
    participant Server
    Note right of Klien: Membuka koneksi WebSocket
    Klien->>Server: SUBSCRIPTION `newMessage`
    Server--)Klien: Ack (Koneksi terbuka)

    Note left of Server: Ketika ada event baru
    Server-->>Klien: Push data pesan baru

    Klien->>Server: Unsubscribe (atau tutup koneksi)
    Server--)Klien: Koneksi ditutup

Penjelasan alur:

1. Klien membuka koneksi (umumnya WebSocket) ke server.
2. Klien mengirimkan operasi subscription.
3. Selama koneksi terbuka, server mengawasi event terkait.
4. Jika event terjadi (misalnya ada pesan baru), server secara push mengirim data ke klien.
5. Klien bisa menutup koneksi jika sudah tidak butuh update.

Contoh Kasus: Chat Room Subscription

Untuk memperjelas konsepnya, mari ambil studi kasus aplikasi chat. Misal, kita ingin fitur “pesan baru akan muncul tanpa harus reload halaman”.

1. Skema GraphQL Subscription

Di sisi server (misal pakai Apollo Server):

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Message {
    id: ID!
    content: String!
    author: String!
    timestamp: String!
  }

  type Query {
    messages: [Message]
  }
  
  type Mutation {
    postMessage(content: String!, author:String!): Message
  }

  type Subscription {
    messageAdded: Message
  }
`;

2. Resolver Subscription

Langkah berikutnya, kita memanfaatkan pub/sub mechanism. Di Node.js, biasanya memakai graphql-subscriptions:

const { PubSub } = require('graphql-subscriptions');
const pubsub = new PubSub();

const resolvers = {
  Query: {
    messages: () => getAllMessages(),
  },
  Mutation: {
    postMessage: (_, { content, author }) => {
      const message = saveMessage({ content, author });
      // publish event
      pubsub.publish('MESSAGE_ADDED', { messageAdded: message });
      return message;
    }
  },
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator(['MESSAGE_ADDED'])
    }
  }
};

Setiap kali ada postMessage, server akan me-publish event, memastikan semua klien yang berlangganan mendapat data baru.

3. Client Code: Subscribe ke Event

Misal menggunakan Apollo Client (React):

import { useSubscription, gql } from '@apollo/client';

const MESSAGE_ADDED = gql`
  subscription OnMessageAdded {
    messageAdded {
      id
      content
      author
      timestamp
    }
  }
`;

function Messages() {
  const { data, loading } = useSubscription(MESSAGE_ADDED);

  if (loading) return <p>Loading...</p>;
  
  return (
    <ul>
      {data.messageAdded.map(msg => (
        <li key={msg.id}>{msg.author}: {msg.content}</li>
      ))}
    </ul>
  );
}

Ketika ada message baru di server, data baru akan otomatis push ke komponen ini tanpa reload.

Simulasi Live Update

Agar semakin jelas, berikut ilustrasi sederhana melalui tabel, waktu dan event subscription:

Tantangan dan Best Practice

Subscription sangat powerful, namun ada beberapa tantangan:

1. Scaling:

   • Koneksi yang keep-alive membutuhkan lebih banyak resource dibanding request-response.
   • Gunakan WebSocket server yang scalable (misal, Redis sebagai pub/sub backend).

2. Authentication:

   • Pastikan proses otentikasi tetap berjalan setiap ada “subscribe” connection.
   • Implement forbidden handling secara real-time.

3. Resource cleanup:

   • Jangan lupa handle disconnect, otherwise memory leak sangat mudah terjadi.

4. Fallback:

   • Kadang koneksi WebSocket tidak didukung environment tertentu. Sediakan fallback (mis: polling).

Kapan Harus Pakai Subscription?

Gunakan subscription bila butuh trigger real-time. Untuk data yang jarang berubah, query/mutation lebih efisien.

Penutup

GraphQL subscription adalah senjata ampuh untuk membawa pengalaman real-time ke aplikasi modernmu, mulai dari chat, monitoring, hingga notification system. Dengan mengetahui kapan harus digunakan dan bagaimana implementasinya, kamu akan lebih percaya diri membangun aplikasi yang immersive dan responsive.

Semoga artikel ini membantumu menambah pemahaman, dan jangan ragu bereksperimen dengan GraphQL subscription di project berikutnya!

Referensi:

• Apollo GraphQL - Subscriptions
• GraphQL Official - Subscriptions