10 Menyiapkan Playground GraphQL untuk Testing Query

GraphQL mulai menjadi standar de facto dalam mengelola data API karena keunggulannya dalam fleksibilitas query dan efisiensi data. Namun, proses testing query kadang menjadi tantangan tersendiri, terutama jika Anda baru terjun ke dunia GraphQL atau belum mengetahui tool yang tepat. Playground GraphQL adalah solusi favorit banyak engineer untuk eksplorasi dan pengujian query sebelum masuk tahap implementasi production code. Pada artikel ini, kita akan melalui 10 langkah praktis menyiapkan Playground GraphQL agar proses testing query menjadi seamless dan efisien.

1. Apa Itu Playground GraphQL?

Playground GraphQL adalah antarmuka interaktif berbasis web yang memungkinkan developer untuk melakukan query, mutation, dan bahkan subscription pada API GraphQL. Ia ibarat “Postman”-nya ekosistem GraphQL, tapi lebih interaktif dan menyenangkan dipakai untuk eksperimen query.

Beberapa fitur utamanya:

• Dokumentasi schema otomatis
• Otocompletion Syntax
• Support header kustom (misal, Authorization)
• History query & variable simulasi
• Berbagai environment endpoint

Tool populer untuk Playground antara lain: GraphQL Playground (original), Altair, Apollo Sandbox, dan Insomnia.

2. Instalasi Playground

Untuk development lokal, ada dua opsi utama:

• Menggunakan web-app pihak ketiga seperti https://www.graphqlbin.com/ , https://www.apollographql.com/sandbox/
• Menempelkan middleware Playground pada server lokal Anda

Contoh penambahan Playground pada Express.js:

 1const express = require('express');
 2const { graphqlHTTP } = require('express-graphql');
 3const { buildSchema } = require('graphql');
 4const { expressPlayground } = require('graphql-playground-middleware');
 5
 6const schema = buildSchema(`
 7  type Query {
 8    hello: String
 9  }
10`);
11
12const root = {
13  hello: () => 'Hello world!'
14};
15
16const app = express();
17
18app.use('/graphql', graphqlHTTP({
19  schema: schema,
20  rootValue: root,
21  graphiql: false
22}));
23
24app.get('/playground', expressPlayground({ endpoint: '/graphql' }));
25
26app.listen(4000, () => console.log('Server berjalan di http://localhost:4000/playground'));

3. Koneksi ke Playground

Setelah instalasi, buka browser ke endpoint Playground, misal http://localhost:4000/playground. Anda akan melihat UI interaktif seperti berikut:

Di sisi kiri, Anda bisa menuliskan query. Hasil response akan muncul di kanan.

4. Menyelami Dokumentasi Otomatis

Salah satu nilai tambah utama Playground adalah dokumentasi live berbasis schema. Cukup klik ikon “Docs” dan akan muncul pohon schema, lengkap dengan tipe data, field, dan deskripsi.

Simulasi Dokumentasi:

Fitur ini sangat membantu saat mengeksplorasi API baru tanpa harus membaca dokumen tangan.

5. Percobaan Query Dasar

Mari mulai dengan menulis query sederhana:

1query {
2  hello
3}

Respon yang Diharapkan:

1{
2  "data": {
3    "hello": "Hello world!"
4  }
5}

Perhatikan auto-complete field dan type check secara real time. Ini akan menghemat waktu debugging typo.

6. Menambahkan Variable pada Query

Playground mengizinkan penggunaan variable untuk simulasi skenario dynamic.

1query SayHello($name: String!) {
2  hello(name: $name)
3}

1{
2  "name": "Budi"
3}

7. Simulasi Authorization

Seringkali API GraphQL butuh header Authorization. Playground memudahkan penambahan header lewat icon HTTP HEADERS di kanan atas.

1{
2  "Authorization": "Bearer YOUR_SECRET_TOKEN"
3}

Simak diagram alur berikut untuk request ber-header:

sequenceDiagram
    participant U as User
    participant P as Playground
    participant S as GraphQL Server

    U->>P: Menulis query & masukkan token di HTTP HEADERS
    P->>S: Mengirim query main endpoint + Authorization header
    S->>P: Validasi token, proses query, kirim response
    P->>U: Tampilkan response di UI

sequenceDiagram
    participant U as User
    participant P as Playground
    participant S as GraphQL Server

    U->>P: Menulis query & masukkan token di HTTP HEADERS
    P->>S: Mengirim query main endpoint + Authorization header
    S->>P: Validasi token, proses query, kirim response
    P->>U: Tampilkan response di UI

8. Testing Mutation dan Error Handling

Mutasi tak kalah penting dari query.

1mutation {
2  createUser(username: "budi", password: "pass123") {
3    id
4    username
5  }
6}

Skenario error bisa disimulasikan dengan input salah:

1mutation {
2  createUser(username: "", password: "")
3}

9. Multi-Environment & Mock Data

Anda bisa ganti endpoint Playground dengan environment berbeda, misal staging/production, ataupun menggunakan tool mocking seperti https://mocki.io/ untuk schema palsu.

Tinggal klik di setting, tak perlu restart server.

10. Real Case: Testing Aplikasi

Sebagai penutup, berikut workflow test query sebelum frontend konsumsi:

flowchart TD
    A[Frontend Dev buka Playground]
    B[Menulis query kebutuhan fitur baru]
    C[Mengecek response dan simulasi variable]
    D[Testing dengan header Auth]
    E[Query siap dikonsumsi Frontend]

    A --> B --> C --> D --> E

flowchart TD
    A[Frontend Dev buka Playground]
    B[Menulis query kebutuhan fitur baru]
    C[Mengecek response dan simulasi variable]
    D[Testing dengan header Auth]
    E[Query siap dikonsumsi Frontend]

    A --> B --> C --> D --> E

Langkah ini memastikan integrasi berjalan smooth tanpa API miss, meningkatkan produktivitas tim frontend-backend.

Penutup

Memanfaatkan Playground GraphQL adalah workflow wajib setiap engineer modern saat development dan testing query. Dari eksplorasi schema, simulasi authorization, hingga error testing, semua bisa dilakukan dalam satu UI. Banyak tim engineering bahkan membuat query Playground sebagai bagian automatisasi dokumentasi dan regression test sebelum rilis API ke aplikasi production.

Jadikan Playground ini sebagai “laboratorium” mini sebelum query GraphQL benar-benar dikonsumsi aplikasi — karena debugging terbaik adalah yang dilakukan di level playground, bukan di production!