Dalam era aplikasi modern, pola komunikasi antara frontend–backend makin kompleks. Aplikasi butuh data yang sangat spesifik, tetapi API REST sering kali overfetching (data kebanyakan) atau underfetching (data kurang). Di sinilah GraphQL hadir sebagai solusi.

Artikel ini membahas bagaimana GraphQL diimplementasikan dengan Hono (server super ringan berbasis JavaScript/TypeScript) dan dikonsumsi oleh React sebagai frontend.

---

1. Mengapa GraphQL?

GraphQL memberikan beberapa keuntungan:

1. Fleksibilitas Query

Frontend bisa meminta tepat data yang dibutuhkan:

query {
  user(id: 1) {
    name
    email
  }
}

REST biasanya mengembalikan seluruh objek.

2. Tidak Overfetching & Underfetching

GraphQL menyelesaikan masalah API REST yang terlalu banyak atau terlalu sedikit memberikan data.

3. Satu Endpoint untuk Semua

REST biasanya banyak endpoint:

• /users

• /users/:id

• /posts?user_id=1

• DLL

GraphQL hanya punya satu endpoint:

POST /graphql

4. Strongly Typed

Schema didefinisikan secara jelas. Ini memberikan predictability, validasi otomatis, dan integrasi tooling yang sangat kuat.

---

2. Implementasi GraphQL di Hono

Hono terkenal karena:

• cepat,

• sederhana,

• sangat cocok untuk edge dan server ringan,

• akses TypeScript yang kuat.

Untuk GraphQL, kita bisa menggunakan:

• GraphQL Yoga atau

• graphql-http

Berikut contoh menggunakan GraphQL Yoga karena paling stabil dan ramah TypeScript.

---

Contoh Struktur Folder

/src
  ├─ index.ts
  ├─ schema.ts
  ├─ resolvers.ts
  ├─ server.ts

---

Schema GraphQL

schema.ts

import { createSchema } from 'graphql-yoga';

export const schema = createSchema({
  typeDefs: /* GraphQL */ `
    type User {
      id: ID!
      name: String!
      email: String!
    }

    type Query {
      users: [User!]!
      user(id: ID!): User
    }
  `,
  resolvers: {
    Query: {
      users: () => {
        return [
          { id: 1, name: "Ariska", email: "ariska@example.com" },
        ];
      },
      user: (_, { id }) => {
        return { id, name: "Ariska", email: "ariska@example.com" };
      },
    },
  },
});

---

Server Hono + Yoga

server.ts

import { Hono } from 'hono';
import { createYoga } from 'graphql-yoga';
import { schema } from './schema';

const app = new Hono();

const yoga = createYoga({
  schema,
  graphqlEndpoint: '/graphql',
});

app.use('/graphql', async (c) => {
  return yoga.handleNodeRequest(c.req.raw);
});

export default app;

---

Menjalankan Server

index.ts

import app from './server';

export default {
  port: 3000,
  fetch: app.fetch,
};

Jika Anda menggunakan Bun:

bun run index.ts

Jika menggunakan Node:

node --loader ts-node/esm index.ts

---

3. Konsumsi GraphQL dengan React

Sekarang kita masuk ke frontend.

React dapat menggunakan GraphQL melalui beberapa cara:

• Apollo Client (paling populer)

• urql (lebih ringan dan simple)

• graphql-request (super minimalis)

Untuk aplikasi modern ringan, kita gunakan graphql-request agar tetap simple.

---

Install di React

npm install graphql-request

---

Membuat Client GraphQL

graphql/client.ts

import { GraphQLClient } from 'graphql-request';

export const client = new GraphQLClient("http://localhost:3000/graphql");

---

React: Fetch Data Users

App.jsx

import { useEffect, useState } from "react";
import { client } from "./graphql/client";

const QUERY = `
  query {
    users {
      id
      name
      email
    }
  }
`;

export default function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    client.request(QUERY).then((data) => setUsers(data.users));
  }, []);

  return (
    <div>
      <h1>Daftar Pengguna</h1>
      <ul>
        {users.map((u) => (
          <li key={u.id}>{u.name} – {u.email}</li>
        ))}
      </ul>
    </div>
  );
}

Frontend akan menampilkan data dari GraphQL pada Hono.

---

4. Alur Data: Bagaimana Semuanya Bekerja?

1. React mengirim GraphQL query ke backend
   → format JSON via POST /graphql

2. Hono menerima request
   → meneruskan ke GraphQL Yoga

3. Yoga menjalankan resolver
   → sesuai schema dan logika bisnis

4. Yoga mengembalikan JSON data ke React

5. React menampilkan ke UI

Alurnya sederhana, fleksibel, dan predictable.

---

5. Kapan Menggunakan GraphQL dengan Hono + React?

Gunakan GraphQL jika:

✔ Data sering berubah bentuk tergantung halaman
✔ Menghindari banyak endpoint REST
✔ Butuh dokumentasi otomatis
✔ Banyak relasi kompleks
✔ Memerlukan query yang bisa dikustom

Gunakan REST jika:

✔ Aplikasi sederhana
✔ Tidak banyak dependensi antar data
✔ Performanya harus sangat ringan dan cepat
✔ Dashboard internal yang tidak berubah-ubah

---

6. Kelebihan Kombinasi Hono + GraphQL + React

1. Ultra Lightweight

Hono + Yoga tetap jauh lebih ringan dibanding Express + Apollo.

2. Edge Friendly

Hono bisa berjalan di:

• Bun

• Node

• Deno

• Cloudflare Workers

• Vercel Edge

3. TypeScript First

Schema GraphQL bisa menghasilkan types otomatis.

4. Developer Experience Tinggi

Frontend bisa explore API via GraphiQL langsung.

---

7. Kesimpulan

GraphQL pada Hono dan React adalah kombinasi modern yang:

• cepat,

• ringan,

• sangat fleksibel,

• cocok untuk aplikasi multi-halaman atau mobile,

• memudahkan scaling frontend tanpa harus ubah banyak di backend.

Jika Anda sedang mengembangkan dashboard, ecommerce, SaaS, atau aplikasi internal—kombinasi ini termasuk yang terbaik.