GraphQL Fragment'leri: Her Bileşenin Kendi Verisine Sahip Olmasını Sağlayın

GraphQL sorguları ilk başta temiz görünür. Tek bir istek tüm verilerinizi getirir. Sonra uygulamanız büyür.

Sayfa sorgunuz birçok farklı alt bileşen için alanlar toplamaya başlar. Yeni bir bileşen için bir alan eklersiniz. Altı hafta sonra o bileşeni silersiniz. Alanı ana sorgudan kaldırmayı unutursunuz. Artık kimse silmenin güvenli olup olmadığını bilmez. Sorgu sonsuza dek büyür.

Fragment'ler bunu çözer. Çoğu ekip onları alanları kopyalayıp yapıştırmanın bir yolu olarak kullanır. Bu yanlış bir yöntemdir. Fragment'ler, bileşen sahipliği için bir model olmalıdır.

Bir fragment, belirli bir tip için isimlendirilmiş bir alan grubudur.

Örnek: fragment UserBadge on User { id name avatarUrl }

Bu fragment'i, bir User'a ihtiyaç duyan herhangi bir sorguya spread edersiniz.

Asıl değer, fragment'i nerede kaydettiğinizden gelir. Onları paylaşılan bir dosyaya koymayın. Fragment'i, onu kullanan bileşenle aynı dosyaya koyun.

Buna co-location denir. Her bileşen kendi veri ihtiyaçlarını beyan eder.

Bir bileşen yeni bir alana ihtiyaç duyduğunda, bunu kendi fragment'ine eklersiniz. Üst sorgu otomatik olarak güncellenir. Bir bileşeni sildiğinizde, onun fragment'ini de silersiniz. Sorgu küçülür. Üst bileşenin, alt bileşenlerinin dahili alanlarını bilmesine gerek kalmaz.

Data masking bunu daha da iyi hale getirir. Maskeleme etkinleştirildiğinde, bir bileşen yalnızca kendi fragment'inde istediği alanları görür. Sunucu fazladan veri gönderse bile bileşeniniz buna erişemez.

Bu, katı bir sözleşme oluşturur.

  • TypeScript, her bileşenin tam olarak hangi verilere sahip olduğunu bilir.
  • Bir fragment'ten bir alanı kaldırırsanız, TypeScript size tüm hataları gösterir.
  • Refactoring, tüm kod tabanınızda arama yapmak yerine basit bir tip kontrolüne dönüşür.

Şu durumlarda fragment'leri kullanın:

  • Birden fazla bileşen User veya Product gibi aynı tipi kullanıyorsa.
  • Sayfa sorgularınız çok uzunsa.
  • Sorgularınızda yanlışlıkla kullanılmayan alanlar bırakıyorsanız.
  • Verileriniz için TypeScript güvenliği istiyorsanız.

Küçük başlayın. Bir üst sorgudan veri alan bir bileşen bulun. Alanlarını bir fragment'e taşıyın. Bu fragment'i bileşen dosyasına koyun.

Fragment'ler, uygulamanız büyüdükçe veri çekme işleminizin UI ile uyumlu olmasını sağlar.

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