# GraphQL di Hono dan React: Cara Modern Membangun API yang Cepat & Fleksibel

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:

```graphql
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:

```typescript
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**

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

---

## **Schema GraphQL**

**schema.ts**

```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**

```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**

```ts
import app from './server';

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

Jika Anda menggunakan Bun:

```typescript
bun run index.ts
```

Jika menggunakan Node:

```typescript
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**

```typescript
npm install graphql-request
```

---

## **Membuat Client GraphQL**

**graphql/client.ts**

```ts
import { GraphQLClient } from 'graphql-request';

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

---

## **React: Fetch Data Users**

**App.jsx**

```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.