9 Membuat HTTP Server Dasar untuk GraphQL Endpoint

Pengantar

GraphQL menjadi standar baru untuk API modern. Banyak developer ingin mencoba atau men-deploy endpoint GraphQL tanpa repot dengan framework berat seperti Apollo Server atau Relay. Kadang kita hanya butuh endpoint sederhana untuk prototipe, mocking backend, atau learning-by-doing. Apapun alasannya, konsep dasarnya sama: kita butuh HTTP server yang mampu menerima request dan merespons dengan data sesuai query GraphQL.

Artikel ini akan membahas cara membangun HTTP server dasar untuk GraphQL menggunakan Node.js dan library graphql-js. Fokus kita bukan pada fancy features, tapi pada konsep dan implementasi core GraphQL endpoint: request masuk lewat HTTP, query diproses, response dikirim balik.

1. Prasyarat

Untuk mengikuti tutorial ini, kamu hanya membutuhkan:

• Pengetahuan dasar JavaScript/Node.js
• Node.js >= v14
• Library graphql dari npm

Installasi GraphQL:

1npm init -y
2npm install graphql

Untuk HTTP server, kita cukup pakai module built-in http dari Node.

2. Struktur Minimalist HTTP Server

Tujuan utama adalah menerima request POST di /graphql, membaca query dari request body, lalu proses dan kirim balik hasilnya. Tidak perlu routing yang rumit.

 1const http = require('http');
 2const { graphql, buildSchema } = require('graphql');
 3
 4// 1. Define schema & resolver
 5const schema = buildSchema(`
 6  type Query {
 7    hello: String
 8  }
 9`);
10const rootValue = {
11  hello: () => 'Hello, world!'
12};
13
14// 2. HTTP server declaration
15const server = http.createServer(async (req, res) => {
16  if (req.method === 'POST' && req.url === '/graphql') {
17    let body = '';
18    req.on('data', chunk => body += chunk);
19    req.on('end', async () => {
20      try {
21        const { query, variables } = JSON.parse(body);
22
23        // 3. Core: GraphQL execution
24        const result = await graphql({
25          schema,
26          source: query,
27          rootValue,
28          variableValues: variables
29        });
30
31        // Response
32        res.writeHead(200, { 'Content-Type': 'application/json' });
33        res.end(JSON.stringify(result));
34      } catch (err) {
35        res.writeHead(400);
36        res.end(JSON.stringify({ errors: [{ message: err.message }] }));
37      }
38    });
39  } else {
40    res.writeHead(404);
41    res.end();
42  }
43});
44
45server.listen(4000, () => {
46  console.log('GraphQL server running at http://localhost:4000/graphql');
47});

3. Bagaimana Flow-nya?

Mari kita visualisasikan alur request-response HTTP untuk endpoint ini dengan diagram mermaid:

sequenceDiagram
    client->>server: POST /graphql {query, variables}
    server->>server: Parse body JSON
    server->>server: graphql({schema, query, rootValue})
    server->>server: Execute resolver
    server->>client: HTTP 200 {data, errors}

sequenceDiagram
    client->>server: POST /graphql {query, variables}
    server->>server: Parse body JSON
    server->>server: graphql({schema, query, rootValue})
    server->>server: Execute resolver
    server->>client: HTTP 200 {data, errors}

Garis besarnya:

1. Client mengirim POST ke endpoint /graphql.
2. Server membaca query dari body (JSON).
3. Eksekusi query menggunakan fungsi graphql.
4. Kirim hasil (data, dan/atau errors) ke client.

4. Simulasi Request

Untuk mencoba endpoint ini, gunakan cURL atau GraphQL client seperti Insomnia/Postman.

1curl -X POST http://localhost:4000/graphql \
2  -H "Content-Type: application/json" \
3  -d '{"query": "{ hello }"}'

Respon yang diharapkan:

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

5. Menambah Query & Parameter

Schema dan resolver bisa dengan mudah dikembangkan. Contoh: menambah query dengan argumen.

1const schema = buildSchema(`
2  type Query {
3    hello(name: String): String
4  }
5`);
6
7const rootValue = {
8  hello: ({ name }) => `Hello, ${name || "world"}!`
9};

Request:

1{
2  "query": "{ hello(name: \"Agus\") }"
3}

Response:

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

6. Menangani Error

Misal query tidak valid:

1{
2  "query": "{ foo }"
3}

Output:

1{
2  "errors": [
3    {
4      "message": "Cannot query field \"foo\" on type \"Query\"."
5    }
6  ]
7}

7. Penjelasan Tabel: Struktur Request & Response

8. Mengembangkan Schema Lebih Jauh

GraphQL mendorong schema yang ekspresif. Berikut contoh schema dan resolver sederhana yang sedikit kompleks.

 1const schema = buildSchema(`
 2  type User {
 3    id: ID
 4    name: String
 5    age: Int
 6  }
 7  type Query {
 8    user(id: ID!): User
 9    users: [User]
10  }
11`);
12
13const users = [
14  { id: "1", name: "Agus", age: 30 },
15  { id: "2", name: "Budi", age: 25 }
16];
17
18const rootValue = {
19  user: ({ id }) => users.find(u => u.id === id),
20  users: () => users
21};

Query:

1{
2  "query": "{ users { name, age } }"
3}

Response:

1{
2  "data": {
3    "users": [
4      { "name": "Agus", "age": 30 },
5      { "name": "Budi", "age": 25 }
6    ]
7  }
8}

9. Saran Produksi & Kesimpulan

HTTP server dasar ini cocok untuk prototyping, POC, atau internal tools. Untuk deployment production, minimal tambahkan:

• Validasi payload dan ukuran body (security)
• Implementasi logging dan error tracking
• Support untuk CORS jika dibutuhkan akses cross-origin
• Rate-limiting bila diakses publik

Namun, core logic tidak berubah banyak: accept query, execute, respond. Kamu bisa embed kode ini di service/worker tanpa banyak overhead.

💡 Kesimpulan

Tanpa framework besar, kita dapat membuat HTTP server GraphQL yang ringan dan mudah dipahami. Mulai dari pemrosesan HTTP request sederhana, parsing, eksekusi query, hingga mengembalikan response. Kunci penting adalah memahami alur dasar GraphQL, tidak hanya menggunakan tool siap pakai.

Referensi

• graphql-js
• GraphQL Spec

Semoga bermanfaat, dan happy hacking dengan GraphQL—dari engineer, untuk engineer!