82 Menyambungkan React App dengan graphql-go Backend

82 Menyambungkan React App dengan graphql-go Backend
Implementasi Praktis API GraphQL di Era Modern Frontend

Di era aplikasi web modern, komunikasi antara frontend dan backend menjadi salah satu aspek kritis yang menentukan keberhasilan integrasi teknologi. React, sebagai salah satu framework frontend paling populer, sering kali dipasangkan dengan berbagai backend, termasuk REST maupun GraphQL. Dalam artikel ini, saya akan membahas secara praktis bagaimana cara menyambungkan React App dengan backend GraphQL yang dibuat menggunakan graphql-go, library GraphQL untuk bahasa Go.

Mengapa GraphQL?

Sebelum masuk ke implementasi, mari ulas sejenak: mengapa GraphQL? Jika Anda sudah nyaman dengan REST API, GraphQL menawarkan beberapa keuntungan penting:

• Single Endpoint
  Tidak perlu membuat banyak endpoint, satu endpoint cukup untuk semua kebutuhan query/mutation.

• Flexible Query
  Client memutuskan data apa saja yang ingin diambil, tanpa dibatasi bentuk response dari API.

• Efisien
  Mengurangi over-fetching dan under-fetching data.

Dengan kombinasi React dan GraphQL, developer frontend bisa lebih produktif, sekaligus meminimalisir beban data di jaringan.

Arsitektur Sederhana

Sebelum coding, mari visualisasikan arsitektur sederhana kita. Berikut diagram alur komunikasi antara React App dan graphql-go backend:

graph TD
    A[User] --> B[React App]
    B -- Query/Mutation --> C[GraphQL Endpoint (Go Server)]
    C -- data response --> B

1. Membuat Backend GraphQL dengan Go

Instalasi

Siapkan project Go, install package yang dibutuhkan:

go get github.com/graphql-go/graphql
go get github.com/graphql-go/handler

Skema GraphQL Sederhana

Bayangkan kita membuat aplikasi Todo List sederhana. Beginilah tipe data dan resolver GraphQL-nya.

package main

import (
    "encoding/json"
    "net/http"
    "github.com/graphql-go/graphql"
    "github.com/graphql-go/handler"
)

// Simpanan Dummy data
var todos = []map[string]interface{}{
    {"id": "1", "content": "Belajar GraphQL", "completed": false},
}

func main() {
    // Define Todo Type
    todoType := graphql.NewObject(graphql.ObjectConfig{
        Name: "Todo",
        Fields: graphql.Fields{
            "id":        &graphql.Field{Type: graphql.String},
            "content":   &graphql.Field{Type: graphql.String},
            "completed": &graphql.Field{Type: graphql.Boolean},
        },
    })

    // Query: Ambil semua Todo
    fields := graphql.Fields{
        "todos": &graphql.Field{
            Type: graphql.NewList(todoType),
            Resolve: func(p graphql.ResolveParams) (interface{}, error) {
                return todos, nil
            },
        },
    }

    rootQuery := graphql.ObjectConfig{Name: "RootQuery", Fields: fields}
    schemaConfig := graphql.SchemaConfig{Query: graphql.NewObject(rootQuery)}
    schema, err := graphql.NewSchema(schemaConfig)
    if err != nil {
        panic(err)
    }

    // Buat GraphQL handler
    h := handler.New(&handler.Config{
        Schema: &schema,
        Pretty: true,
        GraphiQL: true,
    })

    http.Handle("/graphql", h)
    http.ListenAndServe(":8080", nil)
}

Penjelasan:

• TODO Type: Mendefinisikan struktur data Todo.
• Query “todos”: Mengembalikan list todo.
• Menggunakan handler untuk endpoint /graphql, sehingga bisa dicoba langsung via GraphiQL.

2. Membuat React App yang Terkoneksi ke Backend GraphQL

Kita akan gunakan Apollo Client sebagai GraphQL client untuk React, karena stabil, terkenal, dan dokumentasinya lengkap.

Installasi Apollo Client

npm install @apollo/client graphql

Membuat Query Client

// src/apollo.js
import { ApolloClient, InMemoryCache } from '@apollo/client';

export const client = new ApolloClient({
  uri: 'http://localhost:8080/graphql',
  cache: new InMemoryCache(),
});

Membuat Komponen Fetch Todo

import React from 'react';
import { ApolloProvider, useQuery, gql } from '@apollo/client';
import { client } from './apollo';

const GET_TODOS = gql`
  query GetTodos {
    todos {
      id
      content
      completed
    }
  }
`;

function TodoList() {
  const { loading, error, data } = useQuery(GET_TODOS);

  if (loading) return <p>Memuat...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.todos.map((todo) => (
        <li key={todo.id}>
          {todo.content} {todo.completed ? "✔️" : ""}
        </li>
      ))}
    </ul>
  );
}

function App() {
  return (
    <ApolloProvider client={client}>
      <h1>Todo List</h1>
      <TodoList />
    </ApolloProvider>
  );
}

export default App;

3. Simulasi End-to-End

Mari tinjau flow:

1. Frontend (React) mengirim Query ke /graphql pada Go server (lihat query GET_TODOS di atas).
2. Backend (Go) menerima query, menjalankan resolver, dan mengirim data.
3. Apollo Client menerima data, komponen React me-render UI.

4. Tabel Perbandingan: REST vs GraphQL

5. TroubleShooting & Tips

• CORS
  Saat frontend dan backend berjalan di port berbeda, aktifkan CORS di backend Go.

  // Tambahkan middleware sederhana untuk CORS
  http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
      w.Header().Set("Access-Control-Allow-Origin", "*")
      if r.Method == "OPTIONS" {
          w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
          w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
          return
      }
      http.DefaultServeMux.ServeHTTP(w, r)
  })
  

• Jangan lupa jalankan server Go sebelum npm start React App.

• Gunakan GraphiQL di browser untuk eksplorasi & debugging query.

6. Pengembangan Lanjut

• Menambah Mutation:
  Definisikan mutation di backend, kolaborasi dengan Apollo di frontend.
• Auth:
  Integrasikan JWT atau mekanisme OAuth untuk authentikasi.
• Deployment:
  Gunakan Docker/docker-compose agar dev/prod lebih mudah.

Penutup

Menyambungkan React App dengan backend graphql-go itu relatif straight-forward, dan sangat powerful untuk aplikasi modern. Kombinasi keduanya cocok untuk tim kecil hingga enterprise dengan kebutuhan data fleksibel.

Kedepannya, GraphQL akan semakin populer seiring tren frontend-driven development makin diadopsi.
Selamat mencoba, semoga bermanfaat untuk project Anda berikutnya!

Referensi

• https://graphql.org/
• https://github.com/graphql-go/graphql
• https://www.apollographql.com/docs/react/

Diskusi dan pertanyaan?
Silakan tulis di kolom komentar! 👋