tutorial

83 Menggunakan Apollo Client di Frontend

  • avatar
    by Ihsan
  • 21 Sep 2025
  • 4 menit

83 Menggunakan Apollo Client di Frontend: Panduan Komprehensif untuk Integrasi GraphQL

GraphQL semakin populer sebagai solusi modern pengambilan data di aplikasi frontend. Tidak seperti REST API yang memerlukan banyak endpoint, GraphQL memungkinkan kita mengambil data secara lebih fleksibel dan efisien. Di dunia frontend, Apollo Client adalah salah satu library de-facto untuk menghubungkan aplikasi React (atau framework modern lain) dengan GraphQL API. Pada artikel ini, saya akan membahas secara praktikal cara menggunakan Apollo Client di frontend: mulai setup hingga implementasi query dan mutation, lengkap dengan contoh kode, simulasi, dan diagram flow.

Mengapa Memilih Apollo Client?

Sebagai seorang engineer yang pernah bergelut dengan fetch, ajax dan REST API, saya merasakan perbedaan besar ketika memakai Apollo Client:

  • Flexible Data Fetching: Kita bisa tentukan data apa saja yg dibutuhkan dari frontend, tanpa loading data berlebih.
  • Caching Otomatis: State data otomatis tersinkronisasi dan efisien lewat advanced caching.
  • Error Handling Terpusat: Apollo menyediakan penanganan error yg jelas dan terstruktur.
  • Support untuk Real-time: Subscription built-in!
  • Integrasi dengan React Hooks: Experience pengembangan lebih idiomatik dan modern.

Diagram Alur Penggunaan Apollo Client

Untuk memahami workflow-nya, berikut flow data fetching menggunakan Apollo Client pada aplikasi frontend:

flowchart TD
    A[User Action on UI] --> B[React Component Trigger Query/Mutation]
    B --> C[useQuery/useMutation Hook]
    C --> D[Apollo Client]
    D --> E[GraphQL Server]
    E --> F[Response Data]
    F --> G[Apollo Cache Update]
    G --> H[Component Rendered with Data]

Persiapan: Installasi dan Konfigurasi

Dalam contoh ini, saya akan memakai React sebagai basis frontend.

1. Instalasi Library

npm install @apollo/client graphql

2. Konfigurasi ApolloClient

Pada aplikasi React, biasanya setup dilakukan di file App.js atau di entry file.

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

const client = new ApolloClient({
  uri: "https://api.example.com/graphql",  // Ganti dengan endpoint GraphQL Anda
  cache: new InMemoryCache(),
});

export default client;

Lalu, hubungkan ApolloProvider di root aplikasi:

// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider } from "@apollo/client";
import client from "./apolloClient";
import App from "./App";

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

Query Data dengan Apollo Client

Misal kita punya GraphQL query berikut:

query GetUsers {
  users {
    id
    name
    email
  }
}

Implementasikan di React component:

import { gql, useQuery } from "@apollo/client";

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);

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

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>
          {user.name} ({user.email})
        </li>
      ))}
    </ul>
  );
}

Simulasi Output

idnameemail
1Agungagung@domain.com
2Wulanwulan@domain.com

Component akan auto-update jika cache berubah, misal setelah mutation.

Melakukan Mutation: Menambah Data

Misal schema mutation:

mutation AddUser($name: String!, $email: String!) {
  addUser(name: $name, email: $email) {
    id
    name
    email
  }
}

Integrasi dengan React:

import { gql, useMutation } from "@apollo/client";
import { useState } from "react";

const ADD_USER = gql`
  mutation AddUser($name: String!, $email: String!) {
    addUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

function AddUserForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [addUser, { loading, error }] = useMutation(ADD_USER, {
    // Update cache setelah mutation berhasil
    update(cache, { data: { addUser } }) {
      cache.modify({
        fields: {
          users(existingUsers = []) {
            const newUserRef = cache.writeFragment({
              data: addUser,
              fragment: gql`
                fragment NewUser on User {
                  id
                  name
                  email
                }
              `,
            });
            return [...existingUsers, newUserRef];
          },
        },
      });
    },
  });

  const handleSubmit = e => {
    e.preventDefault();
    addUser({ variables: { name, email } });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} placeholder="Name" />
      <input value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" />
      <button type="submit" disabled={loading}>Add User</button>
      {error && <p>Error: {error.message}</p>}
    </form>
  );
}

Skenario: Error Handling & Loading

Apollo membantu dev menangani loading dan error state secara idiomatik.

const { loading, error, data } = useQuery(GET_USERS);

if (loading) return <Spinner />;
if (error)   return <Alert>{error.message}</Alert>;

Table Perbandingan: Apollo Client vs Fetch API

FiturApollo ClientFetch API
Otomatis CacheYaTidak
Query BuilderYa (GQL)Manual
RealtimeYa (Subscription)Tidak native
PaginationMudah (Relay/Cache)Manual
Error HandlingTerstruktur (Hooks)Manual

Studi Kasus Singkat: Realtime Subscription

Misal ingin listen data real-time:

import { gql, useSubscription } from "@apollo/client";

const USER_ADDED = gql`
  subscription OnUserAdded {
    userAdded {
      id
      name
      email
    }
  }
`;

function UserAddedListener() {
  const { data, loading } = useSubscription(USER_ADDED);

  if (loading) return null;
  return <p>User baru: {data.userAdded.name}</p>;
}

Kesimpulan

Mengintegrasikan Apollo Client di frontend membawa produktifitas dan struktur pengelolaan data jadi jauh lebih baik. Dengan API yang ergonomis, caching otomatis, error handling terintegrasi, dan support real-time, Apollo Client menjawab kebutuhan aplikasi modern yang kompleks dan demanding. Jika berurusan dengan GraphQL, Apollo Client adalah investasi terbaik untuk codebase frontend Anda.

Catatan: Untuk implementasi lebih jauh, pelajari Advanced Apollo seperti fragment, pagination, optimistic UI, atau schema local state untuk powerful data orchestration di frontend. Selamat bereksplorasi!

Referensi:

Previous post
104. Studi Kasus: Client iOS (Swift) dengan gRPC Go Backend
Next post
105. Studi Kasus: Komunikasi antara Microservice Go dan Java via Protobuf
comments powered by Disqus