GraphQL ‘ e Giriş
Merhaba Arkadaşlar,
Bu yazımda GrapQL ‘ e giriş yapacağız.
İlk olarak GraphQL nedir , hangi problemi çözmek için var olmuştur bundan bahsedeyim.
GraphQL bir developer ın kendi back-end ini oluşturup , bunu kendi uygulamasında özgür bir şekilde kullanmasını sağlayan bir servistir. GraphQL in başka bir özelliği ise servise gönderilen istek sonucunda dönen dataya developer ın kendi karar vermesidir. Böylece gelen datanın kalabalık olması engellenir,sadece ihtiyacımız olan datanın bize gelmesini ve sonucun elimize daha hızlı ulaşmasını sağlar.
Peki nasıl kullanacağız?
https://www.graph.cool/ adresine gidiyoruz. Buradan OPEN CONSOLE ‘ a tıklıyoruz.
( Dilerseniz , “GET STARTED” diyerek ingilizce dökümantasyonda da faydalanabilirsiniz.)
Burada GraphQL bize örnek bir çalışma alanı oluşturuyor. Ve örnek iki tane model .
Dilerseniz ilk olarak bizim bu modellere nasıl field ekleyeceğimizi görelim.
Bunun iki yolu var. Birincisi , field ekleyeceğimiz modele gelip “ADD FIELD” e tıklıyoruz.
Burada aşağıdaki gibi bir alan geliyor karşımıza . İlk alanda fieldimizin adını belirliyoruz.
Daha sonra bu field de tutulacak verimiz hangi tipte olduğunu seçmemiz lazım.
( String:”text tipi”, int : “tamsayı” , boolean :”true or false”, float: “ondalıklı sayı” )
Data type seçtiğimiz yerin altında ise “Store multiple values in this field / Bu alanda birden fazla değer tut “ yazısı bulunuyor.
Bunun işe yaradığı alanı şu şekilde anlatayım.
Bazı durumlarda field da birden fazla data tutmak isteyebiliriz. Örneğin kullanıcıların yazılarının tuttuluğu model ile ilişkilendirip , kullanıcılar modelinde bunun için bir field açıp , kullanıcının tüm yazılarının id lerini bu alanda tutabiliriz. Bunun için ise bu alanı işaretlememiz gerekir.
Ve create Field diyerek modelimizi oluşturmuş olduk.
İkinci yoldan ise birazdan bahsedeceğim.
Peki biz bu fieldlara nasıl işlemlere yapacağız ?
GrahQL de bunun için iki yöntem var .
Mutationlar ve Queryler .
Mutaiton ile insert, update , delete işlemleri yapılabilirken , Query ile select işlemleri yapılabiliyor.
(Tabi mutation aracılığı ile yapılan işlemler query ile de yapılabiliyormuş ama sağlıklı olanı mutation- query ayrımını yapmak)
Şimdi mutation ile user modeline insert işlemi yapalım.
İlk olarak mutation yazıp süslü parantezleri açarak bir mutation işlemi yapacağımızı belirtiyoruz.
Daha sonra projemizde var olan modeller methodlar ile beraber listeleniyor zaten .
Burada User modelini baz alarak konuşacak olursak,
createUser → data ekler
updateUser → datayı günceller
updateOrCreateUser → o data varsa update eder, yoksa insert eder.
deleteUser → datayı siler.
Bu methodların hepsi kendi içlerinde parametreler alır şöyle ki
createUser() dedikten sonra insert edeceğimiz data parametrelerini bu method içinde belirtiriz.
User modelinde name ve lastname fieldlerine birer data gönderelim. ( createdAt ve updatedAt alanın tipi Datetime olduğundan bu verileri otomatik olarak kendisi oluşturur.)
Bunu şu şekilde yaparız
createUser(
name: “Hatice”,
Lastname: “Edis”
)
bu methodlar gerçekleştikten sonra ise bize result olarak gelecek olan gerekli verileri ise
{fieldAdı1 , fieldAdı2 …}
yani bu örnek için
{ id , name , lastname }
şeklinde çağırabiliyoruz.
Dolasıyla mutation için kodumuz aşağıdaki gibi toparlanmış oluyor.
mutation{
createUser(
name:"Hatice",
lastname:"Edis"
){
id,
name,
lastname
}
}Ve play tuşuna basıp kodumuzu çalıştırdığımızda sağ tarafta datamızın eklediğini ve bize result olarak dönen datayı görebiliyoruz.
Aslında diğer 3 yöntemin de kullanımı buna benzer. Tek fark var . Update veya delete edilmesini istediğimiz datanın id sini de bu parametrede göndermemiz gerekir , tıp ki sql sorgusunda olduğu gibi.
Şimdi field eklemenin 2. yolundan bahsedeyim.
“SCHEMA” alanından oluşturulan modeller ile yapmak. ( Ki gerçek bir projede bu şekilde kullanılabiliyor.)
Bunun için yeni bir model oluşuralım . POST adında bir model olsun.
type Post @model {
createdAt: DateTime!
id: ID! @isUnique
title: String!
description: String!
author: User @relation(name: "AuthorPosts")
}
Yukarıdaki kodu incelersek , sırayla
createdAt adında bir field oluşturup datatype olarak Datetime belirlemişiz. ( Burada eğer bir tip olarak varsayılan değerlerden birini belirtiyorsak sonunda ! koymalıyız.)
id nin type ını ID olarak belirledik ve @isUnique diyerek id nin tekil ( benzersiz ) olacağını belirttik.
Title ve description için type string olarak belirlemişiz.
Vee çok önemli bir noktaya geldik.
Relationship ler.
Burada author field nin type ını USER olarak belirlemişiz. Bunun sebebi ise bizim alanda postu kaydeden userın id sini bu alanda tutacak olmamız.
Bu sebeple @relation diye bir keyword yazıp bu relation a bir ad veriyoruz. ( burada relation a AuthorPost adını vermişiz.)
Daha sonra ise User modelinde posts diye bir field açıp ( adının aynı olmasının bir önemi yok)
type User @model {
createdAt: DateTime!
id: ID! @isUnique
name: [String!]
updatedAt: DateTime!
lastname: String!
posts: [Post!]! @relation(name: "AuthorPosts")
}Bu relation ‘ ı aynı relation name ile buraya bağlantılamışız.
Evett , değişikliklerimizi yaptığımıza göre burada ilk Preview Change sonra da Apply Change diyerek yeni modellerimizi kaydediyoruz.
Hemen yeni bir post ekleyelim .
mutation{
createPost(
authorId:"cjayfpufj4l2z0101zerprcj4",
title:"DENEME YAZISI",
description:"Bu bir deneme yazısıdır"
)
{
id,
title
}
}
Burada dikkat etmemiz gereken şey şu , bizim post modelimiz author adında bir fieldımız var . Bizim bu fieldda User modeli ile eşleştirme yaptığımız için aslında user ın idsini eklemeliyiz. Ve bu yüzden Grahql author field ine veri eklerken bunu authorId olarak tanımlar. Yani field ın adına Id eki getirir. (Not bu sadece mutation işlemleri için geçerlidir.)
Bu arada update ve delete işlemleri de mutation aşağıdaki gibi yapılıyor. ( Bahsettiğim gibi id parametresini gönderdğimizde o id li veriyi bulup update veya delete ediyor. Tabi update de güncellenecek veriyi de göndermeyi unutmamak gerek :) )
Buraya kadar mutationlardan bahsettim.
Sıra geldi Query lere .
query { } şekilde yazdığımızda ömüzdeki alternatiflerden birkaçı şuanlar.
allModel(s) — Örneğin allUsers, allPosts ,
query {
allPosts{
id,
description,
createdAt
}
}
Model(field:parametre) -> Örneğin Post(id:”xxxx”)
query {
Post(id:"cjayhnvxu4yau0100jq1mo7ld"){
id,
description
}
}
allModel(filter:{field:parametre}) → Örneğin allPosts(filter:{title:”DENEME YAZISI”})
Query kullandıktan sonra ise yine return edilecek verileri sonrasında tıp kı mutationlarda olduğu gibi göstermemiz gerekir.
query {
allPosts(filter:{title:"DENEME YAZISI"}){
id,
description
}
}Örneğin burada tüm postlardan title ı “DENEME YAZISI” olanlar gelsin dedik ve bu postların da bana sadece id si ve descriptionını gönder dedik.
Aslında bu şekilde o modelin hangi verisine ihtiyacım varsa onu return ettirerek daha fazla gelmesini de önlemiş olduk.
Veya bir field a göre sıralama yaptıracaksak
allModel(orderBy:field_ASC) ( normal sırala)
allModel(orderBy:field_DESC) ( tersten sırala)
Örneğin
query {
allPosts(orderBy:createdAt_ASC){
id,
description
}
}şekilde kullanabiliriz. Bunu dediğimiz de createdAt e göre verilerimizi sıralamış oluruz.
Şimdi ise post ile user arasında kurduğumuz ilişkide query yapısı nasıl kuruluyor bunu inceleyelim.
İsteyelim ki bir User’ın gönderdiği Postları listelelim.
Bunun için
query {} yazdıktan sonra örneğin user ı id sine sorgulatacaksak
user(id:”xxx”)
şeklinde sorgumuzu yazıyoruz.
Daha sonra user modelindeki post fielddeki verileri gelmesi için result kısmına
post {} yazıyoruz. Burada post field ının tipi POST modeli olduğundan post modelindeki hangi verileri gelmesini istiyorsak
post{field1, field2 , …}
şeklinde yazıyoruz.
Sonuç olarak ise aşağıdaki gibi bir kod parçası oluşuyor.
query{User(id:"cjayfpufj4l2z0101zerprcj4"){
posts {
id,
title
}
}}İşte arkadaşlar, genel olarak GraphQL sorguları bu şekilde.
Bir sonra ki yazımda Vue ile GraphQL i nasıl kullanılırız bundan bahsedeceğim inşallah :)
Görüşmek Üzere.
