GraphQL dengan Apollo Client: Panduan Lengkap

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>
  );
}