Tujuan Pembelajaran

Memahami persisted queries
Bisa membuat custom directive

Analogi

Diagram


      Persisted Query = Tiket Konser (singkat, terdaftar)
Custom Directive = Stempel Khusus (modifikasi perilaku)

Persisted queries mengganti query string dengan hash untuk keamanan dan performa

Penjelasan Konsep

Persisted Queries

Client tidak kirim query string lengkap, hanya kirim hash (SHA-256) dari query yang sudah didaftarkan sebelumnya. Keuntungan:

Keamanan — Server hanya eksekusi query yang sudah di-allowlist.
Performa — Request body jauh lebih kecil (hanya hash + variables).
Caching — CDN bisa cache GraphQL response berdasarkan hash.

Custom Directives

Ekstensi schema untuk modifikasi perilaku. Apollo mendukung schema directives untuk transformasi programmatic.

Contoh Custom Directive

@auth directive — require authentication untuk field. @rateLimit — batasi request rate per field. @cacheControl — tentukan cache TTL per field.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami persisted queries., dan bisa membuat custom directive. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Persisted Queries & Custom Directives, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Persisted queries mengganti query string dengan hash untuk keamanan dan performa. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Persisted query kirim hash, bukan query string. Custom directive ubah resolver.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// PERSISTED QUERIES
// 1. Client generate hash dari query
const hash = sha256(queryString);

// 2. Client kirim hash saja
fetch('/graphql', {
  method: 'POST',
  body: JSON.stringify({
    extensions: {
      persistedQuery: {
        version: 1,
        sha256Hash: hash
      }
    }
  })
});

// CUSTOM DIRECTIVE: @auth
const authDirective = (directiveName) => ({
  authDirectiveTypeDefs: `directive @${directiveName} on FIELD_DEFINITION`,
  authDirectiveTransformer: (schema) =>
    mapSchema(schema, {
      [MapperKind.OBJECT_FIELD]: (fieldConfig) => {
        const directive = getDirective(schema, fieldConfig, directiveName);
        if (directive) {
          const { resolve = defaultFieldResolver } = fieldConfig;
          fieldConfig.resolve = (source, args, context, info) => {
            if (!context.user) throw new Error('Unauthorized');
            return resolve(source, args, context, info);
          };
        }
        return fieldConfig;
      }
    })
});

Penjelasan Kode

Persisted query kirim hash, bukan query string. Custom directive ubah resolver.

Prompt AI

Jelaskan keuntungan persisted queries dibanding query string biasa.

Pertanyaan Reflektif

Buat custom directive @auth yang require authentication.