Sürekli duyduğum bu GraphQL denen şey de ne?
Başlığı söyleyip GraphQL’i araştırmaya karar verdiğimde rastladığım en güzel açıklama Sacha Greif‘in “So what’s this GraphQL thing I keep hearing about?” isimli yazısında idi. Ben de madem yazar bu kadar güzel açıklamış, Türkçe’ye çevireyim de benim gibi merak edenler olursa okumak isterler belki dedim. Birkaç kelimeyi bilerek çevirmedim çünkü yerine ne koysam dolmuyormuş gibi hissettirdi. Keyifli okumalar! :)
Eğer benim gibiyseyniz, yeni teknolojiler hakkında konuşurken muhtemelen üç aşamadan geçersiniz.
1.Reddetmek
Bir tane daha Javascript kütüphanesi?! jQuery kullansana işte!
2.İlgilenmek
Belki de sürekli duyduğum şu kütüphaneye bir bakmalıyım..
3.Paniklemek
Yardım edin! Hemen yeni bir kütüphane öğrenmeliyim yoksa tamamen işe yaramaz biri olacağım!
Bu hızlı hareket eden zamanda zihin sağlığınızı korumanın püf noktası; ikinci ve üçüncü aşamaların tam ortasında hala ortalamanın üstünde bilgiye sahipken yeni şeyler sizde bir kere merak uyandırdığında bunları öğrenmektir.
İşte bu yüzden duyduğunuz bu GraphQL öğesinin tam olarak ne olduğunu öğrenmenin zamanı geldi.
Temel Olarak
Kısaca GraphQL, verileri istemeyi açıklayan bir syntaxtır ve genelde sunucudaki verileri bir istemciye yüklemek için kullanılır. GraphQL üç ana özelliğe sahiptir:
- İstemcinin ihtiyaç duyduğu verilerin tam olarak belirtilmesini sağlar.
- Birden fazla kaynaktan veriye ulaşmanızı kolaylaştırır.
- Veriyi açıklamak için bir tür sistem kullanır.
Peki GraphQL nasıl başladı? Uygulamada neye benziyor? Ve kullanmaya nasıl başlayabilirsiniz? Cevapları bulabilmek için okumaya devam edin.
Problem
GraphQL Facebook’ta başladı ancak daha basit uygulamalar bile sıklıkla geleneksel REST API’lerin kısıtlamalarıyla karşılaşabilir.
Örneğin, posts listesini görüntülemeniz gerekiyor ve her gönderinin altında kullanıcıların kullanıcı adlarını ve profil fotoğraflarını içeren bir likes listesi var. Kullanıcı nesnelerini içeren bir likes dizisi ekleyebilmeniz için posts API’leri çekebilmeniz yeterince kolay:
Şimdi mobil uygulamalarda çalışmanın zamanı geldi ve biliyoruz ki fazla veri yüklememiz işleri yavaşlatıyor. Bu yüzden iki adet endpointe ihtiyacımız var, biri beğenileri içeren ve diğeri de içermeyen.
Şimdi de karışıma bir faktör daha ekleyelim: posts MySQL veritabanında saklanıyorken ve diğer taraftan da likesRedis’te bulunuyor. Peki şimdi ne yapacaksın?
Facebook’un yönetmesi gereken bir çok data kaynağı ve API istemcileri için bu durumdan sonuca ulaşabilir ve eski, iyi REST API’lerin neden sınırlarını göstermeye başladığını kavrayabilirsin.
Çözüm
Facebook’un getirdiği çözüm kavramsal olarak çok basit: birden fazla “yetersiz” endpointler kullanmak yerine karmaşık sorgulara cevap verebilen tek bir “akıllı” endpointe sahip olmak ve ardından verilerin çıktısını istemcinin istediği şekilde iletmek.
Uygulamalı olarak söylemek gerekirse, GraphQL katmanı bir veya birden fazla veri kaynağı ile istemcinin arasında yaşar, istemci isteklerini alır ve talimatlarınıza uygun olarak gereken verileri size getirir. Şaşırdınız mı?
Eski REST modeli pizza sipariş etmeniz, ardından bakkaldaki siparişlerinizi almanız, sonra da kıyafetlerinizi alabilmeniz için kuru temizlemecinizi aramanız gibidir. Üç dükkan, üç telefon, üç arama.
Diğer yandan GraphQL kişisel asistana sahip olmak gibidir: GraphQL’e bu yerlerin adreslerini veriyorsunuz sonra da sadece ne istediğinizi (“bana temiz kıyafetlerimi, büyük boy pizzamı ve iki düzine yumurtamı getir”) söyleyip isteklerinizin gelmesini bekliyorsunuz.
Başka bir deyişle, GraphQL bu büyülü kişisel asistan ile konuşmanız için standart bir dil oluşturur.
Bileşenler
Uygulamada, bir GraphQL API’si üç temel yapı etrafında düzenlenmiştir: şema, sorgular ve resolvers.
Sorgular
GraphQL asistanınıza bulunduğunuz talep bir sorgudur ve şu şekilde görünür:
query {
stuff
}query anahtar kelimesini kullanarak yeni bir sorgu açıyoruz sonra da stuff adında bir alan istiyoruz. GraphQL sorguları ile ilgili harika olan bir şey de şu; iç içe geçmiş alanları destekledikleri için bir adım daha ileri gidebiliyoruz:
query {
stuff {
eggs
shirt
pizza
}
}Gördüğünüz gibi, sorguyu yapan istemcinin verilerin hangi dükkandan geldiğini önemsemesi gerekmiyor. Sadece ihtiyacınız olan şeyi isteyin ve GraphQL sunucusunun geri kalan her şeyi halletmesine izin verin.
Ayrıca sorgu alanlarının dizileri point edebileceğini belirtmek gerekir. Mesela, burada bir posts listesini sorgulamak için kullanılabilecek ortak bir model var:
query {
posts { # bu bir dizidir.
title
body
author { # daha derine inebiliriz!
name
avatarUrl
profileUrl
}
}
}Sorgu alanları ayrıca argümanları da desteklemektedir. Belirli bir gönderiyi görüntülemek istediğimde posts alanına id argümanını ekleyebilirim.
query {
post(id: "123foo"){
title
body
author{
name
avatarUrl
profileUrl
}
}
}Son olarak, eğer id argümanını dinamik yapmak istersem, bir değişken tanımlayabilir ve bunu sorgu içerisinde tekrar kullanabilirim (ayrıca burada sorguyu isimlendirdiğimizi dikkate alın):
query getMyPost($id: String) {
post(id: $id){
title
body
author{
name
avatarUrl
profileUrl
}
}
}Tüm bunları uygulamaya dökmenin iyi bir yolu GitHub’ın GraphQL API Explorer’ını kullanmaktır. Örneğin, aşağıdaki sorguyu deneyebilirsiniz:
query {
repository(owner: "graphql", name: "graphql-js"){
name
description
}
}
descriptionın altına yeni bir isim yazmayı denediğinizde, IDE otomatik olarak GraphQL API’nin tamamladığı olası isimleri size sunar. Temiz!
GraphQL sorgularıyla ilgili daha fazlasını “The Anatomy of a GraphQL Query” isimli makaleden öğrenebilirsiniz.
Resolvers
Dünyanın en iyi kişisel asistanı bile onlara bir adres vermediğiniz sürece kuru temizlemeden kıyafetlerinizi alamaz.
Benzer olarak, GraphQL sunucusu da ona bir resolver kullanmasını söylemediğiniz sürece gelen sorgu ile ne yapacağını bilemeyecektir.
Bir resolver, GraphQL’e belirli bir alana karşılık gelen verileri nasıl ve nereden alacağını söyler. Örneğin, yukarıda yazılan alan için bir resolverın nasıl göründüğünü inceleyelim(GraphQL-Tools kullanılarak oluşturulmuştur):
Query: {
post(root, args) {
return Posts.find({ id: args.id });
}
}Query‘ye resolver bırakıyoruz çünkü root seviyesindeki posts için doğrudan bir sorgu oluşturmak istiyoruz. Ayrıca, bir post‘un author (yazar) gibi alt-alanları için de resolverınız olabilir.
Query: {
post(root, args) {
return Posts.find({ id: args.id });
}
},
Post: {
author(post) {
return Users.find({ id: post.authorId})
}
}Ve şunu da not edelim resolverın veritabanı dökümanlarını döndürmesi konusunda bir sınırı yok. Örneğin, post‘a bir commentCount eklemek istediniz:
Post: {
author(post) {
return Users.find({ id: post.authorId})
},
commentsCount(post) {
return Comments.find({ postId: post.id}).count()
}
}Burada GraphQL ile ilgili anlamanız gereken kilit kavram, API şemalarınız ve veritabanı şemalarınız ayrılmıştır. Diğer yandan, veritabanımızda author ve commentCount alanları olmayabilir ama biz resolver sayesinde bunları “taklit” edebiliriz.
Gördüğünüz gibi, bir resolverda istediğiniz herhangi bir kodu yazabilirsiniz. Bu sebeple, mutation resolver olarak bilindikleri durumda, onların veritabanınız üzerinde değişiklik yapmalarına izin verebilirsiniz.
Şema
Tüm bu iyi şeyler GraphQL’in şema sistemi tarafından mümkün kılınmıştır. Bugün hedefim size kapsamlı bir tanıtımdan çok hızlı bir genel bakış açısı kazandırmaktır, bu nedenle çok fazla detaya girmeyeceğim.
Söylediğim gibi, daha fazla bilgi edinmek isterseniz GraphQL dökümantasyonunu incelemenizi öneririm.
Sık Sorulan Sorular
Birkaç genel soruyu cevaplamak için bir ara verelim.
GraphQL ile graph veritabanı arasındaki ilişki nedir?
Çok değil, gerçekten, GraphQL, Neo4j gibi graph veritabanı ile hiçbir ilgisi yok. “graph” kısmı, alanlar ve alt-alanlar kullanarak API graph’ınızda gezinme fikrinden gelir; “QL” ise “sorgu dili”(query language) anlamına gelmektedir.
REST ile inanılmaz derecede mutluyum, neden GraphQL’e geçmeliyim?
GraphQL’in ele aldığı REST’in eziyetli noktalarına henüz girmediysen, o halde sana bunun iyi bir şey olduğunu söyleyebilirim!
REST üzerinden GraphQL’i kullanmak, uygulamanın kullanıcı deneyimini çok fazla etkilemeyecektir, bu sebeple geçişin herhangi bir ölüm-kalım meselesi değildir. Söylediğim gibi, şansın olursa kesinlikle küçük bir projede GraphQL’i denemeni tavsiye ederim.
GraphQL’i React/Relay/herhangi bir kütüphane olmadan da kullanabilir miyim?
Evet, kullanabilirsin! GraphQL yalnızca bir özellik olduğu için, herhangi bir platformdaki herhangi bir kütüphane ile kullanabilirsin, bir istemci ile(örneğin, Apollo’nun web, iOS, Angular, vb. için GraphQL istemcileri vardır) web, iOS ya da bir GraphQL sunucusuna kendi çağrılarını yaparak kullanabileceğin gibi.
GraphQL Facebook tarafından yapıldı ve Facebook’a güvenmiyorum.
Tekrar söylüyorum, GraphQL bir özelliktir yani Facebook tarafından yazılan tek bir kod satırını bile çalıştırmadan GraphQL uygulamalarını kullanabilirsiniz.
Ve Facebook’un destek vermesi GraphQL ekosistemi için kesinlikle güzel bir artıdır, bu noktada, eğer bir gün Facebook bunu kullanmayı bıraksa bile topluluğun GraphQL’in gelişimi için yeterince büyük olduğuna inanıyorum.
Bana kalırsa, tüm bu “istemcinin ihtiyaç duyduğu verileri çekmesine izin ver” işi kulağa pek güvenli gelmiyor..
Kendi resolverlarınızı yazdığınızdan beri, bu seviyedeki herhangi bir güvenlik endişesini gidermek size bağlıdır.
Örneğin, istemcinin teslim aldığı belgelerin sayısını kontrol etmek amacıyla bir limit parametresi belirtmesine izin verirseniz, istemcilerin milyonlarca belge talep ettikleri yerde, bu ‘limit’ sayısını denial-of-service-style saldırılarından(DoS) korumak için kapatmak isteyeceksinizdir.
Peki başlamak için neye ihtiyacım var?
Genel olarak, GraphQL tabanlı bir uygulamayı çalıştırmak için en az iki bileşene ihtiyacınız olacak:
Sizin API’nizi servis eden bir GraphQL sunucusu
endpoint’inize bağlanan bir GraphQL istemcisi
Mevcut çeşitli seçenekler hakkında daha fazla bilgi edinmek için okumaya devam edin.
GraphQL’in nasıl çalıştığına dair fikir edindiğinize göre biraz da ana oyuncular hakkında konuşalım.
GraphQL Sunucuları
İhtiyacınız olacak ilk şey bir GraphQL sunucusudur. GraphQL’in kendisi sadece bir özelliktir, bu yüzden birkaç rakip uygulamaya açık kapı bırakır.
Bu GraphQL’in orijinal başvuru uygulamasıdır. API sunucunuzu oluşturmak için express-graphql ile beraber kullanabilirsiniz.
Apollo ekibinin, kendi hepsi bir arada GraphQL sunucu uygulaması vardır. Henüz orjinali kadar yaygın değil ama yine de çok iyi belgelendirilmiş ve desteklenmedir, aynı zamanda da hızlı bir şekilde yer kazanmaktadır.
GraphQL.org’da çeşitli platformlar için(PHP, Ruby, vb) GraphQL uygulamaları listesi vardır.
GraphQL İstemcileri
Özel bir istemci kütüphanesine ihtiyaç duymadan teknik olarak GraphQL API’nizi doğrudan sorgulayabilmeniz mutlaka hayatınızı kolaylıştıracaktır.
Relay, Facebook’un bir GraphQL aracıdır. Ben kullanmadım, ama duyduklarıma göre Facebook’un kendi ihtiyaçlarına göre derlenmiş ve çoğu kullanım için biraz fazla mühendislik sürecine uğradığı söyleniyor.
Apollo bu alanda yeni bir katılımcı ve hızlı bir şekilde devralındı. Özgün Apollo istemci kümesi iki maddeden oluşur:
- Tarayıcıda GraphQL sorguları çalıştırmanızı ve verileri depolamanızı sağlayan Apollo İstemcisi(ayrıca kendi devtools extensionına sahiptir).
- Seçtiğiniz front-end frameworkü için bir bağlayıcı(React-Apollo, Angular-Apollo, vb).
Varsayılan olarak, Apollo istemcisi verilerini Redux’ı kullanarak depolar. Redux, zengin bir ekosistem ile kurulmuş bir state yönetim kütüphanesidir.
Açık Kaynak Uygulamalar
GraphQL oldukça yeni olmasına rağmen umut vaadeden bazı açık kaynak uygulamaları tarafından da kullanılmaktadır.
VulcanJS
Öncelikle, bir sorumluluk reddi beyanı: Ben VulcanJS’in öncü geliştiricilerindenim. İnsanların çok fazla kalıplaşmış metinler olmadan React/GraphQL kümesinin gücünden yararlanmalarını sağlamak için VulcanJS’i oluşturdum. Birkaç saat içinde CRUD uygulamaları(İnstagram’ın kopyası gibi) oluşturmanızı sağlaması yönünden bunu, “Modern web ekosistemi için Rails” diye de düşünebilirsiniz.
Gatsby
Gatsby, 1.0 versiyonundan itibaren GraphQL tarafından beslenen bir React statik site üreticisidir. İlk bakışta garip bir kombinasyon gibi görünse de aslında oldukça güçlüdür. Oluşturma işlemleri(build process) sırasında Gatsby, birden fazla GraphQL API’leriden veri getirebilir ve sonra da bunları statik bir istemci React uygulaması oluşturmak için kullanabilir.
Diğer GraphQL Araçları
GraphiQL
GraphiQL, GraphQL’in endpointlerini sorgulamak için tarayıcı içi çok kullanışlı bir IDE’dir.
DataLoader
GraphQL sorgularının iç içe geçmiş yapısından dolayı, tek bir sorgu kolaylıkla onlarca veritabanı çağrısına neden olabilir. Performansı düşürmekten kaçınmak için Facebook tarafından geliştirilmiş DataLoader gibi bir toplu işleme ve ön belleğe alma kütüphanesi kullanabilirsiniz.
Create GraphQL Server
Create GraphQL Server, bir Node sunucu ve bir Mongo veritabanı tarafından desteklenen bir GraphQL sunucusunun kurulumunu kolaylaştıran bir komut satırı yardımcı programıdır.
GraphQL-up
Create GraphQL Server ile benzer şekilde GraphQL-up, GraphCool tarafından desteklenen yeni bir GraphQL back-endini hızlıca ön yükleyebilmenizi sağlar.
GraphQL Hizmetleri
Son olarak, sizin için sunucu tarafındaki tüm işlerle ilgilenecek bir dizi “GraphQL-backend-hizmeti” şirketleri vardır ve bu şirketler GraphQL ekosistemine adım atmanızın güzel bir yolu olabilir.
Graphcool
Graphcool, GraphQL ve AWS Lambda’yı bir developer planı ile birleştiren esnek bir backend platformudur.
Scaphold
Diğer bir GraphQL backend hizmetidir. Graphcool ile bir çok ortak özelliğe sahiptir.
Kaynaklar
Burada GraphQL hakkında bilgilerinizi tazeleyebilmeniz için bir kaç kaynak var.
GraphQL.org
Başlangıç için harika dökümanlara sahip GraphQL’in resmi sayfası.
LearnApollo
Graphcool tarafından yapılmış başka bir ücretsiz kurstur.
The Apollo Blog
Apollo blogunda genel olarak Apollo ve GraphQL hakkında tonlarca detaylı ve iyi yazılmış yayınlar var.
GraphQL Weekly
Graphcool ekibi tarafından düzenlenen, GraphQL hakkında her şeyi konu alan haftalık bir bülten.
Hashbang Weekly
GraphQL’e ilave olarak React ve Meteor’u da kapsayan bir diğer önemli bülten.
Freecom
Bu eğitim serisinde size GraphQL kullanarak bir Intercom klonunun nasıl oluşturulacağını öğretir.
Awesome GraphQL
GraphQL bağlantılarının ve kaynaklarının kapsamlı bir listesi.
Sonraki Adımlar
Peki yeni edindiğiniz GraphQL bilgilerinizi nasıl uygulama koyarsınız? Deneyeceğiniz birkaç tarifi aşağıya bırakıyorum.
Apollo + Graphcool + Next.js
Next.js ve React’ı zaten biliyorsanız, bu örnek Graphcool’u kullanarak GraphQL endpointinizi ayarlamanıza ve ardından Apollo ile sorgulamanızı sağlayacaktır.
VulcanJS
Vulcan eğitimi hem sunucu hem de istemci üzerinde basit bir GraphQL veri katmanı kurmanızı sağlar. Vulcan hepsi bir arada bir platform olduğundan dolayı herhangi bir kurulum olmadan başlamak için güzel bir yol. Yardıma ihtiyacınız olursa, Slack kanalımıza katılmaktan çekinmeyin!
GraphQL ve React Tutorial
Chroma blogunda, bir React/GraphQL uygulaması oluşturma üzerine altı bölümden oluşan bir eğitim serisi bulunmaktadır.
Sonuç
GraphQL, başlangıçta karmaşık görünebilir, çünkü modern geliştirmenin birçok alanına yayılmış bir teknolojidir. Ancak, altta yatan kavramları anlamak için zaman ayırırsanız, birçoğunun anlam ifade ettiğini göreceksiniz.
Aslında bunu kullanmaya ya da kullanmamaya karar verseniz de GraphQL’i tanımak için zaman ayırmaya değer. Gittikçe daha fazla sayıda şirket ve framework GraphQL’i benimsiyor ve önümüzdeki birkaç yıl içinde web’in temel yapı taşlarından biri haline gelebilir.
İlk defa yazılım hakkında bir makaleyi çevirdim, bazı terimler zorladı itiraf edeyim :D Bu sebeple hatalarım olabilir ama umarım fazla değillerdir, fark ettiğiniz hatalar olursa doğrusunu öğrenmek isterim. Okuduğunuz için teşekkürler :)