Menggunakan GraphQL dengan Apollo Client di Aplikasi Web

Seiring meningkatnya kebutuhan aplikasi web interaktif, GraphQL muncul sebagai alternatif REST API untuk query data fleksibel dan efisien.
Apollo Client adalah library populer untuk menghubungkan aplikasi front-end dengan GraphQL API.

Artikel ini membahas cara menggunakan GraphQL dengan Apollo Client, termasuk setup, query, mutation, caching, dan best practice untuk developer modern.

🔍 Apa Itu GraphQL?

GraphQL adalah bahasa query untuk API yang dikembangkan oleh Facebook:

• Mengizinkan client menentukan data yang dibutuhkan

• Mengurangi over-fetching / under-fetching data

• Mendukung query, mutation, dan subscription

Keunggulan GraphQL dibanding REST API:

• Single endpoint → /graphql vs banyak endpoint REST

• Flexible query → client pilih fields yang dibutuhkan

• Real-time subscription → update data otomatis

⚙️ Apa Itu Apollo Client?

Apollo Client adalah library JavaScript untuk:

• Query & mutate data dari GraphQL API

• Manage state client-side

• Caching otomatis → meningkatkan performa

• Integrasi mudah dengan React, Vue, Angular, dan Next.js

Fitur utama:

• Query & Mutation → ambil / ubah data

• Local State Management → menggantikan Redux untuk state tertentu

• Cache Management → optimasi network requests

Setup Apollo Client di React

1. Install Package

npm install @apollo/client graphql

2. Setup ApolloProvider

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: 'https://example.com/graphql',
  cache: new InMemoryCache()
});

function Root() {
  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
}

export default Root;

⚡ Query Data dengan Apollo Client

Contoh Query

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

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

function Users() {
  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>
  );
}

Mutation Data

Contoh Mutation

import { gql, useMutation } from '@apollo/client';

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

function AddUserForm() {
  const [addUser, { data }] = useMutation(ADD_USER);

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

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" placeholder="Email" required />
      <button type="submit">Add User</button>
    </form>
  );
}

⚡ Caching & Optimasi Apollo Client

1. InMemoryCache

   • Menyimpan hasil query di memory → mengurangi request ke server

   • Cache normalization → update data secara otomatis

2. Refetch / Polling

   • refetch() → update data secara manual

   • Polling interval → query berkala untuk data real-time

3. Optimistic UI

   • Update UI sebelum server respon → UX lebih responsif

   • Cocok untuk form submit, like button, dll

Tips Developer Indonesia

• Gunakan Fragment GraphQL untuk query modular → reuse fields

• Pahami query complexity → hindari request terlalu besar

• Integrasikan Apollo DevTools → debugging query & cache

• Gabungkan dengan TypeScript → type-safe data fetching

• Gunakan subscription untuk fitur real-time → chat, dashboard, notifikasi

Contoh Aplikasi Modern

1. Dashboard Admin

   • Query data user, order, analytics → update real-time

   • Optimasi caching → load cepat

2. E-Commerce SPA

   • Product list → filter, sort, pagination query

   • Mutation → add-to-cart, checkout

3. Social Media

   • Post, like, comment → subscription real-time

   • Optimistic UI untuk interaksi cepat

📈 Kesimpulan

GraphQL + Apollo Client adalah kombinasi powerful untuk aplikasi web modern:

• Query fleksibel → ambil data sesuai kebutuhan

• Caching otomatis → efisiensi jaringan & performa

• Mutation & subscription → interaktif & real-time

• Integrasi mudah → React, Vue, Angular

🔥 Developer modern Indonesia bisa membangun aplikasi web cepat, scalable, dan interaktif dengan GraphQL dan Apollo Client.