GraphQL İstemcileri

Photo by Caspar Camille Rubin on Unsplash

GraphQL API’ı bir REST API’ndan daha altta yatan yapıya sahip olduğundan, otomatik olarak toplu işleme, önbelleğe alma ve diğer özellikleri işleyebilen daha güçlü istemcileri vardır Relay gibi. Ancak GraphQL sunucusu aramak için karmaşık bir istemciye ihtiyacınız yoktur. Bununla birlikte express-graphql, GraphQL sunucusunu bağladığınız endpointe bir HTTP POST isteği gönderebilirsiniz, JSON verisinde query alanında GraphQL sorgusu olarak gönderilir.

Örneğin, Express ile GraphQL Sunucusu Çalıştırma yazısında http://localhost:4000/graphql’de bir GraphQL sunucusu oluşturduk ve GraphQL sorgusu { hello } göndermek istiyoruz. Bunu komut satırında curl ile yapabiliriz. Eğer bunu terminale yapıştırırsan :)

curl -X POST \
-H "Content-Type: application/json" \
-d '{"query": "{ hello }"}' \
http://localhost:4000/graphql

Döndürülen JSON çıktısını görmelisiniz:

{"data":{"hello":"Hello world!"}}

Ayrıca GraphQL’i tarayıcıdan göndermek kolaydır. Gir http://localhost:4000 e, aç geliştirici konsolunu, yapıştır bunu gör bak neler oluyor:

var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("POST", "/graphql");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = function () {
  console.log('data returned:', xhr.response);
}
xhr.send(JSON.stringify({query: "{ hello }"}));

Döndürülmüş veriyi görmelisiniz, çıktısı konsolda :

data returned: Object { hello: "Hello world!" }

Bu örnekte, sorgu sadece sabit kodlanmış dizedir. Uygulamanız daha kompleks hale gelir, ve GraphQL endpointleri ekler Geçici Argümanlar da açıklandığı gibi argümanlar alırsa, GraphQL istemci kodunda değişkenleri kullanarak sorgular inşa etmek isteyeceksin. Bunu, sorguda bir dolar işareti öneki anahtar kelimeye ekleyip ve JSON verisine fazladan bir alan ekleyerek yapabilirsiniz.

Örneğin, örnek sunucuyu aşağıdaki şemaya Geçici Argümanlar dan çalıştırdığımızı varsayalım.

type Query {
  rollDice(numDice: Int!, numSides: Int): [Int]
}

JavaScript kullanarak şu kodla erişebilirsiniz :

var dice = 3;
var sides = 6;
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("POST", "/graphql");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Accept", "application/json");
xhr.onload = function () {
  console.log('data returned:', xhr.response);
}
var query = `query RollDice($dice: Int!, $sides: Int) {
  rollDice(numDice: $dice, numSides: $sides)
}`;
xhr.send(JSON.stringify({
  query: query,
  variables: { dice: dice, sides: sides },

Değişkenler için bu sözdizimini kullanmak iyi bir fikir çünkü otomatik olarak kaçıştan kaynaklanan hataları önlediğinden ve sunucunuzu izlemeyi kolaylaştırıyor.

Genel olarak, Relay gibi bir GraphQL istemcisi kurmak biraz zaman alacaktır, ancak uygulamanız büyüdükçe daha fazla özellik elde etmek buna değer. Temel HTTP aktarım katmanı olarak HTTP isteklerini kullanmaya başlayabilir ve uygulamanız daha karmaşıklaştığında daha karmaşık bir istemciye geçebilirsiniz.

Bu noktada tek bir dize alan bir API için GraphQL ile bir istemci ve sunucu yazabilirsiniz. Daha fazlasını yapmak için, diğer temel veri tiplerini nasıl kullanacağınız öğrenmek isteyeceksiniz