GraphQL Nedir, Nasıl Kullanılır?
JAMstack SEO İçin En Hızlı Sorgu Dili
Nedir bu GraphQL?
GraphQL kısaca, 2012'den beri Facebook tarafından geliştirilmiş, 2015 yılında açık kaynak haline gelmiş, API’lar için optimize edilmiş kapsamlı ve kompleks sorgu dilidir. İmplementasyon sonrasındaki sorgu arayüzü de graphiql’dir, ikisi birbirinden farklıdır.
Esnek yapısıyla hemen hemen tüm dildeki web uygulamalarıyla kullanılabilir. Bu yazıda GatsbyJS için temel seviye sorgu biçimi üzerinde duracağım. GatsbyJs sadece derleme esnasındaki sorguları GraphQL ile yaparak, harici bir veritabanına ya da NodeJS paketine ihtiyaç duyulmaksızın, bir “şema” dan verileri çeker ve framework’e aktarır.
Özellikle JAMstack ile yazılmış statik web uygulamalarındaki veritabanından seri sorgu çekme sorununa en uygun çözüm olarak gösterilebilir. En azından React için konuşursak, frontend tarafından yapılan kompleks sorgular tarayıcı içerisinde çok fazla request oluşturur ve internet hızından bağımsız olarak veri kaynağının sorgu karşılama yeteneğine bağlı olarak bekleme süresi artar ve kimse web sitesi ziyaretçilerine sabır taşı muamelesi yapmak istemez.
Peki ama neden?
Google LightHouse Web Sayfa Hız Index’ine göre, web sitenizden ilk anlamlı verinin tarayıcıya düşmesinin optimum hızı 300 milisaniye. Bu hızı referans alarak, sitenizin/uygulamanızın ortalama açılma/etkileşim süresini ölçebilirsiniz. Ancak, ne içeriğinizin boyutu ne de internet hızı bu sorgular için yeterli etmen değildir. Sorgunun soruluş ve frontende gönderiliş tarzı da önemlidir.
Örneğin şu adresten, günümüzde en çok kullanılan CMS’lerden WordPress’in data tutuş ve çağırış biçimlerini PHP üzerinden nasıl yaptığını inceleyebilirsininiz.
Bu sayede SSR(Serve Side Rendering) uygulamalarda veritabanından veri isteği alıp-gönderme yeteneği olan teknolojiler arasındaki farkları daha rahat görebiliriz.
Kod mimarisi olarak, SQL sorgu diline hakimseniz, GraphQL sizi çok fazla zorlamayacaktır. Şema Ağacı gibi düşünebilirsiniz. Her fieldlara ulaşırken bu fieldlara argümanlar vererek tüm sorgunuzu kompleks hale getirebilirsiniz. GraphQL, API’ınızın döndürdüğü sorguları değil sadece kullanıcının ihtiyacı olan verileri döndürterek, tarayıcı içerisindeki şişermeyi önler ve daha performanslı sorgular yapmanıza olanak sağlar.
GraphQL sorgularındaki temel şema şöyle;
Query Operation Type: Operasyon tipinin ne olacağını belirtir. Gatsby içerisinde sorgu anonimse “query” olarak kullanılır. Operation Name ile değiştirip anonimlikten çıkarabilirsiniz.
Operation Name: Sorgu isimlendirmek için kullanılır. Aynı komponentte birden fazla sorgua dahil edilecekse, Node içerisinden komponente hangi sorgu operasyonuna dahil edileceğini söyler.
Fields: Sorgudan çıkan ham veri alanı olarak adlandırılabilir. Fonksiyonalite olarak root dizini gibi, değiştirmeniz ve manipüle etmeniz gerekmez.
Ne vereyim abime?
Gatbsy, hali hazırda içerisinde GraphQL paketini de barındırır. Kendi içerisindeki config dosyaları da dahil olmak üzere tüm sorguları GraphQL den çağırır. Ancak tüm bu data çağırma fonksiyonları için GraphQL kullanmak zorunda değilsiniz, bunun için GraphQL’siz Gatsby dökümanını inceleyebilirsiniz.
Hangi veriyi istiyorsanız, onu çağırın, komponentizine ekleyin ve çağırılmasını istemediğiniz verileri dahil etmeyin. Tüm sorgu datasını komponentte, tutmaz, “Ne vereyim abime?” diye beklemez. Çünkü zaten sorulup çağırılmış halde build olur.
Gatsby için, lokalinizde çalıştırdığınız adresinizin sonuna ___graphql eklemeniz yeterli.
localhost.com/___graphql
Basit bir örnekle başlayalım. Hangi veriye ihtiyacınız varsa, JSON dosyasında yapıldığı gibi çağıralım.
query SiteQuery {
site {
id
siteMetadata {
title
siteUrl
description
}
}
}Ctrl+Enter kısayolu ile sorgunuzu hemen sağ tarafta çalıştırabilirsiniz.
Shift+Ctrl+P ile de sorgu kodunuzu prettify edebilirsiniz.
Hatasız olarak elde ettiğiniz ham veriyi, JSX, TSX üzerinden komponentizine ekleyebilirsiniz.
import React from "react"
import { graphql } from "gatsby"export default ({ data }) => (
<div>
<h1>About {data.site.siteMetadata.title}</h1>
<p>Site İçeriği </p>
</div>
)export const query = graphql`
query {
site {
siteMetadata {
title
}
}
}
`}
Bunun gibi web uygulamanız için kullanacağınız statik verileri tek bir yerden çekerek, etkili performans alabilirsiniz. Aynı şekilde Imaj ve Markdown dosyalarınız için de kullanabilirsiniz.
Hep mi Statik?
Değil, değişken metodlarıyla sorgularınızı komponent bazlı dinamikleştirebilirsiniz.
export const blogListQuery = graphql`
query blogListQuery($skip: Int!, $limit: Int!) {
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: $limit
skip: $skip
) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`“$***” şeklinde atanan değişkenler gatsby-node.js dosyasından tanımladığımız probslara ve resolve ettirdiğimiz sayfaya göre bir değer alabilmekte. Bu sayede GraphQL’le sadece veri sorgusunu çağırmakla kalmıyoruz, hangi sorgu field’larından ne kadar çekileceğini, hangi sırada “DESC-ASC” geleceğini, hangi tarih formatında görüneceğini belirleyebilirsiniz. Aynı zamanda pagination ya da site/uygulama içerisinde arama da yaptımak mümkün.
Şu adresten, değişkenleri inceleyebilirsiniz.
Kapsamlı şekilde öğrenmek için kaynaklar;
https://graphql.org/learn/
https://www.howtographql.com/
Kaynaklar:
