GraphQL dengan Apollo Client: Panduan Lengkap

# Definisi tipe untuk User
type User {
  id: ID!
  nama: String!
  email: String!
  artikel: [Artikel!]!
  createdAt: String
}

# Definisi tipe untuk Artikel
type Artikel {
  id: ID!
  judul: String!
  konten: String!
  penulis: User!
  tag: [String!]!
  dipublikasikan: Boolean!
  views: Int
}

# Query root type
type Query {
  users: [User!]!
  user(id: ID!): User
  artikel(id: ID!): Artikel
  semuaArtikel(limit: Int, offset: Int): [Artikel!]!
}

# Mutation root type
type Mutation {
  createUser(nama: String!, email: String!): User!
  updateArtikel(id: ID!, judul: String, konten: String): Artikel!
  deleteArtikel(id: ID!): Boolean!
}

# Subscription root type
type Subscription {
  artikelBaru: Artikel!
  userOnline: User!
}

# Instal Apollo Client dan dependensinya
npm install @apollo/client graphql

# Atau dengan yarn
yarn add @apollo/client graphql

# Atau dengan pnpm
pnpm add @apollo/client graphql

# Output:
# + @apollo/client@3.10.x
# + graphql@16.x.x

import { ApolloClient, InMemoryCache, HttpLink, split } from '@apollo/client';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { getMainDefinition } from '@apollo/client/utilities';
import { createClient } from 'graphql-ws';

// HTTP Link untuk queries dan mutations
const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql',
  credentials: 'include', // Kirim cookies
});

// WebSocket Link untuk subscriptions
const wsLink = new GraphQLWsLink(
  createClient({
    url: 'ws://localhost:4000/graphql',
    connectionParams: () => {
      const token = localStorage.getItem('auth-token');
      return { authToken: token };
    },
  })
);

// Split link: kirim operasi ke link yang tepat
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,    // Jika subscription → WebSocket
  httpLink   // Jika query/mutation → HTTP
);

// Buat Apollo Client
const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          semuaArtikel: {
            // Merge untuk pagination
            keyArgs: false,
            merge(existing = [], incoming) {
              return [...existing, ...incoming];
            },
          },
        },
      },
    },
  }),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
    },
  },
});

export default client;

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ApolloProvider } from '@apollo/client';
import client from './apollo/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

// Sekarang semua komponen di dalam App bisa
// menggunakan hooks Apollo (useQuery, useMutation, dll.)

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

// Query untuk mengambil semua artikel
export const GET_ALL_ARTIKEL = gql`
  query GetAllArtikel($limit: Int, $offset: Int) {
    semuaArtikel(limit: $limit, offset: $offset) {
      id
      judul
      konten
      tag
      dipublikasikan
      views
      penulis {
        id
        nama
        email
      }
    }
  }
`;

// Query untuk mengambil satu artikel berdasarkan ID
export const GET_ARTIKEL = gql`
  query GetArtikel($id: ID!) {
    artikel(id: $id) {
      id
      judul
      konten
      tag
      dipublikasikan
      views
      createdAt
      penulis {
        id
        nama
        email
      }
    }
  }
`;

// Query untuk mengambil semua user
export const GET_USERS = gql`
  query GetUsers {
    users {
      id
      nama
      email
      createdAt
      artikel {
        id
        judul
      }
    }
  }
`;

// Query untuk mengambil satu user
export const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      nama
      email
      artikel {
        id
        judul
        views
      }
    }
  }
`;

import { useQuery } from '@apollo/client';
import { GET_ALL_ARTIKEL } from '../graphql/queries';

function DaftarArtikel() {
  const { loading, error, data, refetch, fetchMore } = useQuery(
    GET_ALL_ARTIKEL,
    {
      variables: { limit: 10, offset: 0 },
      // fetchPolicy options:
      // 'cache-first'   → cek cache dulu (default)
      // 'network-only'  → selalu dari network
      // 'cache-only'    → hanya dari cache
      // 'no-cache'      → tidak menyimpan ke cache
      // 'cache-and-network' → keduanya
      fetchPolicy: 'cache-and-network',
      // Polling untuk auto-refresh setiap 30 detik
      // pollInterval: 30000,
    }
  );

  if (loading) return <div className="skeleton">Memuat artikel...</div>;
  if (error) return <p className="error">Error: {error.message}</p>;

  const { semuaArtikel } = data;

  const handleLoadMore = () => {
    fetchMore({
      variables: { offset: semuaArtikel.length },
      updateQuery: (prev, { fetchMoreResult }) => {
        if (!fetchMoreResult.semuArtikel.length) return prev;
        return {
          semuaArtikel: [
            ...prev.semuArtikel,
            ...fetchMoreResult.semuArtikel,
          ],
        };
      },
    });
  };

  return (
    <div className="daftar-artikel">
      <h2>Semua Artikel ({semuaArtikel.length})</h2>

      <button onClick={() => refetch()} className="btn-refresh">
        🔄 Refresh Data
      </button>

      <div className="artikel-grid">
        {semuaArtikel.map((artikel) => (
          <div key={artikel.id} className="artikel-card">
            <h3>{artikel.judul}</h3>
            <p>Penulis: {artikel.penulis.nama}</p>
            <p>Views: {artikel.views}</p>
            <div className="tags">
              {artikel.tag.map((t) => (
                <span key={t} className="tag">{t}</span>
              ))}
            </div>
          </div>
        ))}
      </div>

      <button onClick={handleLoadMore} className="btn-loadmore">
        Muat Lebih Banyak...
      </button>
    </div>
  );
}

export default DaftarArtikel;

import { useLazyQuery } from '@apollo/client';
import { GET_ARTIKEL } from '../graphql/queries';
import { useState } from 'react';

function CariArtikel() {
  const [idArtikel, setIdArtikel] = useState('');

  // useLazyQuery: query tidak dieksekusi sampai fungsi dipanggil
  const [getArtikel, { loading, error, data }] = useLazyQuery(
    GET_ARTIKEL,
    {
      // Simpan hasil ke cache
      fetchPolicy: 'cache-and-network',
    }
  );

  const handleCari = () => {
    if (idArtikel.trim()) {
      getArtikel({ variables: { id: idArtikel.trim() } });
    }
  };

  return (
    <div className="cari-artikel">
      <h2>Cari Artikel by ID</h2>

      <div className="search-form">
        <input
          type="text"
          value={idArtikel}
          onChange={(e) => setIdArtikel(e.target.value)}
          placeholder="Masukkan ID artikel..."
        />
        <button onClick={handleCari} disabled={loading}>
          {loading ? 'Mencari...' : '🔍 Cari'}
        </button>
      </div>

      {error && <p className="error">{error.message}</p>}

      {data?.artikel && (
        <div className="artikel-detail">
          <h3>{data.artikel.judul}</h3>
          <p>{data.artikel.konten}</p>
          <p>Penulis: {data.artikel.penulis.nama}</p>
          <p>Views: {data.artikel.views}</p>
        </div>
      )}
    </div>
  );
}

export default CariArtikel;

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

// Membuat user baru
export const CREATE_USER = gql`
  mutation CreateUser($nama: String!, $email: String!) {
    createUser(nama: $nama, email: $email) {
      id
      nama
      email
      createdAt
    }
  }
`;

// Memperbarui artikel
export const UPDATE_ARTIKEL = gql`
  mutation UpdateArtikel(
    $id: ID!
    $judul: String
    $konten: String
    $tag: [String!]
    $dipublikasikan: Boolean
  ) {
    updateArtikel(
      id: $id
      judul: $judul
      konten: $konten
      tag: $tag
      dipublikasikan: $dipublikasikan
    ) {
      id
      judul
      konten
      tag
      dipublikasikan
    }
  }
`;

// Menghapus artikel
export const DELETE_ARTIKEL = gql`
  mutation DeleteArtikel($id: ID!) {
    deleteArtikel(id: $id)
  }
`;

// Membuat artikel baru
export const CREATE_ARTIKEL = gql`
  mutation CreateArtikel(
    $judul: String!
    $konten: String!
    $tag: [String!]!
    $dipublikasikan: Boolean
  ) {
    createArtikel(
      judul: $judul
      konten: $konten
      tag: $tag
      dipublikasikan: $dipublikasikan
    ) {
      id
      judul
      konten
      penulis {
        id
        nama
      }
    }
  }
`;

import { useState } from 'react';
import { useMutation } from '@apollo/client';
import { CREATE_ARTIKEL } from '../graphql/mutations';
import { GET_ALL_ARTIKEL } from '../graphql/queries';

function BuatArtikel() {
  const [formData, setFormData] = useState({
    judul: '',
    konten: '',
    tag: '',
    dipublikasikan: false,
  });

  // useMutation mengembalikan [mutateFunction, { data, loading, error }]
  const [createArtikel, { loading, error }] = useMutation(
    CREATE_ARTIKEL,
    {
      // Refetch queries setelah mutation berhasil
      refetchQueries: [
        { query: GET_ALL_ARTIKEL, variables: { limit: 10, offset: 0 } },
      ],

      // Atau gunakan update untuk manipulasi cache manual
      // update(cache, { data: { createArtikel } }) {
      //   const existing = cache.readQuery({
      //     query: GET_ALL_ARTIKEL,
      //     variables: { limit: 10, offset: 0 },
      //   });
      //   cache.writeQuery({
      //     query: GET_ALL_ARTIKEL,
      //     variables: { limit: 10, offset: 0 },
      //     data: {
      //       semuaArtikel: [createArtikel, ...existing.semuArtikel],
      //     },
      //   });
      // },

      // Optimistic UI: tampilkan hasil sebelum server merespons
      optimisticResponse: {
        createArtikel: {
          __typename: 'Artikel',
          id: 'temp-' + Date.now(),
          judul: formData.judul,
          konten: formData.konten,
          penulis: { __typename: 'User', id: 'current', nama: 'Anda' },
        },
      },

      onCompleted: (data) => {
        console.log('Artikel dibuat:', data.createArtikel);
        setFormData({ judul: '', konten: '', tag: '', dipublikasikan: false });
      },

      onError: (err) => {
        console.error('Gagal membuat artikel:', err.message);
      },
    }
  );

  const handleSubmit = (e) => {
    e.preventDefault();
    createArtikel({
      variables: {
        judul: formData.judul,
        konten: formData.konten,
        tag: formData.tag.split(',').map((t) => t.trim()),
        dipublikasikan: formData.dipublikasikan,
      },
    });
  };

  return (
    <form onSubmit={handleSubmit} className="form-artikel">
      <h2>Buat Artikel Baru</h2>

      <div className="form-group">
        <label>Judul</label>
        <input
          type="text"
          value={formData.judul}
          onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
          required
        />
      </div>

      <div className="form-group">
        <label>Konten</label>
        <textarea
          value={formData.konten}
          onChange={(e) => setFormData({ ...formData, konten: e.target.value })}
          rows={6}
          required
        />
      </div>

      <div className="form-group">
        <label>Tag (pisahkan koma)</label>
        <input
          type="text"
          value={formData.tag}
          onChange={(e) => setFormData({ ...formData, tag: e.target.value })}
          placeholder="react, graphql, tutorial"
        />
      </div>

      <div className="form-group checkbox">
        <label>
          <input
            type="checkbox"
            checked={formData.dipublikasikan}
            onChange={(e) =>
              setFormData({ ...formData, dipublikasikan: e.target.checked })
            }
          />
          Langsung publikasikan
        </label>
      </div>

      {error && <p className="error">Error: {error.message}</p>}

      <button type="submit" disabled={loading}>
        {loading ? 'Menyimpan...' : '📝 Buat Artikel'}
      </button>
    </form>
  );
}

export default BuatArtikel;

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

// Reactive variables — global state di luar cache
export const isLoggedInVar = makeVar(false);
export const currentUserVar = makeVar(null);

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        // Pagination: merge results
        semuaArtikel: {
          keyArgs: ['filter', 'tag'], // Cache terpisah per filter/tag
          merge(existing = [], incoming, { args }) {
            if (args?.offset === 0) return incoming; // Reset
            return [...existing, ...incoming];
          },
          read(existing, { args }) {
            if (args?.offset && !existing) return undefined;
            return existing;
          },
        },

        // Custom field: gabungkan data dari cache
        artikelPopuler: {
          read(existing) {
            return existing || [];
          },
        },

        // Reactive variable field
        isLoggedIn: {
          read() {
            return isLoggedInVar();
          },
        },

        currentUser: {
          read() {
            return currentUserVar();
          },
        },
      },
    },

    // Merge strategy untuk Artikel type
    Artikel: {
      keyFields: ['id'], // Default, bisa custom: ['id', 'versi']
      fields: {
        views: {
          // Optimistic update untuk views count
          merge(existing = 0, incoming) {
            return Math.max(existing, incoming);
          },
        },
      },
    },

    // Merge strategy untuk User type
    User: {
      keyFields: ['id'],
      fields: {
        artikel: {
          merge(existing = [], incoming) {
            return incoming; // Replace, bukan merge
          },
        },
      },
    },
  },
});

export default cache;

import { useApolloClient } from '@apollo/client';

function CacheController() {
  const client = useApolloClient();

  // Baca data dari cache
  const bacaCache = () => {
    const cached = client.readQuery({
      query: GET_ALL_ARTIKEL,
      variables: { limit: 10, offset: 0 },
    });
    console.log('Cache contents:', cached);
  };

  // Tulis data ke cache
  const tulisCache = () => {
    client.writeQuery({
      query: GET_ALL_ARTIKEL,
      variables: { limit: 10, offset: 0 },
      data: {
        semuaArtikel: [
          {
            __typename: 'Artikel',
            id: '99',
            judul: 'Ditulis langsung ke cache',
            konten: 'Ini data manipulasi cache',
            tag: ['cache'],
            dipublikasikan: true,
            views: 0,
            penulis: { __typename: 'User', id: '1', nama: 'Admin' },
          },
        ],
      },
    });
  };

  // Baca fragment dari cache
  const bacaFragment = () => {
    const fragment = client.readFragment({
      id: 'Artikel:1', // Cache ID: TypeName:KeyValue
      fragment: gql`
        fragment DetailArtikel on Artikel {
          id
          judul
          views
        }
      `,
    });
    console.log('Fragment data:', fragment);
  };

  // Reset seluruh cache
  const resetCache = async () => {
    await client.resetStore();
    console.log('Cache di-reset!');
  };

  // Hapus cache tertentu
  const hapusCacheItem = (artikelId) => {
    client.cache.evict({ id: `Artikel:${artikelId}` });
    client.cache.gc(); // Garbage collection
  };

  return (
    <div className="cache-controls">
      <button onClick={bacaCache}>📖 Baca Cache</button>
      <button onClick={tulisCache}>✏️ Tulis Cache</button>
      <button onClick={bacaFragment}>🧩 Baca Fragment</button>
      <button onClick={resetCache}>🔄 Reset Cache</button>
    </div>
  );
}

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

// Subscription: artikel baru
export const ON_ARTIKEL_BARU = gql`
  subscription OnArtikelBaru {
    artikelBaru {
      id
      judul
      konten
      tag
      dipublikasikan
      penulis {
        id
        nama
      }
    }
  }
`;

// Subscription: user online
export const ON_USER_ONLINE = gql`
  subscription OnUserOnline {
    userOnline {
      id
      nama
      email
    }
  }
`;

// Subscription: perubahan pada artikel tertentu
export const ON_ARTIKEL_UPDATED = gql`
  subscription OnArtikelUpdated($artikelId: ID!) {
    artikelUpdated(id: $artikelId) {
      id
      judul
      konten
      views
      dipublikasikan
    }
  }
`;

import { useEffect, useState } from 'react';
import { useSubscription, useApolloClient } from '@apollo/client';
import { ON_ARTIKEL_BARU, ON_USER_ONLINE } from '../graphql/subscriptions';
import { GET_ALL_ARTIKEL } from '../graphql/queries';

function NotifikasiRealtime() {
  const [notifikasi, setNotifikasi] = useState([]);
  const client = useApolloClient();

  // Subscription untuk artikel baru
  const { data: artikelData, loading: artikelLoading } = useSubscription(
    ON_ARTIKEL_BARU,
    {
      onSubscriptionData: ({ subscriptionData }) => {
        const artikel = subscriptionData.data.artikelBaru;
        console.log('Artikel baru diterima:', artikel);

        // Tambahkan notifikasi
        setNotifikasi((prev) => [
          { id: Date.now(), type: 'artikel', message: `Artikel baru: "${artikel.judul}" oleh ${artikel.penulis.nama}` },
          ...prev,
        ]);

        // Update cache: tambahkan artikel baru ke daftar
        try {
          const cached = client.readQuery({
            query: GET_ALL_ARTIKEL,
            variables: { limit: 10, offset: 0 },
          });

          if (cached) {
            client.writeQuery({
              query: GET_ALL_ARTIKEL,
              variables: { limit: 10, offset: 0 },
              data: {
                semuaArtikel: [artikel, ...cached.semuArtikel],
              },
            });
          }
        } catch (e) {
          // Cache belum diinisialisasi
          console.log('Cache belum siap, skip update');
        }
      },
    }
  );

  // Subscription untuk user online
  const { data: userData } = useSubscription(ON_USER_ONLINE, {
    onSubscriptionData: ({ subscriptionData }) => {
      const user = subscriptionData.data.userOnline;
      setNotifikasi((prev) => [
        { id: Date.now(), type: 'user', message: `${user.nama} sedang online` },
        ...prev.slice(0, 19), // Simpan max 20 notifikasi
      ]);
    },
  });

  const hapusNotifikasi = (id) => {
    setNotifikasi((prev) => prev.filter((n) => n.id !== id));
  };

  return (
    <div className="notifikasi-panel">
      <h3>🔔 Notifikasi Real-time</h3>

      {artikelLoading && <p>Menunggu subscription...</p>}

      {notifikasi.length === 0 ? (
        <p className="no-data">Belum ada notifikasi</p>
      ) : (
        <ul className="notifikasi-list">
          {notifikasi.map((n) => (
            <li key={n.id} className={`notif-item notif-${n.type}`}>
              <span>{n.type === 'artikel' ? '📝' : '👤'}</span>
              <span>{n.message}</span>
              <button onClick={() => hapusNotifikasi(n.id)}>✕</button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default NotifikasiRealtime;

import { useQuery, useMutation, ApolloError } from '@apollo/client';
import { GET_ALL_ARTIKEL } from '../graphql/queries';

function KomponenDenganErrorHandling() {
  const { loading, error, data } = useQuery(GET_ALL_ARTIKEL, {
    // Error policy: 'none' (default), 'all' (termasuk partial data)
    errorPolicy: 'all',
    // Retry on network error
    onError: (error) => {
      console.error('Query error:', error);
      if (error.networkError) {
        // Tampilkan toast: "Koneksi bermasalah"
        showToast('Koneksi bermasalah, coba lagi nanti');
      }
      if (error.graphQLErrors) {
        error.graphQLErrors.forEach((err) => {
          console.log('GraphQL Error:', err.message, err.extensions);
          if (err.extensions?.code === 'UNAUTHENTICATED') {
            // Redirect ke login
            window.location.href = '/login';
          }
        });
      }
    },
  });

  if (loading) return <LoadingSpinner />;

  // error.networkError: masalah jaringan
  // error.graphQLErrors: error dari GraphQL server
  // error.message: pesan error gabungan

  if (error) {
    return (
      <div className="error-container">
        <h3>❌ Terjadi Kesalahan</h3>

        {error.networkError && (
          <p className="network-error">
            Koneksi ke server gagal. Periksa koneksi internet Anda.
          </p>
        )}

        {error.graphQLErrors.map(({ message, extensions }, idx) => (
          <div key={idx} className="graphql-error">
            <p>{message}</p>
            {extensions?.code && (
              <span className="error-code">Code: {extensions.code}</span>
            )}
          </div>
        ))}

        <button onClick={() => window.location.reload()}>
          🔄 Coba Lagi
        </button>
      </div>
    );
  }

  return <DaftarArtikel data={data} />;
}

import { onError } from '@apollo/client/link/error';
import { fromPromise } from '@apollo/client';
import { refreshToken } from './auth';

const errorLink = onError(
  ({ graphQLErrors, networkError, operation, forward }) => {
    // Handle GraphQL errors
    if (graphQLErrors) {
      for (const err of graphQLErrors) {
        switch (err.extensions?.code) {
          case 'UNAUTHENTICATED':
            // Token expired, coba refresh
            return fromPromise(
              refreshToken().catch(() => {
                // Refresh gagal → logout
                localStorage.removeItem('auth-token');
                window.location.href = '/login';
                return null;
              })
            ).flatMap(() => forward(operation));

          case 'FORBIDDEN':
            console.error('Akses ditolak:', err.message);
            break;

          case 'BAD_USER_INPUT':
            console.warn('Input tidak valid:', err.message);
            break;

          default:
            console.error('GraphQL Error:', err.message);
        }
      }
    }

    // Handle network errors
    if (networkError) {
      console.error('Network Error:', networkError);

      // Retry logic untuk 5xx errors
      if (networkError.statusCode >= 500) {
        console.log('Server error, akan dicoba lagi...');
      }
    }
  }
);

export default errorLink;

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

// Definisikan fragment untuk reuse
export const ARTIKEL_CORE_FIELDS = gql`
  fragment ArtikelCoreFields on Artikel {
    id
    judul
    konten
    tag
    dipublikasikan
    views
  }
`;

export const PENULIS_FIELDS = gql`
  fragment PenulisFields on User {
    id
    nama
    email
  }
`;

// Gunakan fragment di queries
export const GET_ALL_ARTIKEL = gql`
  ${ARTIKEL_CORE_FIELDS}
  ${PENULIS_FIELDS}
  query GetAllArtikel($limit: Int, $offset: Int) {
    semuaArtikel(limit: $limit, offset: $offset) {
      ...ArtikelCoreFields
      penulis {
        ...PenulisFields
      }
    }
  }
`;

// Fragment juga bisa nested
export const ARTIKEL_DETAIL = gql`
  ${ARTIKEL_CORE_FIELDS}
  ${PENULIS_FIELDS}
  query GetArtikelDetail($id: ID!) {
    artikel(id: $id) {
      ...ArtikelCoreFields
      createdAt
      penulis {
        ...PenulisFields
        artikel {
          id
          judul
          views
        }
      }
    }
  }
`;

# Instal GraphQL Codegen
npm install -D @graphql-codegen/cli @graphql-codegen/typescript \
  @graphql-codegen/typescript-operations \
  @graphql-codegen/typescript-react-apollo

# Buat konfigurasi
cat > codegen.yml << 'EOF'
schema: "http://localhost:4000/graphql"
documents: "src/**/*.{ts,tsx,graphql}"
generates:
  src/generated/graphql.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      withHooks: true
      withComponent: false
      withHOC: false
EOF

# Jalankan codegen
npx graphql-codegen

# Output: src/generated/graphql.tsx
# → Types dan hooks auto-generated dari schema!
# → useGetAllArtikelQuery(), useCreateArtikelMutation(), dll.