Panduan Implementasi Apollo Client pada React

Apa Itu Apollo Client?

Apollo Client adalah pustaka manajemen state komprehensif untuk JavaScript yang memungkinkan Anda mengelola data lokal dan remote dengan GraphQL. Dalam ekosistem React, Apollo Client berfungsi sebagai lapisan data yang menghubungkan antarmuka pengguna (UI) dengan server GraphQL, menangani caching, pengambilan data (fetching), dan pembaruan state secara otomatis.

Instalasi dan Konfigurasi Dasar

Untuk memulai, Anda memerlukan paket utama @apollo/client dan graphql. Instalasi dapat dilakukan melalui manajer paket npm atau yarn.

npm install @apollo/client graphql

Setelah terinstal, langkah pertama adalah menginisialisasi ApolloClient dan membungkus aplikasi Anda dengan ApolloProvider agar data dapat diakses oleh seluruh komponen.

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

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

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

Fitur Utama Apollo Client

Mengambil Data dengan useQuery

Hook useQuery adalah cara standar untuk mengambil data. Apollo Client secara otomatis menangani status loading, error, dan data.

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

const GET_DATA = gql`
  query GetData {
    users {
      id
      name
    }
  }
`;

function MyComponent() {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return data.users.map(({ id, name }) => <div key={id}>{name}</div>);
}

Tips Troubleshooting Lapangan

• Cache Invalidation: Jika data tidak terupdate setelah mutasi, pastikan Anda menggunakan refetchQueries atau memperbarui cache secara manual menggunakan cache.modify.
• Network Errors: Selalu periksa konsol browser untuk melihat detail error GraphQL. Gunakan errorPolicy: 'all' pada konfigurasi query jika Anda ingin menangani error parsial.
• Fragment Colocation: Gunakan GraphQL Fragments untuk memecah query besar menjadi bagian-bagian kecil yang dapat digunakan kembali di komponen anak.