83 Menggunakan Apollo Client di Frontend
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
1npm install @apollo/client graphql2. Konfigurasi ApolloClient
Pada aplikasi React, biasanya setup dilakukan di file App.js atau di entry file.
1// src/apolloClient.js
2import { ApolloClient, InMemoryCache } from "@apollo/client";
3
4const client = new ApolloClient({
5 uri: "https://api.example.com/graphql", // Ganti dengan endpoint GraphQL Anda
6 cache: new InMemoryCache(),
7});
8
9export default client;Lalu, hubungkan ApolloProvider di root aplikasi:
1// src/index.js
2import React from "react";
3import ReactDOM from "react-dom";
4import { ApolloProvider } from "@apollo/client";
5import client from "./apolloClient";
6import App from "./App";
7
8ReactDOM.render(
9 <ApolloProvider client={client}>
10 <App />
11 </ApolloProvider>,
12 document.getElementById("root")
13);Query Data dengan Apollo Client
Misal kita punya GraphQL query berikut:
1query GetUsers {
2 users {
3 id
4 name
5 email
6 }
7}Implementasikan di React component:
1import { gql, useQuery } from "@apollo/client";
2
3const GET_USERS = gql`
4 query GetUsers {
5 users {
6 id
7 name
8 email
9 }
10 }
11`;
12
13function UserList() {
14 const { loading, error, data } = useQuery(GET_USERS);
15
16 if (loading) return <p>Loading...</p>;
17 if (error) return <p>Error: {error.message}</p>;
18
19 return (
20 <ul>
21 {data.users.map(user => (
22 <li key={user.id}>
23 {user.name} ({user.email})
24 </li>
25 ))}
26 </ul>
27 );
28}Simulasi Output
| id | name | |
|---|---|---|
| 1 | Agung | agung@domain.com |
| 2 | Wulan | wulan@domain.com |
Component akan auto-update jika cache berubah, misal setelah mutation.
Melakukan Mutation: Menambah Data
Misal schema mutation:
1mutation AddUser($name: String!, $email: String!) {
2 addUser(name: $name, email: $email) {
3 id
4 name
5 email
6 }
7}Integrasi dengan React:
1import { gql, useMutation } from "@apollo/client";
2import { useState } from "react";
3
4const ADD_USER = gql`
5 mutation AddUser($name: String!, $email: String!) {
6 addUser(name: $name, email: $email) {
7 id
8 name
9 email
10 }
11 }
12`;
13
14function AddUserForm() {
15 const [name, setName] = useState("");
16 const [email, setEmail] = useState("");
17 const [addUser, { loading, error }] = useMutation(ADD_USER, {
18 // Update cache setelah mutation berhasil
19 update(cache, { data: { addUser } }) {
20 cache.modify({
21 fields: {
22 users(existingUsers = []) {
23 const newUserRef = cache.writeFragment({
24 data: addUser,
25 fragment: gql`
26 fragment NewUser on User {
27 id
28 name
29 email
30 }
31 `,
32 });
33 return [...existingUsers, newUserRef];
34 },
35 },
36 });
37 },
38 });
39
40 const handleSubmit = e => {
41 e.preventDefault();
42 addUser({ variables: { name, email } });
43 };
44
45 return (
46 <form onSubmit={handleSubmit}>
47 <input value={name} onChange={e => setName(e.target.value)} placeholder="Name" />
48 <input value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" />
49 <button type="submit" disabled={loading}>Add User</button>
50 {error && <p>Error: {error.message}</p>}
51 </form>
52 );
53}Skenario: Error Handling & Loading
Apollo membantu dev menangani loading dan error state secara idiomatik.
1const { loading, error, data } = useQuery(GET_USERS);
2
3if (loading) return <Spinner />;
4if (error) return <Alert>{error.message}</Alert>;Table Perbandingan: Apollo Client vs Fetch API
| Fitur | Apollo Client | Fetch API |
|---|---|---|
| Otomatis Cache | Ya | Tidak |
| Query Builder | Ya (GQL) | Manual |
| Realtime | Ya (Subscription) | Tidak native |
| Pagination | Mudah (Relay/Cache) | Manual |
| Error Handling | Terstruktur (Hooks) | Manual |
Studi Kasus Singkat: Realtime Subscription
Misal ingin listen data real-time:
1import { gql, useSubscription } from "@apollo/client";
2
3const USER_ADDED = gql`
4 subscription OnUserAdded {
5 userAdded {
6 id
7 name
8 email
9 }
10 }
11`;
12
13function UserAddedListener() {
14 const { data, loading } = useSubscription(USER_ADDED);
15
16 if (loading) return null;
17 return <p>User baru: {data.userAdded.name}</p>;
18}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.
Referensi: