GraphQL Nedir ? — İnceleme

Facebook tarafından ücretsiz olarak sunulan bu teknoloji REST (API) mimarilere sorgu oluşturma imkanı sağlar. Client ile api arasındaki verilerin, belirlenen kontratlar çerçevesinde iletilmesini sağlar.

Örnek bir uygulama ile bu teknolojinin ne gibi faydalar sağladığını inceleyelim.

Ortam kurulumu:

Öncelikle proje dizini oluşturalım.

mkdir GraphApp
cd GraphApp

Ardından bir package.json dosyası oluşturalım.

npm init -y

Bunların yanında babel cli’na ihtiyacımız olacak.

npm i babel-cli babel-preset-es2015

package.json içinde script altına aşağıdaki kodu ekleyelim.

"start": "nodemon app.js --exec babel-node --presets es2015"

Kullanacağımız graphql kütüphanesini npm üzerinden yüklüyoruz.

npm i graphql-yoga --save

Evet kurulum işlemlerini tamamladık. En zor kısmını hallettiğimize göre kolay olan tarafa geçelim :)

Ana dizine app.js adında bir dosya oluşturalım ve içine aşağıdaki uygulamamızı yazalım.

import { GraphQLServer } from 'graphql-yoga'
const typeDefs = `
 type Query {
    hello: String
 }
`
const resolvers = {
 Query: {
   hello: () => "Selam.",
 },
}
const server = new GraphQLServer({ typeDefs, resolvers })
server.start(() => console.log('Server is running on localhost:4000'))

Kısaca bahsetmek gerekirse. İlk satırda graphql-yoga kütüphanesini import ediyoruz. Önemli kısımlardan biri “typeDefs” altında tanımladığımız type’ler diğeri ise “resolvers” alanında tanımladığımız query’ler.

“npm start” diyerek kodu çalıştırdığımızda aşağıdaki sonucu alacağız.

http://localhost:4000 adresi üzerinden sayfamızı görüntülediğimizde bizi query yazabileceğimiz ve test edebileceğimiz bir dashboard karşılıyor.

Evet örnek bir user objesi oluşturarak deneyelim.

 const typeDefs = `
  type Query {
  user: User!
 }
 type User{
    id: ID!
    username: String!
   }
 `;
 const resolvers = {
 Query: {
  user: () => ({
    id: 1,
    username: 'Abdulkerim'
   })
  },
 };

UI tarafında, aşağıdaki query yazarak data’mıza ulaşabiliriz.

Database üzerinden alınan bir veri setinde id’ye göre filtreleme yapmak istersek aşağıdaki yöntemi kullanabiliriz. (Users dizisinin db üzerinden geldiğini düşünebilirsiniz.)

Burada kritik nokta UI’dan gelecek quer’yi karşılayacak alanımız.

const resolvers = {
 Query: {
  user: (parent, args) => { 
    return Users.find(user => String(user.id) === args.id);
  }
 },
};

UI tarafında oluşturacağımız graphql kodumuz. Örnekte de görüldüğü üzere sadece id alanı “3” olan kullanıcıyı listelemektedir.

Daha kompleks query’ler için graphql’in resmi internet sitesini inceleyebilirsiniz.

GraphQL: A query language for APIs.

Faydalı olması dileği ile… Hoşçakalın.