API'ler için türlendirilmiş (typed) sorgulama dillerinden birisi olarak öne çıkan GraphQL'e bir süredir uğramıyordum. Daha doğrusu GraphQL sorgusu çalıştırılabilecek şekilde API servis hazırlıklarını yapmaya üşeniyordum. Bu nedenle işi kolaylaştıran ve Heroku üzerinden sunulan Hasura GraphQL Engine hizmetine bakmaya karar verdim. Hasura, veriyi PostgreSQL kullanarak saklıyor ve ayrıca API'yi bir Docker Container içerisinden sunuyor. Amacım Hasura tarafında hazırlayacağım iki kobay veri setini, Vue.js tabanlı bir istemcisinden tüketmek. Basitçe listeleme yapıp, veri ekleme işini yapabilsem başlangıç aşamasında yeterli olur. İşe Hasura servisini hazırlayarak başlamak lazım.

Pek tabii Heroku üzerinde bir hesabımızın olması gerekiyor. Sonrasında şu adrese gidip elements kısmından Hasura GraphQL Engine'i seçmek yeterli.

Gelinen yerden Deploy to Heroku diyerek projeyi oluşturabiliriz.

Ben aşağıdaki bilgileri kullanarak bir proje oluşturdum.

Deploy başarılı bir şekilde tamamlandıktan sonra,

View seçeneği ile yönetim paneline geçebiliriz.

Dikkat edileceği üzere GraphQL sorgularını çalıştırabileceğimiz hazır bir arayüz sunuluyor. Ancak öncesinde örnek veri setleri hazırlamalıyız. Bunun için Data sekmesinden yararlanabiliriz.

Arabirimin kullanımı oldukça kolay. Ben aşağıdaki özelliklere sahip tabloları oluşturdum.

categories isimli tablomuzda unique tipte, get_random_uuid() fonksiyonu ile eklenen satır için rastgele üretilen categoryId ve text tipinde title isimli alanlar bulunuyor. categoryId, aynı zamanda primary key türünden bir alan.

products tablosunda da UUID tipinde productId, text tipinde description, number tipinde listPrice ve yine UUID tipinde categoryId isimli alanlar mevcut. categoryId alanını, ürünleri kategoriye bağlamak için (foreign key relations) kullanıyoruz. Ama bu alanı foreign key yapmak için Modify pencersine geçmeliyiz.

İlişkinin geçerlilik kazanması içinse, categories tablosunun Relationships penceresine gidip önerilen bağlantıyı eklemek gerekir.

Bu durumda categories üzerinden products'a gidebiliriz. Ters ilişkiyi de kurabiliriz ve bir ürünle birlikte bağlı olduğu kategorinin bilgisini de yansıtabiliriz ki ürünleri çektiğimizde hangi kategoride olduğunu da göstermek güzel olur. Bunu nasıl yapabileceğinizi bir deneyin isterim.

Hasura'nın Postgresql tarafındaki örnek tablolarımız hazır. İstersek Insert Row pencersinden tablolara örnek veri girişleri yapabilir ve GraphiQL pencresinden sorgular çalıştırabiliriz. Ben yaptığım denemelerle alakalı bir kaç örnek ekran görüntüsü paylaşayım. Arabirimin sağ tarafında yer alan Docs menüsüne de bakabilirsiniz. Burada query ve mutation örnekleri, hazırladığımız veri setleri için otomatik olarak oluşturuluyorlar.

İşte arabirim üzerinden denediğim bir kaç örnek sorgu.

Kategorilerin başlıkları,

query{
  categories{
    title
  }
}

Kategorilere bağlı ürünler

query{
  categories{
    title
    products{
      description
      listPrice
    }
  }
}

Ürünlerin tam listesi ve bağlı olduğu kategori adları

query{
  products{
    description
    listPrice
    category{
      title
    }
  }
}

Veri girişi de yapabiliriz. Bunun için mutation kullanıldığını daha önceden öğrenmiştim. Örneğin yeni bir kategoriyi aşağıdaki gibi ekleyebiliriz.

mutation {
  insert_categories(objects: [{
    title: "Çorap",
  }]) {
    returning {
      categoryId
    }
  }

Hasura, GraphQL API’si arkasında PostgreSQL veri tabanını kullanırken SQLden aşina olduğumuz bir çok sorgulama metodunu da hazır olarak sunar. Örneğin fiyatı 300 birimin üstünde olan ürünleri aşağıdaki sorgu ile çekebiliriz.

{
  products(where: {listPrice: {_gt: 300}}) {
    description
    listPrice
    category {
      title
    }
  }
}

Where metodu sorgu şemasına otomatik olarak eklenmiştir. _gt tahmin edileceği üzere greater than anlamındadır. Yukarıdaki sorguya fiyata göre tersten sıralama seçeneği de koyabiliriz. Sadece where koşulu arkasından order_by çağrısı yapmamız yeterlidir.

{
  products(where: {listPrice: {_gt: 300}}, order_by: {listPrice: desc}) {
    description
    listPrice
    category {
      title
    }
  }
}

Çok büyük veri setleri düşünüldüğünde önyüzler için sayfalama önemlidir. Bunun için limit ve offset değerlerini kullanabiliriz. 5nci üründen itibaren 5 ürünün getirilmesi için aşağıdaki sorgu kullanılabilir.

{
  products(limit: 5, offset: 5) {
    description
    listPrice
    category {
      title
    }
  }
}

Hasura Query Engine’in sorgu seçenekleri ile ilgili olarak buradaki dokümanı takip edebiliriz.

İstemci tarafını basit bir Vue uygulaması olarak geliştirmeye karar vermiştim. Aşağıdaki terminal komutunu kullanıp varsayılan ayarları ile projeyi oluşturdum. Ayrıca GraphQL tarafı ile konuşabilmek için gerekli npm paketlerini de yükledim. Apollo (ilerleyen ünitelerde ondan bir GraphQL Server yazmayı deneyeceğim), GraphQL servisimiz ile kolay bir şekilde iletişim kurmamızı sağlayacak.

Görsel taraf için bootstrap kullanmayı tercih ettim.

sudo vue create nba-client
sudo npm install vue-apollo apollo-client apollo-cache-inmemory apollo-link-http graphql-tag graphql bootstrap --save

Vue uygulaması tarafından yaptıklarım kısaca şöyle (Kod dosyalarındaki yorum bloklarında daha detaylı bilgiler mevcut)

• Components klasörüne tek ürün için kullanılabilecek Product isimli bir bileşen eklendi (anasayfa listelemesinde tekrarlanacak türden bir bileşen)
• Main.js içeriği Hasura'yı ve GraphQL'i kullanabilir hale getirildi
• Ürünlerin listesini gösterebilmek için components klasörüne ProductList bileşeni eklendi
• Yeni bir ürün ekleyebilmek için ProductAdd isimli bileşen geliştirildi
• App.vue içeriği eklenen bileşenleri kullanacak şekilde düzenlendi

Bu servisi JWT Authentication bünyesine almak lazım. İşte size güzel bir araştırma konusu. Başlangıç noktası olarak Auto0'ın şu dokümanına bakılabilir. Ben şu an için sadece HASURA_GRAPHQL_ADMIN_SECRET kullanarak servis adresine erişimi kısıtladım.

Uygulamayı çalıştırmak için,

npm run serve

terminal komutunu kullanabiliriz. Sonrasında http:https://localhost:8080 adresine gitmemiz yeterli.

Yeni ürün ekleme bileşeni konulduktan sonrasına ait örnek bir ekran görüntüsü.

Hatta yeni bir forma eklediğimizde gönderilen Graphql Mutation sorgusundan dönen değeri de F12 sonrası Network sekmesinden yakalayabiliriz.

throw new ToBeContinuedException("Yeni ürün ekleme sayfasında kategori seçiminde combobox kullanımı yapılmalı");

• Heroku'da Docker Container içerisinde çalışan ve PostgreSQL verileri GraphQL ile sorgulanabilir olarak sunan Hasura isimli bir motor olduğunu
• Hasura arabirimden ilişkili tabloları nasıl oluşturabileceğimi
• Bir kaç basit GraphQL sorgusunu (sorgularda sayfalama yapmak, ilişkili veri getirmek, where koşulları kullanmak)
• Vue tarafında GraphQL sorgularının nasıl gönderilebileceği
• Component içinde Component kullanımlarını
• Temel component tasarlama adımlarını
• Vue tarafından bir Mutation sorgusunun nasıl gönderilebileceğini ve schema veri tiplerine dikkat etmem gerektiğini