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:

1fragment userProfileFields on User {
2  id
3  name
4  avatarUrl
5}

Lalu fragment tersebut dapat digunakan pada query:

1query GetUsers {
2  users {
3    ...userProfileFields
4  }
5}

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).

Simulasi Implementasi Fragment

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

1. Fragment User

1fragment userProfileFields on User {
2  id
3  username
4  fullName
5  email
6  avatarUrl
7}

2. Fragment Product

1fragment productFields on Product {
2  id
3  name
4  description
5  price
6  stock
7  imageUrl
8}

3. Fragment Order

 1fragment orderFields on Order {
 2  id
 3  createdAt
 4  totalAmount
 5  status
 6  user {
 7    ...userProfileFields
 8  }
 9  products {
10    ...productFields
11  }
12}

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

 1query GetOrderById($orderId: ID!) {
 2  order(id: $orderId) {
 3    ...orderFields
 4  }
 5}
 6
 7# Fragment di-embed di bawahnya
 8fragment orderFields on Order {
 9  id
10  status
11  createdAt
12  user {
13    ...userProfileFields
14  }
15  products {
16    ...productFields
17  }
18}
19
20fragment userProfileFields on User {
21  id
22  fullName
23  avatarUrl
24}
25
26fragment productFields on Product {
27  id
28  name
29  price
30}

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:

1query AdminGetAllOrders {
2  orders {
3    ...orderFields
4  }
5}

Dan fragment orderFields tetap bisa unjuk gigi:

1fragment orderFields on Order {
2  id
3  status
4  user {
5    ...userProfileFields
6  }
7}

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

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:

 1{
 2  notificationFeed {
 3    ... on MessageNotification {
 4      message
 5      sender { ...userProfileFields }
 6    }
 7    ... on LikeNotification {
 8      user { ...userProfileFields }
 9      postId
10    }
11  }
12}

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?