Fragment GraphQL: Biarkan Setiap Komponen Memiliki Datanya Sendiri

Query GraphQL terlihat bersih pada awalnya. Satu permintaan mendapatkan semua data Anda. Kemudian aplikasi Anda berkembang.

Query halaman Anda mulai mengumpulkan field untuk banyak komponen anak yang berbeda. Anda menambahkan field untuk komponen baru. Enam minggu kemudian Anda menghapus komponen tersebut. Anda lupa menghapus field dari query utama. Sekarang tidak ada yang tahu apakah aman untuk menghapusnya. Query tersebut terus membengkak selamanya.

Fragment memperbaiki hal ini. Kebanyakan tim menggunakannya sebagai cara untuk menyalin dan menempel (copy-paste) field. Ini adalah cara yang salah. Fragment seharusnya menjadi model untuk kepemilikan komponen.

Fragment adalah sekelompok field bernama untuk tipe tertentu.

Contoh: fragment UserBadge on User { id name avatarUrl }

Anda menyebarkan (spread) fragment ini ke dalam query apa pun yang membutuhkan User.

Nilai sebenarnya datang dari tempat Anda menyimpan fragment tersebut. Jangan menyimpannya di file bersama (shared file). Letakkan fragment di file yang sama dengan komponen yang menggunakannya.

Ini disebut co-location. Setiap komponen mendeklarasikan kebutuhan datanya sendiri.

Saat sebuah komponen membutuhkan field baru, Anda menambahkannya ke fragment komponen tersebut. Query induk akan diperbarui secara otomatis. Saat Anda menghapus sebuah komponen, Anda menghapus fragment-nya. Query tersebut akan mengecil. Komponen induk tidak perlu mengetahui field internal dari komponen anaknya.

Data masking membuat hal ini menjadi lebih baik lagi. Dengan masking yang diaktifkan, sebuah komponen hanya melihat field yang diminta dalam fragment-nya sendiri. Bahkan jika server mengirimkan data tambahan, komponen Anda tidak dapat mengaksesnya.

Ini menciptakan kontrak yang ketat.

  • TypeScript tahu persis data apa yang dimiliki setiap komponen.
  • Jika Anda menghapus field dari sebuah fragment, TypeScript akan menunjukkan setiap error yang ada.
  • Refactoring menjadi pemeriksaan tipe (type-check) yang sederhana, alih-alih harus mencari ke seluruh codebase Anda.

Gunakan fragment saat:

  • Beberapa komponen menggunakan tipe yang sama seperti User atau Product.
  • Query halaman Anda terlalu panjang.
  • Anda secara tidak sengaja meninggalkan field yang tidak terpakai (dead fields) di dalam query Anda.
  • Anda menginginkan keamanan TypeScript untuk data Anda.

Mulailah dari hal kecil. Temukan satu komponen yang mengambil data dari query induk. Pindahkan field-nya ke dalam sebuah fragment. Letakkan fragment tersebut di dalam file komponen.

Fragment memastikan pengambilan data Anda sesuai dengan UI seiring berkembangnya aplikasi Anda.

Sumber: https://dev.to/grimicorn/graphql-fragments-let-each-component-own-its-data-5359