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:
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: `
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?
React mengirim GraphQL query ke backend
→ format JSON via POST /graphql
Hono menerima request
→ meneruskan ke GraphQL Yoga
Yoga menjalankan resolver
→ sesuai schema dan logika bisnis
Yoga mengembalikan JSON data ke React
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.
