Belajar GraphQL - Building Collaborative Real-Time Apps

#Pendahuluan

Fitur kolaboratif — dokumen yang diedit bersama, chat, dan dashboard langsung — adalah pembeda aplikasi modern. Episode 38 menggabungkan subscriptions (episode 16) dengan konsep live queries dan penanganan konflik untuk membangun aplikasi kolaboratif nyata.

Kita akan membahas live queries, fitur presence, conflict resolution dengan OT dan CRDT, lalu menutup dengan contoh implementasi yang konkret.

#Live Queries

#Konsep dan Direktif @live

Live query berbeda dari subscription: subscription membutuhkan definisi operasi khusus, sementara live query membuat query biasa menjadi real-time — ketika data berubah, query dijalankan ulang otomatis. Direktif @live menandai query yang harus hidup:

query DashboardStats @live {
  activeUsers: Int!
  ordersToday: Int!
}

Implementasi live query butuh sinkronisasi dengan perubahan data — biasanya lewat integrasi database (misalnya Hasura live queries) atau library yang memonitor perubahan. Use case: dashboard metrik, collaborative editing, dan daftar yang selalu segar.

#Pertimbangan Performa

Live query berjalan terus-menerus; tanpa hati-hati, ini bisa membebani server. Batasi frekuensi update, batasi jumlah live query per client, dan gabungkan beberapa query menjadi satu agar efisien.

#Presence Features

#Status Online dan Cursor Positions

Presence memberi tahu pengguna siapa yang sedang aktif. Data presence bersifat sangat real-time dan per-klien:

type Subscription {
  presenceUpdated(roomId: ID!): [Presence!]!
}
 
type Presence {
  userId: ID!
  status: PresenceStatus!
  cursorPosition: CursorPosition
}
 
type CursorPosition {
  x: Float!
  y: Float!
}

Implementasinya: setiap client mem-publish statusnya (lewat mutation atau direktif yang memantau aktivitas), dan subscription presenceUpdated mengirimkan daftar user aktif. Cursor positions untuk kolaborasi diedit dikirim berfrekuensi tinggi — batasi pengiriman (misalnya 10 kali per detik) dan lakukan interpolasi di client.

#Real-Time Indicators

Gabungkan presence dengan active typing indicators: user yang sedang mengetik ditandai lewat peristiwa yang dipublish ke topic tertentu. Ini memberi nuansa "sedang diketik..." yang familiar di aplikasi chat.

#Conflict Resolution

#Operational Transformation (OT)

Saat dua pengguna mengedit dokumen yang sama secara bersamaan, muncul konflik. Operational Transformation (OT) menyelesaikannya dengan mengubah (mentransformasi) operasi agar hasil edit konsisten terlepas dari urutan tibanya:

user A: insert("a", 0) -> transform -> apply
user B: insert("b", 2) -> transform -> apply

OT adalah teknik di balik Google Docs dan banyak editor kolaboratif. Implementasinya rumit, dan dalam praktiknya kalian lebih sering memakai library siap pakai seperti Yjs.

#CRDT dan Merge Strategies

CRDT (Conflict-free Replicated Data Type) adalah pendekatan modern: setiap node menghitung hasil yang sama tanpa koordinasi pusat, sehingga konflik teratasi otomatis. Library Yjs adalah implementasi populer; install dengan npm install yjs y-websocket:

Dokumen kolaboratif dengan Yjs

import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";
 
const doc = new Y.Doc();
const provider = new WebsocketProvider("ws://localhost:1234", "room-1", doc);
const text = doc.getText("content");
 
text.insert(0, "Halo bersama!");

Untuk kasus sederhana (konfigurasi, status), last-write-wins cukup: nilai terakhir yang menang. Pilih strategi sesuai sifat data: teks kolaboratif butuh CRDT, data non-konflik cukup last-write-wins.

#Implementation Examples

#Collaborative Editing dan Real-Time Chat

Collaborative document editing: gunakan Yjs untuk teks, dan GraphQL subscription untuk presence dan daftar dokumen. Setiap dokumen punya topik subscription sendiri (documentUpdated(id)), dan perubahan teks disinkronkan lewat Yjs terpisah dari GraphQL — keduanya berjalan berdampingan.

Real-time chat: sudah kalian bangun di episode 16. Tambahkan fitur kolaboratif: read receipts, typing indicators (presence), dan moderation real-time yang memfilter pesan sebelum dipublish.

#Multiplayer dan Live Dashboards

Untuk multiplayer, terapkan pola yang sama: subscription per room, state game di Redis (stateless server), dan pubsub per topik. Untuk live dashboard, kombinasi live query untuk metrik agregat dan subscription untuk perubahan granular memberikan tampilan yang selalu segar tanpa polling.

#Penutup

Inti yang harus dibawa pulang:

• Live query membuat query biasa real-time lewat direktif @live.
• Presence melacak status online dan cursor positions lewat subscription.
• OT dan CRDT menyelesaikan konflik edit bersamaan; Yjs adalah implementasi praktis.
• Last-write-wins cukup untuk data non-konflik.
• Collaborative editing memisahkan sinkronisasi teks (Yjs) dari metadata (GraphQL).
• Batasi frekuensi data real-time agar server tidak terbebani.

Di episode 39 selanjutnya kalian akan mempelajari GraphQL dengan Blockchain dan Web3 — The Graph Protocol untuk indexing on-chain data, integrasi smart contract dengan ethers.js, querying NFT metadata dengan OpenSea dan IPFS, hingga aplikasi DeFi dengan price feeds. GraphQL kalian akan menyentuh dunia blockchain!