63 Fragment GraphQL dan Implementasinya

GraphQL telah mengubah cara kita berinteraksi dengan API, membawa fleksibilitas dan efisiensi dalam pengambilan data. Salah satu fitur powerful namun sering kurang dieksplorasi adalah fragments. Fragments memungkinkan kita menulis query yang lebih maintainable, DRY (Don’t Repeat Yourself) dan scalable. Pada artikel ini, saya akan mengulas 63 fragment GraphQL yang sering digunakan dalam skenario nyata—lengkap dengan contoh kode, best practice penggunaan, hingga simulasi implementasi di koleksi masalah sehari-hari. Artikel ini cocok untuk yang sudah memahami GraphQL dasar dan ingin mengoptimalkan query mereka.

Mengenal Fragment di GraphQL

Sederhananya, fragment di GraphQL adalah potongan query yang bisa digunakan berulang-ulang pada beberapa operasi (query/mutation) yang memerlukan field-field sama. Dengan ini, kita bisa mencegah repetition ketika ada banyak query mirip atau tipe data dengan field sejenis.

Contoh Sederhana:

fragment userProfileFields on User {
  id
  name
  avatarUrl
}

Lalu fragment tersebut dapat digunakan pada query:

query GetUsers {
  users {
    ...userProfileFields
  }
}

Manfaat Fragments

• Reusable: Field yang sama bisa digunakan di banyak query/mutation.
• Maintainable: Jika ada perubahan field, cukup diubah di fragment saja.
• Scalable: Query tetap singkat dan ringkas meski dataset membesar.

63 Fragment GraphQL: Referensi Implementasi

Dalam praktiknya, pembuatan fragment acapkali dikaitkan dengan kebutuhan data dan struktur API Anda. Di bawah ini, saya rangkum 63 contoh fragment beserta kegunaannya (bisa diadaptasi ke berbagai skenario).

Catatan: Tabel di atas adalah template. Fragment akan spesifik sesuai domain aplikasi Anda. Nanti akan dibahas beberapa implementasinya.

Simulasi Implementasi Fragment

Bayangkan kita sedang membuat aplikasi marketplace. Kita punya type User, Product, Order, yang relasinya saling terkait.

1. Fragment User

fragment userProfileFields on User {
  id
  username
  fullName
  email
  avatarUrl
}

2. Fragment Product

fragment productFields on Product {
  id
  name
  description
  price
  stock
  imageUrl
}

3. Fragment Order

fragment orderFields on Order {
  id
  createdAt
  totalAmount
  status
  user {
    ...userProfileFields
  }
  products {
    ...productFields
  }
}

Lihat bagaimana kita menyisipkan fragment user dan product di dalam fragment order? Inilah kekuatan composable di fragment GraphQL.

Studi Kasus: Query Menggunakan Fragment

Query Mendapatkan Detail Pesanan

query GetOrderById($orderId: ID!) {
  order(id: $orderId) {
    ...orderFields
  }
}

# Fragment di-embed di bawahnya
fragment orderFields on Order {
  id
  status
  createdAt
  user {
    ...userProfileFields
  }
  products {
    ...productFields
  }
}

fragment userProfileFields on User {
  id
  fullName
  avatarUrl
}

fragment productFields on Product {
  id
  name
  price
}

Dengan cara ini, ketika satu field harus diubah (misal: menambah profilePicture di user), cukup modify satu fragment.

Studi Kasus: Query Berbeda, Fragment Sama

Misal kita ingin menampilkan seluruh pesanan dan juga detail tiap user untuk admin dashboard:

query AdminGetAllOrders {
  orders {
    ...orderFields
  }
}

Dan fragment orderFields tetap bisa unjuk gigi:

fragment orderFields on Order {
  id
  status
  user {
    ...userProfileFields
  }
}

Penggunaan fragment ini meningkatkan konsistensi dan meminimalisir typo/pengulangan field.

Best Practice Fragment

Beberapa tips praktisi profesional dalam membuat fragment yang scalable:

1. Namakan Fragment dengan Jelas
   Gunakan {entity}Fields, {entity}Detail, dsb. untuk menghindari ambigu.

2. Spesifik dalam Scope
   Fragment jangan berlebihan isinya. Pisahkan antara userProfileFields dan misal userContactFields jika memang dipakai untuk konteks berbeda.

3. Composable
   Susun fragment menjadi bagian-bagian kecil, dan compose jika perlu.

4. Gunakan Untuk Interface/Union
   Fragments juga bisa dipakai untuk anomaly tipe data, contoh interface Notification yang bisa punya banyak concrete types.

Diagram Alur: Implementasi GraphQL Fragments

Berikut diagram alur permintaan data dengan fragment menggunakan Mermaid:

sequenceDiagram
    Actor ->> Client: Request data (query)
    Client ->> GraphQLServer: Query with fragment
    GraphQLServer -->> Database: Fetch required fields
    GraphQLServer -->> Client: Returns response as per fragment
    Client -->> Actor: Display data

Diagram ini menggambarkan bagaimana fragment membantu memotong payload hanya pada fields yang dibutuhkan.

Advanced: Fragment pada Interface dan Union

Di GraphQL, fragment sangat powerful saat berurusan dengan interface atau union:

{
  notificationFeed {
    ... on MessageNotification {
      message
      sender { ...userProfileFields }
    }
    ... on LikeNotification {
      user { ...userProfileFields }
      postId
    }
  }
}

Dengan conditional fragment, kita menangani berbagai tipe dalam satu query!

Kapan Jangan Gunakan Fragment?

• Jika query-nya sangat spesifik dan tidak akan diulang.
• Jika field cuma sedikit (misal cuma 1-2 field).

Kesimpulan

Fragments adalah senjata rahasia GraphQL yang sering underrated. Dengan menerapkan (bahkan ratusan) fragment seperti 63 contoh di atas, codebase Anda akan lebih maintainable dan scalable. Fokus pada penamaan yang baik, scope sempit, dan pattern composable akan sangat membantu di proyek besar.

Cobalah tentukan fragment yang pas untuk tiap domain bisnis di aplikasi Anda. Temukan pola fragment yang cocok, dan gunakan dengan disiplin—sehingga tim Anda bisa dengan mudah mengikuti perubahan data tanpa trauma refactor.

Sudahkah Anda merombak query GraphQL dengan fragment hari ini?

Referensi

• GraphQL Official Documentation: Fragments
• Apollo Docs: Fragments