Graflar yerine bileşenleri kullanma

Gato GraphQL, veri modelini temsil etmek için graflar kullanmaz. Bunun yerine bileşenler kullanır.

Bu beklenmedik bir yaklaşım değildir. GraphQL projesi, Thinking in Graphs başlığı altında şunu belirtmektedir (vurgu eklenmiştir):

Graflar, altta yatan sürecin doğal zihinsel modellerimize ve sözel açıklamalarımıza benzedikleri için gerçek dünyadaki pek çok olguyu modellemek için güçlü araçlardır. GraphQL ile bir şema tanımlayarak iş alanınızı bir graf olarak modellersiniz; şemanızda farklı düğüm türleri ve bunların birbirine nasıl bağlandığını/ilişkilendiğini tanımlarsınız. İstemci tarafında bu, Nesne Yönelimli Programlamaya benzer bir örüntü oluşturur: diğer türlere başvuran türler. Sunucu tarafında ise GraphQL yalnızca arayüzü tanımladığından, herhangi bir arka uçla (yeni veya eski!) kullanma özgürlüğüne sahipsiniz.

Bu tanımdan çıkarılacak sonuç şudur:

Yanıtın bir graf biçiminde olması, sunucu tarafında verilerle ilgilenilirken verilerin gerçekte bir graf olarak temsil edildiği anlamına gelmez. Graf yalnızca bir zihinsel modeldir, gerçek bir uygulama değil.

Bu iyi bir haberdir; çünkü graflarla (veya ağaçlarla) çalışmak basit değildir. Bileşenler ise çok daha kolay uygulanır ve aynı avantajların tamamını sağlar.

​

Bileşenler aracılığıyla veri modelini basitleştirme

Veri yapısını sunucu tarafında temsil etmek için bileşenler kullanmak, basitlik açısından idealdir; çünkü verilerimize ait farklı modelleri tek bir yapıda birleştirmeye olanak tanır. Şöyle bir akış yerine:

bileşenleri besleyecek query oluştur (istemci) => verileri graf/ağaç olarak işle (sunucu) => verileri bileşenlere besle (istemci)

...akışımız şu şekilde olacaktır:

bileşenler (istemci) => bileşenler (sunucu) => bileşenler (istemci)

Bu mümkündür; çünkü GraphQL isteği, her nesne türünün bir bileşeni ve bir nesne türünden diğerine her ilişki alanının başka bir bileşeni saran bir bileşeni temsil ettiği "bileşen hiyerarşisi" veri yapısına sahip olarak düşünülebilir.

Bileşenden GraphQL query'ye bu ilişkiyi görselleştirmek için bir örnek kullanalım. "Öne çıkan yönetmen" widget'ını oluşturmak istediğimizi varsayalım:

Vue veya React (ya da bileşen tabanlı başka bir kütüphane) kullanarak önce bileşenleri belirleriz. Bu durumda, bir <Actor> (yeşil) bileşenini saran bir <Film> (mavi) bileşenini saran dış bir <FeaturedDirector> (kırmızı) bileşenimiz olur:

Sözde kod şu şekilde görünecektir:

<!-- Component: <FeaturedDirector> -->
<div>
  Country: {country}
  {foreach films as film}
    <Film film={film} />
  {/foreach}
</div>
 
<!-- Component: <Film> -->
<div>
  Title: {title}
  Pic: {thumbnail}
  {foreach actors as actor}
    <Actor actor={actor} />
  {/foreach}
</div>
 
<!-- Component: <Actor> -->
<div>
  Name: {name}
  Photo: {avatar}
</div>Copy

Ardından her bileşen için hangi verilerin gerekli olduğunu belirleriz. <FeaturedDirector> için name, avatar ve country'e ihtiyacımız vardır. <Film> için thumbnail ve title'a ihtiyacımız vardır. <Actor> için ise name ve avatar'a ihtiyacımız vardır:

Gerekli verileri almak için GraphQL query'mizi oluştururuz:

query {
  featuredDirector {
    name
    country
    avatar
    films {
      title
      thumbnail
      actors {
        name
        avatar
      }
    }
  }
}Copy

Görüldüğü gibi, yukarıdaki bileşen hiyerarşisi ile bu GraphQL query'si arasında doğrudan bir ilişki vardır.