React Geliştiricileri için GraphQL Temelleri

REST, sabit biçimli uç noktalar sunar: GET /users/:id, istemcinin neye ihtiyaç duyduğundan bağımsız olarak kullanıcının tamamını döndürür. GraphQL, istemcilerin tam olarak hangi alanları istediklerini belirtmesine olanak tanır; böylece gereğinden fazla veri çekme (çok fazla veri) ve gereğinden az veri çekme (yeterli veri olmaması ve birden fazla istek gerektirmesi) ortadan kalkar.

Tek bir GraphQL sorgusu, bir kullanıcıyı, kullanıcının gönderilerini ve her gönderinin yazarını tek bir gidiş-dönüşte alabilir.

Her GraphQL API'si, Schema Definition Language (SDL) ile yazılmış bir şemayla tanımlanır. Şema; türleri, bu türlerin alanlarını ve istemcilerin üzerinde işlem yapabileceği kök Query, Mutation ve Subscription türlerini bildirir.

Şema, istemci ile sunucu arasındaki sözleşmedir. Şema üzerinde anlaşmaya varıldıktan sonra ön yüz ve arka yüz ekipleri paralel çalışabilir.

Bir GraphQL sorgusu alanları seçer: { user(id: "1") { name email posts { title } } }. İç içe alanlar, ilişkilerde tek bir istek içinde ilerlemenizi sağlar. Takma adlar alanları yeniden adlandırır: { me: user(id: "1") { name } }. Parçalar, alan seçimlerini birden fazla sorguda yeniden kullanır.

Değişkenler sorguları yeniden kullanılabilir hâle getirir: query GetUser($id: ID!) { user(id: $id) { name } } with variables: { id: "1" }.

GraphQL şemasındaki her alanın sunucuda bir çözümleyici işlevi vardır. İstemci user.name için sorgu yaptığında, user çözümleyicisi kullanıcı nesnesini getirir ve name çözümleyicisi (veya varsayılan çözümleyici) name alanını döndürür.

Alan düzeyindeki bu çözümleme, GraphQL'in yalnızca istenen verileri tam olarak getirmesini sağlar.

100 gönderiden oluşan bir listeyi sorguladığınızı ve her gönderinin yazarını içerdiğini düşünün. Saf uygulama, yazarlar için 100 ayrı veritabanı sorgusu çalıştırır. Bu N+1 sorunu, optimizasyon olmadan GraphQL API'lerini yavaşlatır.

DataLoader, istek başına bir önbellek ve toplu işlev kullanarak tüm yazar aramalarını tek bir veritabanı sorgusunda toplu hâle getirerek N+1 sorununu çözer.

Apollo Studio ve GraphQL Playground, bir GraphQL API'sini etkileşimli olarak keşfetmeye yarayan tarayıcı tabanlı kullanıcı arayüzleridir. Şemadaki alanları otomatik olarak tamamlar, sorgu sonuçlarını görüntüler ve tür belgelerini satır içinde gösterirler.

İstemci kodu yazmadan önce, aşina olmadığınız bir GraphQL API'sini anlamanın en hızlı yolu playground'ı kullanmaktır.

GraphQL API'leri kendi şemalarını bir içgözlem sorgusu aracılığıyla sunar: { __schema { types { name } } }. İstemciler, kullanılabilir türleri, alanları ve bağımsız değişkenleri keşfetmek için şemanın kendisini sorgulayabilir.

graphql-codegen gibi kod oluşturma araçları, API şemasıyla otomatik olarak eşleşen TypeScript türleri oluşturmak için içgözlemden yararlanır.

GraphQL mutasyonları verileri değiştirir: mutation CreatePost($input: PostInput!) { createPost(input: $input) { id title } }. Abonelikler kalıcı bir bağlantı (genellikle WebSocket) kurar ve güncellemeleri gönderir: subscription { postAdded { id title } }.

Üç kök türün tümü (Query, Mutation, Subscription) aynı alan seçimi sözdizimini kullanır.

GraphQL; karmaşık, iç içe veri gereksinimleri olan, farklı alan alt kümelerine ihtiyaç duyan birden çok istemci türü (mobil, web, TV) kullanan veya alanların kullanımdan kaldırılmasının uç noktaları sürümlendirmeye tercih edildiği, hızla gelişen API'ler içeren uygulamalarda öne çıkar.

REST, öngörülebilir ve düz kaynak biçimlerine sahip CRUD API'leri için daha basittir; ETag'ler ve önbellek üstbilgileri aracılığıyla mükemmel HTTP önbellekleme özellikleri sunar.

Apollo Client, en fazla özelliğe sahip GraphQL istemcisidir: normalleştirilmiş önbellek, yerel durum yönetimi, abonelikler ve hata işleme bağlantıları sunar. URQL, belge önbelleği ve daha basit bir API ile daha hafiftir. graphql-request ile React Query, gelişmiş önbellekleme gerektirmeyen temel sorgu+mutasyon işlemleri için en basit yaklaşımdır.

Seçiminizi önbellekleme gereksinimlerinize göre yapın: sorgular arasında paylaşılan varlıklar için normalleştirilmiş önbellek (Apollo), bağımsız sorgular için daha basit belge önbelleği (URQL veya React Query).

Basit bir SDL: type User { id: ID! name: String! posts: [Post!]! } type Post { id: ID! title: String! author: User! } type Query { user(id: ID!): User users: [User!]! }. Ünlem işaretleri, boş değer kabul etmeyen alanları belirtir.

Bu şema, istemciye her türde hangi alanların bulunduğunu ve hangi sorguların kullanılabildiğini tam olarak bildirerek tür güvenli kod oluşturmayı mümkün kılar.

REST ve GraphQL bağlamında "gereğinden fazla veri getirme" ne anlama gelir?

GraphQL, istemcilerin şema tarafından tanımlanan bir sorgu dili kullanarak tam olarak ihtiyaç duydukları alanları istemesine olanak tanır (gereğinden fazla veya eksik veri getirme yoktur). Çözümleyiciler her alanı yanıtlar; DataLoader, N+1 sorununu çözer. İçgözlem, TypeScript türleri için kod oluşturmayı mümkün kılar. Apollo Client, URQL ve React Query, React ile uyumlu başlıca GraphQL istemcileridir.

Karmaşık, iç içe ve birden çok istemciye yönelik veri gereksinimleri için GraphQL'i; öngörülebilir biçimlere sahip basit CRUD işlemleri için REST'i seçin.