36 Menambahkan Filter pada Query GraphQL: Dari Konsep hingga Implementasi

Dalam pengembangan aplikasi modern, fleksibilitas pengambilan data merupakan salah satu faktor kunci yang membuat backend kita tetap powerful dan scalable. Salah satu keunggulan utama GraphQL dibandingkan REST adalah kemampuannya untuk mendefinisikan struktur data yang benar-benar dibutuhkan oleh klien. Tapi, kebutuhan filter pada query sering kali menjadi tantangan. Bagaimana cara mengimplementasikan filter yang efektif pada query GraphQL? Artikel ini akan membahas topik ini secara lengkap — mulai dari konsep, contoh kode, simulasi hingga best practice yang bisa diadopsi di production.

Apa Itu Filter pada Query GraphQL?

Secara sederhana, filter pada query GraphQL memungkinkan klien mengambil subset data berdasarkan kondisi tertentu — mirip dengan WHERE pada SQL atau filter pada REST query params (?name=foo). Dengan filter, client front-end bisa meminta data yang lebih spesifik tanpa over-fetching atau under-fetching.

Mengapa Perlu Filter di GraphQL?

Bayangkan Anda membangun back end untuk aplikasi katalog buku. Tanpa filter, frontend hanya punya dua pilihan: mengambil semua buku dan melakukan filter di sisi client (tidak efisien), atau membuat query query baru di backend untuk setiap kebutuhan filter (tidak scalable).

Dengan fitur filter, satu endpoint GraphQL bisa menangani berbagai kebutuhan query — lebih reusable, maintainable, dan scalable.

Simulasi Kasus: Sistem Katalog Buku

Mari kita asumsikan memiliki tipe data Book seperti berikut:

type Book {
  id: ID!
  title: String!
  author: String!
  genre: String!
  publishedYear: Int!
}

Client butuh fitur pencarian seperti:

• Filter berdasarkan author
• Filter berdasarkan genre
• Filter berdasarkan rentang tahun terbit
• Penggabungan berbagai filter

Membangun Filter Query GraphQL

1. Definisikan Input Type untuk Filter

Cara paling standar adalah dengan mendefinisikan input object jenis BookFilter:

input BookFilter {
  author: String
  genre: String
  publishedYearGte: Int
  publishedYearLte: Int
}

Gunakan nama field yang eksplisit seperti Gte (Greater than or equal), Lte (Less than or equal) untuk filter numerik.

2. Ubah Query di Schema GraphQL

type Query {
  books(filter: BookFilter): [Book]
}

Sekarang, query books bisa menerima satu parameter opsional filter.

3. Implementasi di Resolver

Contoh implementasi (pseudocode/TypeScript):

const books = [
  { id: 1, title: 'Clean Code', author: 'Robert C. Martin', genre: 'Programming', publishedYear: 2008 },
  { id: 2, title: 'Atomic Habits', author: 'James Clear', genre: 'Self-Development', publishedYear: 2018 },
  { id: 3, title: 'Eloquent JavaScript', author: 'Marijn Haverbeke', genre: 'Programming', publishedYear: 2014 },
  // ... dan seterusnya
];

// Resolver untuk books
const resolvers = {
  Query: {
    books: (_parent, args) => {
      let result = books;
      if (args.filter) {
        if (args.filter.author) {
          result = result.filter(book => book.author === args.filter.author);
        }
        if (args.filter.genre) {
          result = result.filter(book => book.genre === args.filter.genre);
        }
        if (args.filter.publishedYearGte !== undefined) {
          result = result.filter(book => book.publishedYear >= args.filter.publishedYearGte);
        }
        if (args.filter.publishedYearLte !== undefined) {
          result = result.filter(book => book.publishedYear <= args.filter.publishedYearLte);
        }
      }
      return result;
    }
  }
};

Simulasi Query dan Respons

Query

query {
  books(filter: { author: "Robert C. Martin", genre: "Programming", publishedYearGte: 2000 }) {
    id
    title
  }
}

Response

{
  "data": {
    "books": [
      {
        "id": "1",
        "title": "Clean Code"
      }
    ]
  }
}

Diagram Alur Filtering

Menggunakan Mermaid, berikut flow sederhana filtering pada query GraphQL:

flowchart TD
    A[Client Request] --> B[GraphQL Layer]
    B --> C{Ada Filter?}
    C -- Ya --> D[Filter data berdasarkan input]
    C -- Tidak --> E[Ambil Semua Data]
    D & E --> F[Return ke Client]

Simulasi Contoh Tabel

Misalkan data book sebagai berikut:

Jika query:

books(filter: { genre: "Programming", publishedYearGte: 2000 })

Maka hasil:

Tips dan Best Practice Filtering GraphQL

1. Gunakan Input Object, Bukan Flat Arg
   Input object lebih scalable jika field filter bertambah.

2. Hindari Over-Nesting
   Kecuali kebutuhan sangat kompleks, agar schema tetap mudah dipahami.

3. Tipe Data yang Jelas
   Gunakan tipe data yang tepat (String, Int, dsb), supaya filtering robust.

4. Paging + Filtering
   Sebaiknya gabungkan dengan fitur pagination (offset/limit atau cursor-based) agar query tetap cepat pada data besar.

5. Validasi dan Sanitasi
   Selalu validasi input filter agar tidak berbahaya (misal: SQL injection).

Advanced: Mendukung OR/AND atau Komparator Lebih Kompleks

Pola di atas adalah basic. Untuk skenario lebih kompleks (misal: kombinasi OR, AND, NOT), bisa menggunakan nested input object dan enum operator.

input BookFilter {
  AND: [BookFilter!]
  OR: [BookFilter!]
  author: String
  genre: String
}

Query Example:

books(filter: {
  OR: [
    { genre: "Programming" },
    { author: "James Clear" }
  ]
})

Filtering semacam ini sangat powerful untuk use case pencarian yang dinamis.

Kesimpulan

Menambahkan filter pada query GraphQL adalah fondasi menuju API yang fleksibel dan scalable. Dengan filter yang modular, frontend dapat melakukan pencarian dan pengambilan data yang sangat spesifik tanpa menambah endpoint baru di backend. Langkah-langkah yang telah kita bahas mulai dari definisi input, implementasi resolver, hingga simulasi query, sangat mudah diadopsi. Tinggal di-scale sesuai kebutuhan proyek Anda.

Teruslah eksplor dan optimalkan skema filter ini disesuaikan dengan kebutuhan domain — dan pastikan selalu mengutamakan performa serta keamanan!

Silakan tinggalkan pendapat atau pertanyaan Anda di kolom komentar 👇 — atau bagikan pengalaman implementasi filter di produk Anda sendiri!