GraphQL - Hızlı Kılavuz
GraphQL, RESTful API çağrılarını optimize etmek için Facebook tarafından geliştirilen açık kaynaklı bir sunucu tarafı teknolojisidir. Bir yürütme motoru ve bir veri sorgulama dilidir. Bu bölümde, GraphQL kullanmanın avantajlarını tartışıyoruz.
Neden GraphQL
RESTful API'ler, açık ve iyi yapılandırılmış kaynak odaklı yaklaşımı takip eder. Bununla birlikte, veriler daha karmaşık hale geldiğinde rotalar uzar. Bazen tek bir istekle veri almak mümkün olmamaktadır. GraphQL'in kullanışlı olduğu yer burasıdır. GraphQL, verileri dolaşmak, geri getirmek ve değiştirmek için güçlü sorgu sözdizimi ile verileri grafik biçiminde yapılandırır.
Aşağıdakiler, GraphQL sorgu Dili kullanmanın avantajlarıdır -
Ne istediğini sor - ve al
API'nize bir GraphQL sorgusu gönderin ve tam olarak ihtiyacınız olanı alın. GraphQL sorguları her zaman tahmin edilebilir sonuçlar verir. GraphQL kullanan uygulamalar hızlı ve kararlıdır. Restful servislerinin aksine, bu uygulamalar sunucudan alınması gereken verileri kısıtlayabilir.
Aşağıdaki örnek, bunu daha iyi anlamanıza yardımcı olacaktır -
İd, firstName, lastName ve collegeName niteliklerine sahip Student iş nesnesini düşünelim . Bir mobil uygulama sadece getirmesi gerekiyor varsayalım firstName ve kimliği . / Api / v1 / öğrenciler gibi bir REST uç noktası tasarlarsak , bir öğrenci nesnesinin tüm alanları için veri getirecektir . Bu, verilerin RESTful hizmeti tarafından fazla getirildiği anlamına gelir. Bu problem GraphQL kullanılarak çözülebilir.
Aşağıda verilen GraphQL sorgusunu düşünün -
{
students {
id
firstName
}
}
Bu, yalnızca id ve ad alanları için değerler döndürür. Sorgu, öğrenci nesnesinin diğer özellikleri için değerleri getirmez. Yukarıda gösterilen sorgunun yanıtı aşağıda gösterildiği gibidir -
{
"data": {
"students": [
{
"id": "S1001",
"firstName": "Mohtashim"
},
{
"id": "S1002",
"firstName": "Kannan"
}
]
}
}
Tek bir istekte birçok kaynağı alın
GraphQL sorguları, ilişkili iş nesnelerinin sorunsuz bir şekilde alınmasına yardımcı olurken, tipik REST API'leri birden çok URL'den yüklenmeyi gerektirir. GraphQL API'leri, uygulamanızın ihtiyaç duyduğu tüm verileri tek bir istekte getirir. GraphQL kullanan uygulamalar, yavaş mobil ağ bağlantılarında bile hızlı olabilir.
Şu niteliklere sahip bir iş nesnesi daha düşünelim : College : isim ve konum. Öğrenci iş nesnesi Koleji nesne ile bir dernek ilişkisi vardır. Öğrencilerin ve üniversitelerinin ayrıntılarını almak için bir REST API kullanacak olsaydık, sunucuya / api / v1 / öğrenciler ve / api / v1 / kolejler gibi iki istekte bulunacağız . Bu, her talepte verilerin yetersiz alınmasına yol açacaktır. Bu nedenle mobil uygulamalar, istenen verileri almak için sunucuya birden çok çağrı yapmak zorunda kalır.
Ancak, mobil uygulama GraphQL kullanarak tek bir istekte hem Öğrenci hem de Üniversite nesneleri için ayrıntıları getirebilir.
Aşağıdaki, verileri almak için bir GraphQL sorgusudur -
{
students{
id
firstName
lastName
college{
name
location
}
}
}
Yukarıdaki sorgunun çıktısı, aşağıda gösterildiği gibi tam olarak istediğimiz alanları içerir -
{
"data": {
"students": [
{
"id": "S1001",
"firstName": "Mohtashim",
"lastName": "Mohammad",
"college": {
"name": "CUSAT",
"location": "Kerala"
}
},
{
"id": "S1002",
"firstName": "Kannan",
"lastName": "Sudhakaran",
"college": {
"name": "AMU",
"location": "Uttar Pradesh"
}
},
{
"id": "S1003",
"firstName": "Kiran",
"lastName": "Panigrahi",
"college": {
"name": "AMU",
"location": "Uttar Pradesh"
}
}
]
}
}
Bir tür sistemle nelerin mümkün olduğunu açıklayın
GraphQL güçlü bir şekilde yazılmıştır ve sorgular alanlara ve bunlarla ilişkili veri türlerine dayanmaktadır. Bir GraphQL sorgusunda tür uyuşmazlığı varsa, sunucu uygulamaları açık ve yardımcı hata mesajları verir. Bu, sorunsuz hata ayıklamaya ve istemci uygulamaları tarafından hataların kolay tespitine yardımcı olur. GraphQL ayrıca, açık veri dönüştürme ve ayrıştırmayı azaltmaya yardımcı olabilecek istemci tarafı kitaplıkları da sağlar.
Öğrenci ve Üniversite veri türlerinin bir örneği aşağıda verilmiştir -
type Query {
students:[Student]
}
type Student {
id:ID!
firstName:String
lastName:String
fullName:String
college:College
}
type College {
id:ID!
name:String
location:String
rating:Float
students:[Student]
}
Güçlü geliştirici araçlarıyla daha hızlı hareket edin
GraphQL, belgeleme ve sorguları test etmek için zengin geliştirici araçları sağlar. GraphiQL, sorgu ve şemasının belgelerini oluşturan mükemmel bir araçtır. Ayrıca, sorguları oluştururken GraphQL API'lerini ve akıllı kod tamamlama özelliğini test etmek için bir sorgu düzenleyicisi sağlar.
Bu bölümde, GraphQL için çevresel kurulum hakkında bilgi edineceğiz. Bu eğitimdeki örnekleri yürütmek için aşağıdakilere ihtiyacınız olacak -
Linux, macOS veya Windows çalıştıran bir bilgisayar.
Bir web tarayıcısı, tercihen Google Chrome'un en son sürümü.
Node.js'nin yeni bir sürümü yüklendi. En son LTS sürümü önerilir.
VSCode için GraphQL uzantısına sahip Visual Studio Code veya seçtiğiniz herhangi bir kod düzenleyicisi.
Nodejs ile GraphQL sunucusu nasıl oluşturulur
Aşağıda gösterildiği gibi Nodejs ile GraphQL sunucusu oluşturmak için ayrıntılı ve adım adım bir yaklaşımdan geçeceğiz -
Adım 1 - Düğüm ve Npm Sürümlerini Doğrulayın
NodeJ'leri kurduktan sonra, terminalde aşağıdaki komutları kullanarak düğüm ve npm sürümünü doğrulayın -
C:\Users\Admin>node -v
v8.11.3
C:\Users\Admin>npm -v
5.6.0
Adım 2 - Bir Proje Klasörü Oluşturun ve VSCode'da Açın
Projenin kök klasörü test-app olarak adlandırılabilir.
Aşağıdaki talimatları kullanarak klasörü görsel stüdyo kod düzenleyicisini kullanarak açın -
C:\Users\Admin>mkdir test-app
C:\Users\Admin>cd test-app
C:\Users\Admin\test-app>code.
Adım 3 - package.json'u oluşturun ve Bağımlılıkları Kurun
GraphQL sunucu uygulamasının tüm bağımlılıklarını içerecek bir package.json dosyası oluşturun.
{
"name": "hello-world-server",
"private": true,
"scripts": {
"start": "nodemon --ignore data/ server.js"
},
"dependencies": {
"apollo-server-express": "^1.4.0",
"body-parser": "^1.18.3",
"cors": "^2.8.4",
"express": "^4.16.3",
"graphql": "^0.13.2",
"graphql-tools": "^3.1.1"
},
"devDependencies": {
"nodemon": "1.17.1"
}
}
Bağımlılıkları aşağıda verilen komutu kullanarak kurun -
C:\Users\Admin\test-app>npm install
Adım 4 - Veri Klasöründe Düz Dosya Veritabanı Oluşturun
Bu adımda, verileri depolamak ve almak için düz dosyalar kullanıyoruz. Bir klasör verisi oluşturun ve iki dosya ekleyinstudents.json ve colleges.json.
Aşağıdaki colleges.json dosya -
[
{
"id": "col-101",
"name": "AMU",
"location": "Uttar Pradesh",
"rating":5.0
},
{
"id": "col-102",
"name": "CUSAT",
"location": "Kerala",
"rating":4.5
}
]
Aşağıdaki students.json dosya -
[
{
"id": "S1001",
"firstName":"Mohtashim",
"lastName":"Mohammad",
"email": "[email protected]",
"password": "pass123",
"collegeId": "col-102"
},
{
"id": "S1002",
"email": "[email protected]",
"firstName":"Kannan",
"lastName":"Sudhakaran",
"password": "pass123",
"collegeId": "col-101"
},
{
"id": "S1003",
"email": "[email protected]",
"firstName":"Kiran",
"lastName":"Panigrahi",
"password": "pass123",
"collegeId": "col-101"
}
]
Adım 5 - Bir Veri Erişim Katmanı Oluşturun
Veri klasörü içeriklerini yükleyen bir veri deposu oluşturmamız gerekiyor. Bu durumda koleksiyon değişkenlerine, öğrencilere ve kolejlere ihtiyacımız var . Uygulama verilere ihtiyaç duyduğunda, bu koleksiyon değişkenlerini kullanır.
Aşağıdaki gibi proje klasöründe db.js dosyası oluşturun -
const { DataStore } = require('notarealdb');
const store = new DataStore('./data');
module.exports = {
students:store.collection('students'),
colleges:store.collection('colleges')
};
Adım 6 - Şema Dosyası, schema.graphql oluşturun
Mevcut proje klasöründe bir şema dosyası oluşturun ve aşağıdaki içerikleri ekleyin -
type Query {
test: String
}
7. Adım - Resolver Dosyası, resolvers.js oluşturun
Mevcut proje klasöründe bir çözümleyici dosyası oluşturun ve aşağıdaki içeriği ekleyin -
const Query = {
test: () => 'Test Success, GraphQL server is up & running !!'
}
module.exports = {Query}
Adım 8 - Server.js Oluşturun ve GraphQL'i Yapılandırın
Bir sunucu dosyası oluşturun ve GraphQL'i aşağıdaki gibi yapılandırın -
const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const db = require('./db');
const port = process.env.PORT || 9000;
const app = express();
const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
const resolvers = require('./resolvers')
const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs, resolvers})
app.use(cors(), bodyParser.json());
const {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(
port, () => console.info(
`Server started on port ${port}`
)
);
Adım 9 - Uygulamayı Çalıştırın ve GraphiQL ile Test Edin
Proje test uygulamasının klasör yapısını aşağıdaki gibi doğrulayın -
test-app /
-->package.json
-->db.js
-->data
students.json
colleges.json
-->resolvers.js
-->schema.graphql
-->server.js
Npm start komutunu aşağıda verildiği gibi çalıştırın -
C:\Users\Admin\test-app>npm start
Sunucu 9000 portunda çalışıyor, bu yüzden uygulamayı GraphiQL aracını kullanarak test edebiliyoruz. Tarayıcıyı açın ve http: // localhost: 9000 / graphiql URL'sini girin. Düzenleyiciye aşağıdaki sorguyu yazın -
{
Test
}
Sunucudan gelen yanıt aşağıda verilmiştir -
{
"data": {
"test": "Test Success, GraphQL server is running !!"
}
}
GraphQL, bir GraphQL sunucusunun davranışını tanımlayan bir özelliktir. Desteklenen protokoller, sunucu tarafından kabul edilebilecek verilerin formatı, sunucu tarafından döndürülen yanıtın formatı vb. Gibi isteklerin ve yanıtların nasıl ele alınması gerektiğine dair bir dizi kılavuzdur. Bir istemci tarafından GraphQL'e yapılan istek sunucuya Sorgu denir. GraphQL'in bir diğer önemli kavramı, taşıma katmanı agnostikleridir. TCP, websocket veya diğer herhangi bir taşıma katmanı protokolü gibi mevcut herhangi bir ağ protokolü ile kullanılabilir. Ayrıca veritabanlarına nötrdür, bu nedenle onu ilişkisel veya NoSQL veritabanlarıyla kullanabilirsiniz.
GraphQL Server, aşağıda listelenen üç yöntemden herhangi biri kullanılarak dağıtılabilir -
- Bağlı veritabanına sahip GraphQL sunucusu
- Mevcut sistemleri entegre eden GraphQL sunucusu
- Hibrit yaklaşım
Bağlı Veritabanına Sahip GraphQL Sunucusu
Bu mimari, entegre bir veritabanına sahip bir GraphQL Sunucusuna sahiptir ve genellikle yeni projelerde kullanılabilir. Bir Sorgu alındığında, sunucu istek yükünü okur ve veri tabanından veri alır. Buna sorguyu çözme denir. Müşteriye döndürülen yanıt, resmi GraphQL spesifikasyonunda belirtilen formata uygundur.
Yukarıdaki şemada, GraphQL sunucusu ve veritabanı tek bir düğümde entegre edilmiştir. İstemci (masaüstü / mobil), HTTP üzerinden GraphQL sunucusu ile iletişim kurar. Sunucu isteği işler, veritabanından verileri alır ve istemciye geri gönderir.
Mevcut Sistemleri Entegre Eden GraphQL Sunucusu
Bu yaklaşım, eski altyapıya ve farklı API'lere sahip şirketler için yararlıdır. GraphQL, mevcut sistemdeki mikro hizmetleri, eski altyapıyı ve üçüncü taraf API'leri birleştirmek için kullanılabilir.
Yukarıdaki şemada, bir GraphQL API, istemci ile mevcut sistemler arasında bir arayüz görevi görür. İstemci uygulamaları, sorguyu çözen GraphQL sunucusuyla iletişim kurar.
Hibrit Yaklaşım
Son olarak, yukarıdaki iki yaklaşımı birleştirebilir ve bir GraphQL sunucusu oluşturabiliriz. Bu mimaride, GraphQL sunucusu alınan herhangi bir talebi çözecektir. Ya bağlı veritabanından ya da entegre API'lerden veri alır. Bu, aşağıdaki şekilde gösterilmektedir -
Bu bölüm, farklı GraphQL bileşenlerini ve bunların birbirleriyle iletişim biçimlerini tartışmaktadır. Tüm uygulama bileşenleri aşağıdaki gibi ayırt edilebilir -
- Sunucu Tarafı Bileşenleri
- İstemci Tarafı Bileşenleri
Sunucu Tarafı Bileşenleri
GraphQL sunucusu, sunucu tarafında temel bileşeni oluşturur ve GraphQL istemci uygulamalarından gelen sorguların ayrıştırılmasına izin verir. Apollo Sunucusu, GraphQL spesifikasyonunun en yaygın olarak kullanılan uygulamasıdır. Diğer sunucu programlama bileşenleri aşağıdakileri içerir -
Sr.No. | Sunucu Temelleri ve Açıklaması |
---|---|
1 | Schema Bir GraphQL şeması, herhangi bir GraphQL sunucu uygulamasının merkezinde yer alır ve ona bağlanan istemcilerin kullanabileceği işlevselliği açıklar. |
2 | Query GraphQL sorgusu, veri tabanından veya eski API'lerden veri almak için istemci uygulaması isteğidir. |
3 | Resolver Çözümleyiciler, bir GraphQL işlemini verilere dönüştürmek için talimatlar sağlar. Çözümleyici işlevlerini tanımlayarak sorguyu veriye çözümler. |
İstemci Tarafı Bileşenleri
Aşağıda, istemci tarafı bileşenleri verilmiştir -
Sr.No. | Araç ve Açıklama |
---|---|
1 | GraphiQL GraphQL sorgularını ve mutasyonlarını düzenlemek ve test etmek için tarayıcı tabanlı arayüz. |
2 | ApolloClient GraphQL istemci uygulamaları oluşturmak için en iyi araç. Tüm javascript ön uçlarıyla iyi bütünleşir. |
Aşağıdaki şema bir Client-Server architecture. Web sunucusu NodeJ'ler ve Express çerçevesi üzerine inşa edilmiştir. Apollo GraphQL Sunucusuna ReactJS uygulaması (Apollo İstemci kitaplığı kullanılarak oluşturulmuştur) veya GraphiQL tarayıcı uygulaması tarafından talep edilir. Sorgu, sunucuda tanımlanan bir şemaya göre ayrıştırılacak ve doğrulanacaktır. İstek şeması doğrulamayı geçerse, ilgili çözümleyici işlevleri çalıştırılacaktır. Çözümleyici, bir API veya veritabanından veri almak için kod içerecektir.
Bu bölümde, bir karşılama mesajı döndüren basit bir API oluşturacağız, HelloWorld ve GraphiQL kullanarak ona erişeceğiz.
Misal
Bu örnek, NodeJS, Express ve Apollo sunucusuna dayanmaktadır. Aşağıdaki adımlarla tüm kavramları bir araya getirmeyi öğreneceğiz -
Adım 1 - Express'i Kurma
ExpressJS, web siteleri ve web uygulamaları oluşturmaya yardımcı olan bir web uygulaması çerçevesidir. Bu örnekte, Express çerçevesinin üzerine bir GraphQL API oluşturacağız.
Sonraki adım bir klasör oluşturmaktır hello-world-serverve terminalden aynı klasöre gidin. Package.json ekleyin ve pakete bir ad verin. Bu paket sadece dahili olarak kullanıldığından, onu özel ilan edebiliriz.
{
"name":"hello-world-server",
"private":true
}
Express sunucusu için bağımlılıkları aşağıda gösterildiği gibi yükleyin -
C:\Users\Admin\hello-world-server>npm install express body-parser cors
body-parser , Express'in HTTP Post isteklerini verimli bir şekilde işlemesine yardımcı olan bir ara yazılım paketidir. cors , kaynaklar arası kaynak paylaşımını işleyen başka bir ara yazılım paketidir.
Oluşturmak server.js proje klasöründeki dosya ve içine aşağıdakileri yazın -
const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT|| 9000
const app = express()
//register middleware
app.use(bodyParser.json() , cors())
app.listen(port, () => console.log(`server is up and running at ${port}`)
Express sunucunun çalışır durumda olup olmadığını doğrulamak için terminal penceresinde aşağıdaki kodu yürütün -
C:\Users\Admin\hello-world-server>node server.js
Aşağıdaki çıktı, sunucu konsolunda görüntülenir. Bu, ekspres sunucunun 9000 numaralı bağlantı noktasında çalıştığını gösterir.
server is up and running at 9000
Tarayıcıyı açıp yazarsanız http://localhost:9000, aşağıdaki ekranı göreceksiniz -
Sunucuyu durdurmak için Ctrl + C.
Adım 2 - GraphQL ve Apollo Sunucusunu Kurun
Express yapılandırıldığına göre, bir sonraki adım aşağıdaki GraphQL bağımlılıklarını indirmektir -
- graphql
- graphql-tools
- apollo-server-express@1
Kararlı bir sürüm olduğu için Apollo server v1.0'ı kullanacağız. Bu bağımlılıkları yüklemek için aşağıdaki komutları yazın -
C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1
Bu bağımlılıkların başarıyla yüklenip yüklenmediğini kontrol ederek doğrulayabiliriz. package.json önceden oluşturduğumuz dosya.
{
"name": "hello-world-server",
"private": true,
"dependencies": {
"apollo-server-express": "^1.4.0",
"body-parser": "^1.18.3",
"cors": "^2.8.4",
"express": "^4.16.3",
"graphql": "^0.13.2",
"graphql-tools": "^3.1.1"
}
}
Adım 3 - Şemayı Tanımlayın
Bir GraphQL şeması, bir hizmetten ne tür bir nesnenin alınabileceğini ve hangi alanlara sahip olduğunu tanımlar. Şema kullanılarak tanımlanabilirGraphQL Schema Definition Language. Şimdi, aşağıdaki kod parçacığını ekleyinserver.js dosya -
// Adding Type Definitions
const typeDefinition = `
type Query {
greeting: String
}
Burada sorgu, bir dize değeri döndüren bir selamlama niteliği içerir .
Adım 4 - Bir Çözümleyici Oluşturun
Çözümleyici oluşturmanın ilk adımı, karşılama alanı talebini işlemek için bazı kodlar eklemektir. Bu, birresolver. Çözümleyici işlevinin yapısı şema ile eşleşmelidir. Aşağıdaki kod parçacığını şuraya ekleyin:server.js dosya.
// Adding resolver
const resolverObject = {
Query : {
greeting: () => 'Hello GraphQL From TutorialsPoint !!'
}
}
İkinci adım, şema ve çözücüyü kullanarak bağlamaktır. makeExecutableSchema. Bu fonksiyon, graphql-tools modülünde önceden tanımlanmıştır. Aşağıdaki kod parçacığını şuraya ekleyin: server.js dosya.
const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})
Adım 5 - ReactJS / GraphiQL Uygulamasından Verileri Getirmek için Rotalar Tanımlayın
Aşağıdaki kod parçacığını şuraya ekleyin: server.js dosya -
const {graphqlExpress, graphiqlExpress} = require('apollo-server-express')
//create routes for graphql and graphiql
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
GraphqlExpress işlevi rotayı kaydetmek için yardımcı olurhttp://localhost:9000/graphql. ReactJS uygulaması, verileri sorgulamak için bu uç noktayı kullanabilir. Benzer şekilde, graphqliExpress işlevi rotayı kaydetmeye yardımcı olurhttp://localhost:9000/graphiql. Bu, API'yi test etmek için GraphiQL tarayıcı istemcisi tarafından kullanılacaktır.
Tam server.js kodu aşağıda verildiği gibidir -
const bodyParser = require('body-parser')
const cors = require('cors')
const express = require('express')
const port = process.env.PORT||9000
const app = express()
app.use(bodyParser.json() , cors())
const typeDefinition = `
type Query {
greeting: String
}`
const resolverObject = {
Query : {
greeting: () => 'Hello GraphQL From TutorialsPoint !!'
}
}
const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})
const {graphqlExpress,graphiqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
app.listen(port, () => console.log(`server is up and running ${port}`))
Adım 6 - Uygulamayı Başlatın
Yürüt server.js Node.js'yi aşağıdaki gibi kullanarak -
C:\Users\Admin\hello-world-server>node server.js
7. Adım - GraphQL API'sini test edin
Tarayıcıyı açın ve yazın http://localhost:9000/graphiql. GraphiQL'in sorgu sekmesine aşağıdakileri girin -
{
greeting
}
Sunucudan gelen yanıt aşağıda verilmiştir -
{
"data": {
"greeting": "Hello GraphQL From TutorialsPoint !!"
}
}
Aşağıdaki resim yanıtı göstermektedir -
Note - Lütfen Apollo Sunucu Sürüm 1.0'ın kullanıldığından emin olun.
GraphQL güçlü bir şekilde yazılmış bir dildir. Tür Sistem, bir GraphQL uygulamasında kullanılabilen çeşitli veri türlerini tanımlar. Tip sistemi, istemci ve sunucu arasında bir sözleşme olan şemayı tanımlamaya yardımcı olur. Yaygın olarak kullanılan GraphQL veri türleri aşağıdaki gibidir -
Sr.No. | Türler ve Açıklama |
---|---|
1 | Scalar Tek bir değeri depolar |
2 | Object Ne tür bir nesnenin alınabileceğini gösterir |
3 | Query Diğer belirli türlere giriş noktası türü |
4 | Mutation Veri işleme için giriş noktası |
5 | Enum Kullanıcının önceden belirlenmiş seçenekler listesinden seçim yapmasını istediğiniz bir durumda kullanışlıdır |
Skaler Tip
Skaler türler, yalnızca tek bir değeri depolayabilen ilkel veri türleridir. GraphQL'in sunduğu varsayılan skaler türleri şunlardır:
Int - İmzalı 32-bit Tam Sayı
Float - İmzalı çift hassasiyetli kayan nokta değeri
String - UTF - 8 karakter dizisi
Boolean - Doğru veya yanlış
ID - Genellikle bir nesneyi getirmek için benzersiz bir tanımlayıcı veya bir önbellek anahtarı olarak kullanılan benzersiz bir tanımlayıcı.
Bir skaler türü tanımlamak için sözdizimi aşağıdaki gibidir -
field: data_type
Aşağıda verilen kod parçası, String değerini döndüren selamlama adlı bir alanı tanımlar.
greeting: String
Nesne türü
Nesne türü, bir şemada kullanılan en yaygın türdür ve bir alan grubunu temsil eder. Bir nesne türü içindeki her alan başka bir türe eşlenir ve böylece iç içe türlere izin verilir. Başka bir deyişle, bir nesne türü birden çok skaler türden veya nesne türünden oluşur.
Bir nesne türünü tanımlamak için sözdizimi aşağıda verilmiştir -
type object_type_name
{
field1: data_type
field2:data_type
....
fieldn:data_type
}
Aşağıdaki kod parçacığını düşünebilirsiniz -
--Define an object type--
type Student {
stud_id:ID
firstname: String
age: Int
score:Float
}
--Defining a GraphQL schema--
type Query
{
stud_details:[Student]
}
Yukarıda verilen örnek, bir nesne veri tipi Öğrenci tanımlamaktadır. Stud_details kök Sorgu şemasındaki alan Öğrenci nesnelerin listesini döndürür.
Sorgu Türü
Verileri almak için bir GraphQL sorgusu kullanılır. REST tabanlı API'lerde bir kaynak talep etmek gibidir. Basit tutmak için, Sorgu türü bir istemci uygulamasından GraphQL sunucusuna gönderilen istektir. GraphQL,Schema Definition Language (SDL)Sorgu tanımlamak için. Sorgu türü, GraphQL'deki birçok kök düzeyindeki türden biridir.
Bir Sorguyu tanımlamak için sözdizimi aşağıda verildiği gibidir -
type Query {
field1: data_type
field2:data_type
field2(param1:data_type,param2:data_type,...paramN:data_type):data_type
}
Sorgu tanımlamaya bir örnek -
type Query {
greeting: String
}
Mutasyon Tipi
Mutasyonlar, sunucuya gönderilen işlemlerdir. create, update veya deleteveri. Bunlar, REST tabanlı API'leri çağırmak için PUT, POST, PATCH ve DELETE fiillerine benzer.
Mutasyon, GraphQL'deki kök düzeyindeki veri türlerinden biridir. Sorgu türü, veri getirme işlemleri için giriş noktalarını tanımlarken Mutasyon türü, veri işleme işlemleri için giriş noktalarını belirtir.
Bir Mutasyon türünü tanımlamak için sözdizimi aşağıda verilmiştir -
type Mutation {
field1: data_type
field2(param1:data_type,param2:data_type,...paramN:data_type):data_type
}
Örneğin, aşağıdaki gibi yeni bir Öğrenci eklemek için bir mutasyon türü tanımlayabiliriz -
type Mutation {
addStudent(firstName: String, lastName: String): Student
}
Enum Türü
Bir Enum, skaler bir türe benzer. Numaralandırmalar, bir alanın değerinin önceden belirlenmiş bir seçenekler listesinden olması gerektiği durumlarda kullanışlıdır.
Bir Enum türünü tanımlamak için sözdizimi -
type enum_name{
value1
value2
}
Aşağıdaki kod parçası, bir enum türünün nasıl tanımlanabileceğini gösterir -
type Days_of_Week{
SUNDAY
MONDAY
TUESDAY
WEDNESDAY
THURSDAY
FRIDAY
SATURDAY
}
Liste Tipi
Listeler, belirli türden bir dizi değeri temsil etmek için kullanılabilir. Listeler, nesne türlerini, skalarları ve numaralandırmaları saran bir tür değiştiriciyle [] tanımlanır.
Bir liste türü tanımlamak için aşağıdaki sözdizimi kullanılabilir -
field:[data_type]
Aşağıdaki örnek yapılacaklar listesi türünü tanımlar -
type Query {
todos: [String]
}
Boş Değerlenemez Tür
Varsayılan olarak, çekirdek skaler türlerinin her biri null olarak ayarlanabilir. Diğer bir deyişle, bu türler ya belirtilen türde bir değer döndürebilir ya da hiçbir değeri olmayabilir. Bu varsayılanı geçersiz kılmak ve bir alanın tanımlanması gerektiğini belirtmek için türe bir ünlem işareti (!) Eklenebilir. Bu, sorgu tarafından döndürülen sonuçlarda değerin varlığını sağlar.
Aşağıdaki sözdizimi, null yapılamayan bir alanı tanımlamak için kullanılabilir -
field:data_type!
Aşağıdaki örnekte stud_id , zorunlu alan olarak bildirilmiştir.
type Student {
stud_id:ID!
firstName:String
lastName:String
fullName:String
college:College
}
Bir GraphQL şeması, herhangi bir GraphQL sunucu uygulamasının merkezinde yer alır. Kendisine bağlanan istemci uygulamalarının kullanabileceği işlevselliği açıklar. Bir GraphQL şeması oluşturmak ve bunun etrafında bir arayüz oluşturmak için herhangi bir programlama dilini kullanabiliriz.
GraphQL çalışma zamanı, temsil ettiği veri hizmetinin yeteneklerini yayınlamak için genel bir grafik tabanlı şema tanımlar. İstemci uygulamaları, yetenekleri dahilinde şemayı sorgulayabilir. Bu yaklaşım, istemcileri sunuculardan ayırır ve her ikisinin de bağımsız olarak gelişmesine ve ölçeklenmesine izin verir.
Bu bölümde, GraphQL sorgularını yürütmek için Apollo sunucusunu kullanıyoruz. makeExecutableSchema graphql-tools içindeki fonksiyon, şema ve çözücüleri bağlamanıza yardımcı olur.
makeExecutableSchema İşlev Sözdizimi
makeExecutableSchemaişlev, Nesne türünde tek bir bağımsız değişken {} alır. Bu işlevi kullanmak için sözdizimi aşağıda verilmiştir -
import { makeExecutableSchema } from 'graphql-tools';
const jsSchema = makeExecutableSchema({
typeDefs,
resolvers, // optional
logger, // optional
allowUndefinedInResolve = false, // optional
resolverValidationOptions = {}, // optional
directiveResolvers = null, // optional
schemaDirectives = null, // optional
parseOptions = {}, // optional
inheritResolversFromInterfaces = false // optional
});
Sr.No. | Parametre ve Açıklama |
---|---|
1 | typeDefs Bu gerekli bir argümandır. Bir GraphQL sorgusunu UTF-8 dizesi olarak temsil eder. |
2 | Resolvers Bu isteğe bağlı bir argümandır (varsayılan olarak boş nesnedir). Bu, sorguyu işleyen işlevlere sahiptir. |
3 | logger Bu isteğe bağlı bir argümandır ve sunucu konsoluna hataları yazdırmak için kullanılabilir. |
4 | parseOptions Bu isteğe bağlı bir argümandır ve typeDefs'i bir dizge olarak belirtirken ayrıştırmanın özelleştirilmesine izin verir. |
5 | allowUndefinedInResolve Bu, varsayılan olarak doğrudur. Yanlış olarak ayarlandığında, çözümleme işlevlerinizin tanımsız döndürmeleri halinde hata vermesine neden olur. |
6 | resolverValidationOptions Bu isteğe bağlı bir argümandır ve Boole özelliklerine sahip bir nesneyi kabul eder. |
7 | inheritResolversFromInterfaces Bu, isteğe bağlı bir argümandır ve çözümleyicilerin nesne mirasını kontrol etmek için bir Boole argümanını kabul eder. |
İllüstrasyon
Bu şemayı anlamak için basit bir uygulama oluşturalım. Bu, sunucudaki öğrencilerin listesini sorgulamak için bir şema oluşturacaktır. Öğrenci verileri düz bir dosyada saklanacak ve adında bir düğüm modülü kullanacağız.notarealdb bir veritabanını taklit etmek ve düz dosyadan okumak.
Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin
Adlı bir klasör oluşturun schema-app. Dizininizi terminalden schema-app olarak değiştirin. Ardından, indirme ve yükleme işlemini tamamlamak için Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.
Adım 2 - Şema Oluşturun
Ekle schema.graphql proje klasöründeki dosya, schema-app ve aşağıdaki kodu ekleyin -
type Query {
greeting:String
students:[Student]
}
type Student {
id:ID!
firstName:String
lastName:String
password:String
collegeId:String
}
Şemanın kökü Sorgu türü olacaktır. Sorgunun iki alanı vardır: tebrik ve sırasıyla Dize döndüren Öğrenciler ve öğrencilerin listesi. Öğrenci, birden çok alan içerdiği için Nesne türü olarak ilan edilir. Kimlik alanı boş değer atanamaz olarak bildirildi.
Adım 3 - Çözücü Oluşturun
Bir dosya oluştur resolvers.js proje klasörüne ve aşağıdaki kodu ekleyin -
const db = require('./db')
const Query = {
greeting:() => {
return "hello from TutorialsPoint !!!"
},
students:() => db.students.list()
}
module.exports = {Query}
Burada selamlama ve öğrenciler, sorguyu ele alan çözümleyicilerdir. students resolver functionveri erişim katmanındaki öğrencilerin bir listesini döndürür. Modül dışındaki çözümleyici işlevlerine erişmek için, Sorgu nesnesi kullanılarak dışa aktarılmalıdır.module.exports.
Adım 4 - Uygulamayı Çalıştırın
Bir server.js dosyası oluşturun ve Ortam Kurulumu Bölümündeki 8. adıma bakın. Bir sonraki adım, terminalde npm start komutunu çalıştırmaktır. Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için bir istemci olarak GraphiQL kullanıyoruz. Tarayıcıyı açın ve URL'yi yazın,http://localhost:9000/graphiql.
Düzenleyiciye aşağıdaki sorguyu yazın -
{
greeting
students {
id
firstName
lastName
}
}
Sorgu, çıktıyı aşağıda gösterildiği gibi gösterecektir -
Note- Öğrencilerin verilerini ve hatta MySQL veya MongoDB gibi gerçek bir veritabanını almak için student.json'u RESTful API çağrısıyla değiştirebiliriz. GraphQL, performansı artırmak için orijinal uygulama katmanınızın etrafında ince bir paket haline gelir.
Çözümleyici, bir GraphQL sorgusu için yanıt oluşturan bir işlevler koleksiyonudur. Basit bir ifadeyle, bir çözümleyici, bir GraphQL sorgu işleyicisi görevi görür. Bir GraphQL şemasındaki her çözümleyici işlevi, aşağıda verildiği gibi dört konumsal argümanı kabul eder -
fieldName:(root, args, context, info) => { result }
Çözümleyici işlevlerinin bir örneği aşağıda gösterilmiştir -
//resolver function with no parameters and returning string
greeting:() => {
return "hello from TutorialsPoint !!!"
}
//resolver function with no parameters and returning list
students:() => db.students.list()
//resolver function with arguments and returning object
studentById:(root,args,context,info) => {
return db.students.get(args.id);
}
Aşağıda konumsal argümanlar ve açıklamaları verilmiştir -
Sr.No. | Argümanlar ve Açıklama |
---|---|
1 | root Üst alandaki çözümleyiciden döndürülen sonucu içeren nesne. |
2 | args Sorgudaki alana iletilen argümanlara sahip bir nesne. |
3 | context Bu, belirli bir sorgudaki tüm çözümleyiciler tarafından paylaşılan bir nesnedir. |
4 | info Alan adı, kökten alanın yolu dahil, sorgunun yürütme durumu hakkında bilgi içerir. |
Çözümleyici Sonuç Formatı
GraphQL'deki çözücüler, aşağıda verildiği gibi farklı türde değerler döndürebilir -
Sr.No. | Argümanlar ve Açıklama |
---|---|
1 | null or undefined bu, nesnenin bulunamadığını gösterir |
2 | array bu yalnızca şema, bir alanın sonucunun bir liste olması gerektiğini gösteriyorsa geçerlidir |
3 | promise çözümleyiciler genellikle bir veritabanından veya arka uç API'sinden getirme gibi eşzamansız eylemler gerçekleştirir, böylece sözler geri verebilirler |
4 | scalar or object bir çözümleyici başka değerler de döndürebilir |
İllüstrasyon
Çözümleyiciyi anlamak için basit bir uygulama oluşturalım. Bu, bir öğrenciyi sunucudan kimliğe göre sorgulamak için şema oluşturacaktır. Öğrenci verileri düz bir dosyada saklanacak ve adında bir düğüm modülü kullanacağız.notarealdb bir veritabanını taklit etmek ve düz dosyadan okumak.
Aşağıdaki, basit bir uygulama oluşturmak için adım adım ilerleyen bir işlemdir -
Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin
Adlı bir klasör oluşturun resolver-app. Dizininizi şu şekilde değiştirin:resolver-appterminalden. Daha sonra, Ortam Kurulumu bölümündeki 3 ila 5 arasındaki adımları izleyin.
Adım 2 - Şema Oluşturun
Proje klasörü çözücü uygulamasına schema.graphql dosyasını ekleyin ve aşağıdaki kodu ekleyin -
type Query {
greeting:String
students:[Student]
studentById(id:ID!):Student
}
type Student {
id:ID!
firstName:String
lastName:String
password:String
collegeId:String
}
Şema dosyası, kullanıcının karşılama, öğrenciler ve studentById için sorgulama yapabileceğini gösterir . Belirli bir kimliğe sahip öğrencileri almak için kullanıyoruzdata type ID!boş değer atanamayan benzersiz bir tanımlayıcı alanı gösterir. Öğrencilerin alan öğrenciler dizisi döndürür ve tebrik döndürür basit bir dize değeri.
Adım 3 - Çözücü Oluşturun
Bir dosya oluştur resolvers.js proje klasörüne ve aşağıdaki kodu ekleyin -
const db = require('./db')
const Query = {
//resolver function for greeting
greeting:() => {
return "hello from TutorialsPoint !!!"
},
//resolver function for students returns list
students:() => db.students.list(),
//resolver function for studentbyId
studentById:(root,args,context,info) => {
//args will contain parameter passed in query
return db.students.get(args.id);
}
}
module.exports = {Query}
Burada, studentById üç parametre alır. Bu bölümde tartışıldığı gibi, studentId bağımsız değişkenlerden alınabilir; root, Query nesnesinin kendisini içerecektir. Belirli bir öğrenciyi geri döndürmek için, öğrenci koleksiyonundaki id parametresiyle get yöntemini çağırmamız gerekir.
Burada, karşılama, öğrenciler, öğrenciKimliği sorguyu işleyen çözümleyicilerdir.students resolver functionveri erişim katmanındaki öğrencilerin bir listesini döndürür. Modül dışındaki çözümleyici işlevlerine erişmek için, Query nesnesinin module.exports kullanılarak dışa aktarılması gerekir.
Adım 4 - Uygulamayı Çalıştırın
Bir server.js dosyası oluşturun. Ortam Kurulum Bölümünde 8. adıma bakın. Terminalde npm start komutunu yürütün. Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için bir istemci olarak GraphiQL kullanıyoruz.
Tarayıcıyı açın ve url'yi girin, http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın -
{
studentById(id:"S1001") {
id
firstName
lastName
}
}
Yukarıdaki sorgunun çıktısı aşağıda gösterildiği gibidir -
{
"data": {
"studentById": {
"id": "S1001",
"firstName": "Mohtashim",
"lastName": "Mohammad"
}
}
}
Bir GraphQL işlemi, bir okuma veya bir yazma işlemi olabilir. Değerleri yazmak veya göndermek için bir mutasyon kullanılırken, değerleri okumak veya getirmek için bir GraphQL sorgusu kullanılır. Her iki durumda da işlem, bir GraphQL sunucusunun belirli bir formattaki verilerle ayrıştırıp yanıtlayabileceği basit bir dizedir. Genellikle mobil ve web uygulamaları için kullanılan popüler yanıt biçimi JSON'dur.
Bir sorguyu tanımlama sözdizimi aşağıdaki gibidir -
//syntax 1
query query_name{ someField }
//syntax 2
{ someField }
Aşağıda bir sorgu örneği verilmiştir -
//query with name myQuery
query myQuery{
greeting
}
// query without any name
{
greeting
}
Yukarıdaki örnekten, sorgu anahtar kelimesinin isteğe bağlı olduğu açıktır.
GraphQL sorguları, verilerin aşırı getirilmesini azaltmaya yardımcı olur. Restful API'den farklı olarak GraphQL, bir kullanıcının sunucudan getirilmesi gereken alanları kısıtlamasına izin verir. Bu, daha küçük sorgular ve ağ üzerinden daha az trafik anlamına gelir; bu da yanıt süresini azaltır.
Resim 1 - Özel Alanlı Öğrenci Modelini Sorgulama
Bu örnekte, bir json dosyasında saklanan bir grup öğrencimiz var. Her öğrenci modelinde firstName, lastName ve id gibi alanlar bulunur, ancak fullName yoktur. Burada, tüm öğrencilerin tam adını almak için nasıl bir sorgu yapılacağını tartışacağız. Bunun için her iki şema çözümleyicide de fullName alanı oluşturmamız gerekiyor.
Aşağıdaki adımları kullanarak bu çizimi nasıl yapacağımızı görelim -
Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin
Adlı bir klasör oluşturun query-app. Dizininizi şu şekilde değiştirin:query-appterminalden. Daha sonra, Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.
Adım 2 - Şema Oluşturun
Ekle schema.graphql proje klasöründeki sorgu-app dosyasını açın ve aşağıdaki kodu ekleyin -
type Query {
greeting:String
students:[Student]
studentById(id:ID!):Student
}
type Student {
id:ID!
firstName:String
lastName:String
fullName:String
}
Unutmayın ki fullName alanıstudents.jsondosya. Ancak, öğrencinin tam adını bir sorgu yoluyla almamız gerekiyor . FullName , bu durumda veri kaynağı ile kullanılamayan bir özel alan olacak.
Adım 3 - Çözücü Oluşturun
Bir dosya oluştur resolvers.js proje klasörüne ve aşağıdaki kodu ekleyin -
const db = require('./db')
const Query = {
//resolver function for greeting
greeting:() => {
return "hello from TutorialsPoint !!!"
},
//resolver function for students returns list
students:() => db.students.list(),
//resolver function for studentbyId
studentById:(root,args,context,info) => {
//args will contain parameter passed in query
return db.students.get(args.id);
}
}
//for each single student object returned,resolver is invoked
const Student = {
fullName:(root,args,context,info) => {
return root.firstName+":"+root.lastName
}
}
module.exports = {Query,Student}
Adım 4 - Uygulamayı Çalıştırın
Oluşturmak server.jsdosya. Ortam Kurulum Bölümünde 8. adıma bakın. Terminalde npm start komutunu yürütün . Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için istemci olarak GraphiQL kullanıyoruz.
Tarayıcıyı açın ve URL'yi yazın http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın -
{
students{
id
fullName
}
}
Sorgunun yanıtı aşağıda verilmiştir -
{
"data": {
"students": [
{
"id": "S1001",
"fullName": "Mohtashim:Mohammad"
},
{
"id": "S1002",
"fullName": "Kannan:Sudhakaran"
},
{
"id": "S1003",
"fullName": "Kiran:Panigrahi"
}
]
}
}
Oluşturmak server.js ve aşağıdaki kodu ekleyin -
const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const db = require('./db');
const port = 9000;
const app = express();
//loading type definitions from schema file
const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
//loading resolvers
const resolvers = require('./resolvers')
//binding schema and resolver
const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs, resolvers})
//enabling cross domain calls and form post
app.use(cors(), bodyParser.json());
//enabling routes
const {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql',graphqlExpress({schema}))
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
//registering port
app.listen(port, () => console.info(`Server started on port ${port}`));
Terminalde npm start komutunu yürütün. Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için bir istemci olarak GraphiQL kullanıyoruz.
Tarayıcıyı açın ve URL'yi yazın http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın -
{
students{
id
fullName
}
}
Sorgunun yanıtı aşağıda verilmiştir -
{
"data": {
"students": [
{
"id": "S1001",
"fullName": "Mohtashim:Mohammad"
},
{
"id": "S1002",
"fullName": "Kannan:Sudhakaran"
},
{
"id": "S1003",
"fullName": "Kiran:Panigrahi"
}
]
}
}
Resim 2 - İç İçe Sorgu
Öğrenci ayrıntılarını ve üniversite ayrıntılarını almak için iç içe geçmiş bir sorgu oluşturalım. Aynı proje klasörü ile çalışacağız.
Adım 1 - Şemayı Düzenleyin
Şema dosyasında zaten öğrenci alanı var. Bir saha fakültesi ekleyelim ve türünü tanımlayalım.
type College {
id:ID!
name:String
location:String
rating:Float
}
type Student {
id:ID!
firstName:String
lastName:String
fullName:String
college:College
}
Adım 2 - resolver.js'yi değiştirin
Aşağıdaki gibi bir üniversite çözümleyici işlevi eklememiz gerekiyor. Üniversite çözücü işlevi, döndürülen her öğrenci nesnesi için yürütülecektir. Bu durumda çözümleyicinin kök parametresi öğrenciyi içerecektir .
const Student = {
fullName:(root,args,context,info) => {
return root.firstName+":"+root.lastName
},
college:(root) => {
return db.colleges.get(root.collegeId);
}
}
module.exports = {Query,Student}
Çözümleyici, kolej koleksiyonunun alma yöntemini çağırarak ve collegeId'yi geçerek her öğrencinin üniversitesini döndürür . CollegeId aracılığıyla Öğrenci ve Kolej arasında ilişki ilişkimiz var .
3. Adım - Uygulamayı Test Edin
Terminal penceresini açın ve proje klasörüne gidin. -Npm start komutunu yazın. Tarayıcıyı başlatın ve URL'yi girinhttp://localhost:9000/graphiql.
GraphiQL penceresine aşağıdaki sorguyu girin -
{
students{
id
firstName
college {
id
name
location
rating
}
}
}
Sorgunun cevabı aşağıda verildiği gibidir -
{
"data": {
"students": [
{
"id": "S1001",
"firstName": "Mohtashim",
"college": {
"id": "col-102",
"name": "CUSAT",
"location": "Kerala",
"rating": 4.5
}
},
{
"id": "S1002",
"firstName": "Kannan",
"college": {
"id": "col-101",
"name": "AMU",
"location": "Uttar Pradesh",
"rating": 5
}
},
{
"id": "S1003",
"firstName": "Kiran",
"college": {
"id": "col-101",
"name": "AMU",
"location": "Uttar Pradesh",
"rating": 5
}
}
]
}
}
Sorgu Değişkeni nedir?
Bir sorguda geçirilecek bazı dinamik değerler varsa, bu dinamik değerleri değişkenler kullanarak temsil edin. Bu nedenle, sorgu istemci uygulamaları tarafından yeniden kullanılabilir.
İllüstrasyon
Sorgu değişkenini anlamak için basit bir uygulama oluşturalım.
Adım 1 - Şema Dosyasını Düzenleyin
Bir dize parametresi alan ve bir dize döndüren bir sayHello alanı ekleyin . Ad değerleri, istemci uygulamasında dinamik olacaktır.
type Query {
sayHello(name:String!):String
}
Adım 2 - resolver.js Dosyasını Düzenleyin
Aşağıdaki gibi parametre alan bir sayHello çözücü ekleyin -
sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!`
Adım 3 - GraphiQL'de Sorgu Değişkenini Bildirin
Bir değişken $ ile ve ardından değişkenin adı ile bildirilir. Örneğin: $ myname_Variable.
$ Myname_Variable bildirildikten sonra, adlandırılmış bir sorgu sözdizimi ile kullanılması gerekir. MyQuery sorgusu dize değerini alır ve aşağıda gösterildiği gibi sayHello'ya iletir -
query myQuery($myname_Variable:String!) { sayHello(name:$myname_Variable)
}
$ Myname_Variable değerini, GraphiQL istemcisinin Sorgu Değişkenleri bölümünde bir JSON nesnesi olarak ayarlayın.
{
"myname_Variable": "Mohtashim"
}
Yukarıdaki kodun çıktısı aşağıdaki gibidir -
{
"data": {
"sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
}
}
Enum ile Sorgu Değişkeni nasıl kullanılır
Alan parametresi olduğunda bir sorgu değişkeninin nasıl kullanılacağını görelim. enum type.
Adım 1 - schema.graphql Dosyasını Düzenleyin
enum ColorType {
RED
BLUE
GREEN
}
type Query {
setFavouriteColor(color:ColorType):String
}
SetFavouriteColor işlevi girdi olarak enum alır ve bir dize değeri döndürür.
Adım 2 - resolvers.js Dosyasını Düzenleyin
SetFavouriteColor çözümleyici işlevi kök ve değiştirgeleri alır . Çalışma zamanında işleve aktarılan enum değerine args parametresi aracılığıyla erişilebilir.
setFavouriteColor:(root,args) => {
return "Your Fav Color is :"+args.color;
}
Adım 3 - GraphiQL'de bir Sorgu Değişkeni Bildirin
Sorgu adlandırılır query_to_setColorColorType'ın color_variable adında bir değişken alan. Bu değişken setFavouriteColor yöntemine aktarılır.
query query_to_setColor($color_variable:ColorType) {
setFavouriteColor(color:$color_variable)
}
GraphiQL'in sorgu değişkeni bölümüne aşağıdaki kodu yazın -
{
"color_variable":"RED"
}
Yanıt aşağıda gösterilmiştir -
{
"data": {
"setFavouriteColor": "Your Fav Color is: RED"
}
}
Bu bölümde, GraphQL'deki mutasyon sorgularını öğreneceğiz.
Mutasyon sorguları, veri deposundaki verileri değiştirir ve bir değer döndürür. Veri eklemek, güncellemek veya silmek için kullanılabilir. Mutasyonlar, şemanın bir parçası olarak tanımlanır.
Bir mutasyon sorgusunun sözdizimi aşağıda verilmiştir -
mutation{
someEditOperation(dataField:"valueOfField"):returnType
}
İllüstrasyon
Bir mutasyon sorgusu kullanarak veri deposuna yeni öğrenci kaydını nasıl ekleyeceğimizi anlayalım.
Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin
Mutation-app adıyla bir proje klasörü oluşturun. Dizininizi terminalden mutation-app olarak değiştirin. Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.
Adım 2 - Bir schema.graphql Dosyası Oluşturun
Ekle schema.graphql proje klasöründeki mutation-app dosyasını açın ve aşağıdaki kodu ekleyin -
type Query {
greeting:String
}
type Mutation {
createStudent(collegeId:ID,firstName:String,lastName:String):String
}
CreateStudent işlevinin bir String türü döndürdüğünü unutmayın. Bu, bir öğrenci oluşturulduktan sonra oluşturulan benzersiz bir tanımlayıcıdır (ID).
Adım 3 - Bir resolver.js Dosyası oluşturun
Proje klasöründe bir dosya resolvers.js oluşturun ve aşağıdaki kodu ekleyin -
const db = require('./db')
const Mutation = {
createStudent:(root,args,context,info) => {
return db.students.create({collegeId:args.collegeId,
firstName:args.firstName,
lastName:args.lastName})
}
}
const Query = {
greeting:() => "hello"
}
module.exports = {Query,Mutation}
Mutasyon işlevi, veri deposundaki öğrenci koleksiyonuna işaret eder. Yeni bir öğrenci eklemek için öğrenci koleksiyonundaki oluşturma yöntemini çağırın. Args nesne sorguda geçirilen parametreleri içerecektir. Öğrenci koleksiyonunun oluşturma yöntemi, yeni oluşturulan bir öğrenci nesnesinin kimliğini döndürür.
Adım 4 - Uygulamayı Çalıştırın
Oluşturmak server.jsdosya. Ortam Kurulumu Bölümündeki 8. adıma bakın. Terminalde npm start komutunu yürütün. Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için bir istemci olarak GraphiQL kullanıyoruz.
Sonraki adım, tarayıcıyı açmak ve URL'yi yazmaktır. http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın -
//college Id should be matched with data from colleges.json for easy retrieval
mutation {
createStudent(collegeId:"col-2",firstName:"Tim",lastName:"George")
}
Yukarıdaki sorgu, student.json dosyasında bir öğrenci nesnesi oluşturacaktır. Sorgu, benzersiz bir tanımlayıcı döndürür. Sorgunun yanıtı aşağıda gösterildiği gibidir -
{
"data": {
"createStudent": "SkQtxYBUm"
}
}
Öğrenci nesnesinin oluşturulup oluşturulmadığını doğrulamak için studentById sorgusunu kullanabiliriz. Kimliği doğrulamak için data klasöründen student.json dosyasını da açabilirsiniz.
StudentById sorgusunu kullanmak için schema.graphql aşağıda verildiği gibi -
type Query {
studentById(id:ID!):Student
}
type Student {
id:ID!
firstName:String
lastName:String
collegeId:String
}
Düzenleyin resolver.js dosya aşağıda verildiği gibi -
const db = require('./db')
const Query = {
studentById:(root,args,context,info) => {
return db.students.get(args.id);
}
}
const Mutation = {
createStudent:(root,args,context,info) => {
return db.students.create({collegeId:args.collegeId,
firstName:args.firstName,
lastName:args.lastName})
}
}
module.exports = {Query,Mutation}
Aşağıda, mutasyon sorgusundan döndürülen benzersiz kimliğe göre öğrenci alma sorgusu verilmiştir -
{
studentById(id:"SkQtxYBUm") {
id
firstName
lastName
}
}
Sunucudan gelen yanıt aşağıdaki gibidir -
{
"data": {
"studentById": {
"id": "SkQtxYBUm",
"firstName": "Tim",
"lastName":"George"
}
}
}
Mutasyonda Bir Nesneyi Geri Döndürmek
Mutasyon halindeki bir nesneyi döndürmek en iyi uygulamadır. Örneğin, istemci uygulaması öğrenci ve üniversite ayrıntılarını almak istiyor. Bu durumda, iki farklı istekte bulunmak yerine, öğrencileri ve üniversite ayrıntılarını içeren bir nesneyi döndüren bir sorgu oluşturabiliriz.
Adım 1 - Şema Dosyasını Düzenleyin
Adlı yeni bir yöntem ekleyin addStudent mutasyon türünde nesneyi döndüren schema.graphql.
Üniversite detaylarına öğrenci detaylarından nasıl erişeceğimizi öğrenelim. Şema dosyasına üniversite türünü ekleyin.
type Mutation {
addStudent_returns_object(collegeId:ID,firstName:String,lastName:String):Student
createStudent(collegeId:ID,firstName:String,lastName:String):String
}
type College {
id:ID!
name:String
location:String
rating:Float
}
type Student {
id:ID!
firstName:String
lastName:String
college:College
}
Adım 2 - resolvers.js Dosyasını güncelleyin
Bir dosyayı güncelleyin resolvers.js proje klasörüne ve aşağıdaki kodu ekleyin -
const Mutation = {
createStudent:(root,args,context,info) => {
return db.students.create({
collegeId:args.collegeId,
firstName:args.firstName,
lastName:args.lastName
})
},
// new resolver function
addStudent_returns_object:(root,args,context,info) => {
const id = db.students.create({
collegeId:args.collegeId,
firstName:args.firstName,
lastName:args.lastName
})
return db.students.get(id)
}
}
//for each single student object returned,resolver is invoked
const Student = {
college:(root) => {
return db.colleges.get(root.collegeId);
}
}
module.exports = {Query,Student,Mutation}
Adım 3 - Sunucuyu Başlatın ve GraphiQL'de Talep Sorgusunu Yazın
Ardından, sunucuyu başlatacağız ve aşağıdaki kodla GraphiQL'de sorgu talep edeceğiz -
mutation {
addStudent_returns_object(collegeId:"col-101",firstName:"Susan",lastName:"George") {
id
firstName
college{
id
name
}
}
}
Yukarıdaki sorgu, yeni bir öğrenci ekler ve öğrenci nesnesini üniversite nesnesiyle birlikte alır. Bu, sunucuya gidiş dönüşleri kaydeder.
Cevap aşağıda verildiği gibidir -
{
"data": {
"addStudent_returns_object": {
"id": "rklUl08IX",
"firstName": "Susan",
"college": {
"id": "col-101",
"name": "AMU"
}
}
}
}
Veri eklerken veya değiştirirken, kullanıcı girişini doğrulamak önemlidir. Örneğin, bir alanın değerinin her zaman boş olmamasını sağlamamız gerekebilir. Kullanabiliriz! (non-nullable) Böyle bir doğrulamayı gerçekleştirmek için GraphQL'de işaretleyici yazın.
Kullanmak için sözdizimi ! tip işaretçisi aşağıda verildiği gibidir -
type TypeName {
field1:String!,
field2:String!,
field3:Int!
}
Yukarıdaki sözdizimi, tüm alanların boş olmamasını sağlar.
Bir dizginin uzunluğunu kontrol etmek veya bir sayının belirli bir aralıkta olup olmadığını kontrol etmek gibi ek kurallar uygulamak istiyorsak, özel doğrulayıcılar tanımlayabiliriz. Özel doğrulama mantığı, çözümleyici işlevinin bir parçası olacaktır. Bunu bir örnek yardımıyla anlayalım.
Örnek - Özel Doğrulayıcıları Uygulama
Temel doğrulama ile bir kayıt formu oluşturalım. Formda e-posta, ad ve şifre alanları olacaktır.
Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin
Adlı bir klasör oluşturun validation-app. Dizini terminalden validation-app olarak değiştirin. Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.
Adım 2 - Şema Oluşturun
Ekle schema.graphql proje klasöründeki dosya validation-app ve aşağıdaki kodu ekleyin -
type Query {
greeting:String
}
type Mutation {
signUp(input:SignUpInput):String
}
input SignUpInput {
email:String!,
password:String!,
firstName:String!
}
Note- SignUp işlevindeki parametre sayısını azaltmak için SignUpInput girdi tipini kullanabiliriz. Bu nedenle, signUp işlevi SignUpInput türünde yalnızca bir parametre alır.
Adım 3 - Çözücüler Oluşturun
Bir dosya oluştur resolvers.js proje klasörüne ve aşağıdaki kodu ekleyin -
const Query = {
greeting:() => "Hello"
}
const Mutation ={
signUp:(root,args,context,info) => {
const {email,firstName,password} = args.input;
const emailExpression = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const isValidEmail = emailExpression.test(String(email).toLowerCase())
if(!isValidEmail)
throw new Error("email not in proper format")
if(firstName.length > 15)
throw new Error("firstName should be less than 15 characters")
if(password.length < 8 )
throw new Error("password should be minimum 8 characters")
return "success";
}
}
module.exports = {Query,Mutation}
Çözümleyici işlevi olan signUp, e-posta, şifre ve firstName parametrelerini kabul eder. Bunlar, args.input aracılığıyla erişilebilmesi için input değişkeninden geçirilecektir.
Adım 4 - Uygulamayı Çalıştırın
Bir server.js dosyası oluşturun. Ortam Kurulum Bölümünde 8. adıma bakın. Terminalde npm start komutunu yürütün . Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için bir istemci olarak GraphiQL kullanacağız.
Tarayıcıyı açın ve URL'yi girin http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın -
mutation doSignUp($input:SignUpInput) { signUp(input:$input)
}
Kaydolma işlevi girdisi karmaşık bir tür olduğundan, graphiql'de sorgu değişkenlerini kullanmamız gerekir. Bunun için önce sorguya bir isim vermemiz ve ona doSignUp dememiz gerekiyor, $ input bir sorgu değişkenidir.
Graphiql'nin sorgu değişkenleri sekmesine aşağıdaki sorgu değişkeni girilmelidir -
{
"input":{
"email": "abc@abc",
"firstName": "kannan",
"password": "pass@1234"
}
}
Hatalar dizisi, aşağıda gösterildiği gibi doğrulama hatalarının ayrıntılarını içerir -
{
"data": {
"signUp": null
},
"errors": [
{
"message": "email not in proper format",
"locations": [
{
"line": 2,
"column": 4
}
],
"path": [
"signUp"
]
}
]
}
Her alan için aşağıda belirtildiği gibi uygun bir girdi girmeliyiz -
{
"input":{
"email": "[email protected]",
"firstName": "kannan",
"password": "pass@1234"
}
}
Cevap aşağıdaki gibidir -
{
"data": {
"signUp": "success"
}
}
Burada, aşağıdaki sorguda herhangi bir şifre tahsis etmiyoruz.
{
"input":{
"email": "[email protected]",
"firstName": "kannan"
}
}
Gerekli bir alan sağlanmadıysa, qraphql sunucusu aşağıdaki hatayı görüntüler -
{
"errors": [
{
"message": "Variable \"$input\" got invalid value {\"email\":\"[email protected]\",\"firstName\":\"kannan\"}; Field value.password of required type String! was not provided.",
"locations": [
{
"line": 1,
"column": 19
}
]
}
]
}
Web uygulamaları, verileri eşzamansız olarak (arka planda) gönderir ve alır. AJAX, web sitelerinin sayfayı yenilemeden ekrana içerik yüklemesine izin verir. jQuery, AJAX işlevselliği için çeşitli yöntemler sağlar, böylece AJAX'ı kullanmayı kolaylaştırır. Bu bölümde, GraphQL'i jQuery ile nasıl entegre edebileceğimizi öğreneceğiz.
İstemci sunucu mimarisini kullanan bir uygulama düşünün. Bir GraphQL sunucusundan veri isteyen bir ön uç web sayfası oluşturabiliriz. Web sayfası, jQuery kullanarak GraphQL sunucusuna AJAX çağrıları yapacaktır.
GraphQL'i JQuery ile entegre etmek için, GraphiQL istek başlıklarını inceleyelim ve istek parametrelerini anlayalım.
Başlat hello-worldapp (ilgili resim için bölüm 6'ya bakın). GraphiQL penceresine graphql sorgusunu {tebrik} yazın. Aşağıda gösterildiği gibi ağ sekmesine gitmek için sağ tıklayın ve inceleyin veya (ctrl + shift + I) tuşlarına basın -
Basitten hello-world örnek, anlayabiliriz http method kullanılmış POST. Şimdi tarayıcıda, istek yükünü görüntülemek için başlık bölümüne gidin .
Bir kez tıkladığınızda view codeChrome'un istek yükü bölümünde aşağıdakileri göreceksiniz.
{"query":"{\n greeting\n}","variables":null,"operationName":null}
Ayrıca istek URL'sini de not edin, http://localhost:9000/graphql istemci uygulamasından çağrılmalıdır.
İllüstrasyon
Adım adım bir süreç kullanarak GraphQL'i JQuery ile nasıl entegre edeceğimizi anlayalım.
Sunucuyu Kurmak
Aşağıdaki adımları kullanarak sunucuyu kurmayı öğreneceğiz -
Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin
Adlı bir klasör oluşturun jquery-server-app. Dizininizi terminalden jquery-server-app olarak değiştirin. Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.
Adım 2 - Şema Oluşturun
Proje klasörüne schema.graphql dosyası ekleyin jquery-server-app ve aşağıdaki kodu ekleyin -
type Query
{
greeting: String
sayHello(name:String!):String
}
Dosya iki sorgu tanımladı greeting ve sayHello. SayHello sorgusu bir dize parametresi kabul eder ve başka bir dize döndürür. SayHello () işlevinin parametresi boş değil.
Adım 3 - Çözücüler Oluşturun
Proje klasöründe bir dosya resolvers.js oluşturun ve aşağıdaki kodu ekleyin -
const Query =
{
greeting: () => 'Hello GraphQL From TutorialsPoint !!' ,
sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!`
}
module.exports = {Query}
Buraya, greeting ve sayHelloiki çözümleyicidir. SayHello çözücüsünde, isim parametresine aktarılan değere args aracılığıyla erişilebilir. Modül dışındaki çözümleyici işlevlerine erişmek için, Sorgu nesnesi kullanılarak dışa aktarılmalıdır.module.exports.
Adım 4 - Uygulamayı Çalıştırın
Bir server.js dosyası oluşturun. Ortam Kurulumu Bölümündeki 8. adıma bakın. Terminalde npm start komutunu yürütün . Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için istemci olarak GraphiQL kullanıyoruz.
Tarayıcıyı açın ve URL'yi yazın http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın -
{
greeting,
sayHello(name:"Mohtashim")
}
Sunucudan gelen yanıt aşağıdaki gibidir -
{
"data": {
"greeting": "Hello GraphQL From TutorialsPoint !!",
"sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
}
}
İstemciyi Kurmak
Sunucuyu zaten kurduğumuz için, şimdi istemciyi nasıl kuracağımızı öğreneceğiz.
Adım 1 - Mevcut proje klasörünün dışında yeni bir jquery-client-app klasörü oluşturun
İlk önce adında bir klasör oluşturacağız jquery-client-app proje klasörünün dışında.
Adım 2 - jQuery Entegrasyonu için bir HTML Sayfası index.html oluşturun
Jquery'de bir istemci uygulaması oluşturacağız ve her iki yöntemi de çağıracağız. Aşağıdakiler için kod index.html dosya. index.html sayfa, düğmeler olduğunda sunucuya istek gönderir - Greet ve SayHellotıklandı. $ .Ajax () fonksiyonunu kullanarak asenkron istekte bulunacağız.
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() { $("#btnSayhello").click(function() {
const name = $("#txtName").val(); console.log(name); $("#SayhelloDiv").html('loading....');
$.ajax({url: "http://localhost:9000/graphql", contentType: "application/json",type:'POST', data: JSON.stringify({ query:`{ sayHello(name:"${name}")}`
}),
success: function(result) {
console.log(JSON.stringify(result))
$("#SayhelloDiv").html("<h1>"+result.data.sayHello +"</h1>"); } }); }); $("#btnGreet").click(function() {
$("#greetingDiv").html('loading....'); //https://kannan-first-graphql-app.herokuapp.com/graphql $.ajax({url: "http://localhost:9000/graphql",
contentType: "application/json",
type:'POST',
data: JSON.stringify({
query:`{greeting}`
}),
success: function(result) {
$("#greetingDiv").html("<h1>"+result.data.greeting+"</h1>");
}
});
});
});
</script>
</head>
<body>
<h1>Jquery Client </h1>
<hr/>
<section>
<button id = "btnGreet">Greet</button>
<br/> <br/>
<div id = "greetingDiv"> </div>
</section>
<br/> <br/> <br/>
<hr/>
<section>
Enter a name:<input id = "txtName" type = "text" value = "kannan"/>
<button id = "btnSayhello">SayHello</button>
<div id = "SayhelloDiv"> </div>
</section>
</body>
</html>
Bu dosyayı tarayıcıda açın ve yanıtı görmek için düğmeye tıklayın. Çıktı aşağıda verildiği gibi olacaktır -
React, kullanıcı arayüzleri oluşturmak için bir Javascript kütüphanesidir. Bu bölüm GraphQL'in bir React uygulamasıyla nasıl entegre edilebileceğini açıklamaktadır.
İllüstrasyon
Bir tepki projesi kurmanın en hızlı yolu, React Uygulaması Oluştur aracını kullanmaktır. Sonraki bölümlerde, hem Sunucuyu hem de İstemciyi nasıl kuracağımızı öğreneceğiz.
Sunucuyu Kurmak
Sunucuyu kurmak için aşağıdaki adımları izleyin -
Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin
Bir klasör oluşturun react-server-app. Dizininizi şu şekilde değiştirin: react-server-app terminalden. Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.
Adım 2 - Şema Oluşturun
Ekle schema.graphql proje klasöründeki dosya react-server-app ve aşağıdaki kodu ekleyin -
type Query
{
greeting: String
sayHello(name:String!):String
}
Dosya iki sorgu tanımladı - selamlama ve sayHello. SayHello sorgusu bir dize parametresi kabul eder ve başka bir dize döndürür. SayHello () işlevinin parametresi boş değil.
Adım 3 - Çözücüler Oluşturun
Bir dosya oluştur resolvers.js proje klasörüne ve aşağıdaki kodu ekleyin -
const Query =
{
greeting: () => 'Hello GraphQL From TutorialsPoint !!' ,
sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!`
}
module.exports = {Query}
İşte selamlama ve merhaba deyin, iki çözümleyicidir. SayHello çözümleyicisinde, isim parametresine aktarılan değere args aracılığıyla erişilebilir. Modül dışındaki çözümleyici işlevlerine erişmek için, Query nesnesinin module.exports kullanılarak dışa aktarılması gerekir.
Adım 4 - Uygulamayı Çalıştırın
Bir server.js dosyası oluşturun. Ortam Kurulum Bölümünde 8. adıma bakın. Terminalde npm start komutunu yürütün . Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için istemci olarak GraphiQL kullanıyoruz.
Tarayıcıyı açın ve URL'yi yazın http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın -
{
greeting,
sayHello(name:"Mohtashim")
}
Sunucudan gelen yanıt aşağıda verilmiştir -
{
"data": {
"greeting": "Hello GraphQL From TutorialsPoint !!",
"sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
}
}
İstemciyi Kurmak
İstemci için yeni bir terminal açın. İstemci uygulaması çalıştırılmadan önce sunucu terminali çalışır durumda tutulmalıdır. React uygulaması 3000 numaralı bağlantı noktasında ve sunucu uygulaması 9000 numaralı bağlantı noktasında çalışacaktır.
Adım 1 - Merhaba dünya istemcisi bir React Projesi oluşturun
İstemci terminalinde aşağıdaki komutu yazın -
npx create-react-app hello-world-client
Bu, tipik bir tepki uygulaması için gereken her şeyi kuracaktır. npx yardımcı program ve create-react-apptool merhaba-dünya-müşteri adıyla bir proje oluşturun. Kurulum tamamlandıktan sonra projeyi VSCode'da açın.
Adım 2 - Hello-world-client'ı başlatın
Terminaldeki geçerli klasör yolunu hello-world-client olarak değiştirin. Projeyi başlatmak için npm start yazın. Bu, 3000 numaralı bağlantı noktasında bir geliştirme sunucusu çalıştıracak ve tarayıcıyı otomatik olarak açacak ve dizin sayfasını yükleyecektir.
Bu, aşağıda verilen ekran görüntüsünde gösterilmektedir -
3. Adım - Uygulama Bileşenini Değiştirin
Src klasörünün içindeki App.js'de, biri selamlama ve diğeri sayHello mesajlarını yüklemek için iki işlev ekleyin.
Aşağıda, karşılama için GraphQL sorgusu gönderen loadGreeting işlevi verilmiştir.
async function loadGreeting() {
const response = await fetch('http://localhost:9000/graphql', {
method:'POST',
headers:{'content-type':'application/json'},
body:JSON.stringify({query:'{greeting}'})
})
const rsponseBody = await response.json();
return rsponseBody.data.greeting;
console.log("end of function")
}
Aşağıdaki loadSayhello sayHello için GraphQL sorgusu gönderen işlev -
async function loadSayhello(name) {
const response = await fetch('http://localhost:9000/graphql', {
method:'POST',
headers:{'content-type':'application/json'},
body:JSON.stringify({query:`{sayHello(name:"${name}")}`})
})
}
Tam App.js dosya aşağıda gösterilmektedir -
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
async function loadGreeting() {
const response = await fetch('http://localhost:9000/graphql', {
method:'POST',
headers:{'content-type':'application/json'},
body:JSON.stringify({query:'{greeting}'})
})
const rsponseBody = await response.json();
return rsponseBody.data.greeting;
console.log("end of function")
}
async function loadSayhello(name) {
const response = await fetch('http://localhost:9000/graphql', {
method:'POST',
headers:{'content-type':'application/json'},
body:JSON.stringify({query:`{sayHello(name:"${name}")}`})
})
const rsponseBody = await response.json();
return rsponseBody.data.sayHello;
}
class App extends Component {
constructor(props) {
super(props);
this.state = {greetingMessage:'',sayHelloMessage:'',userName:''}
this.updateName = this.updateName.bind(this);
this.showSayHelloMessage = this.showSayHelloMessage.bind(this);
this.showGreeting = this.showGreeting.bind(this);
}
showGreeting() {
loadGreeting().then(g => this.setState({greetingMessage:g+" :-)"}))
}
showSayHelloMessage() {
const name = this.state.userName;
console.log(name)
loadSayhello(name).then(m => this.setState({sayHelloMessage:m}))
}
updateName(event) {
this.setState({userName:event.target.value})
}
render() {
return (
<div className = "App">
<header className = "App-header">
<img src = {logo} className = "App-logo" alt = "logo" />
<h1 className = "App-title">Welcome to React</h1>
</header>
<br/><br/>
<section>
<button id = "btnGreet" onClick = {this.showGreeting}>Greet</button>
<br/> <br/>
<div id = "greetingDiv">
<h1>{this.state.greetingMessage}</h1>
</div>
</section>
<hr/>
<section>
Enter a name:<input id = "txtName" type = "text" onChange = {this.updateName}
value = {this.state.userName}/>
<button id = "btnSayhello" onClick = {this.showSayHelloMessage}>SayHello</button>
<br/>
user name is:{this.state.userName} <br/>
<div id = "SayhelloDiv">
<h1>{this.state.sayHelloMessage}</h1>
</div>
</section>
</div>
);
}
}
export default App;
Her iki uygulama da çalıştıktan sonra selamla düğmesine tıklayın. Ardından, metin kutusuna bir ad girin ve sayHello düğmesine tıklayın. Çıktı aşağıda verildiği gibi olacaktır -
Apollo Server'ı sunucu tarafında graphql spesifikasyonu oluşturmak için kullandık. Üretime hazır GraphQL sunucusu oluşturmak hızlı ve kolaydır. Şimdi müşteri tarafını anlayalım.
Apollo Client, istemci uygulamaları oluşturmak için GraphQL kullanmanın en iyi yoludur. İstemci, geliştiricinin GraphQL ile verileri alan ve herhangi bir JavaScript ön ucuyla kullanılabilen bir kullanıcı arabirimini hızla oluşturmasına yardımcı olmak için tasarlanmıştır.
Apollo Client şu platformları destekler -
Sr.No. | Platform ve Çerçeve |
---|---|
1 | Javascript Tepki, Açısal, Vue, Meteor, Kor |
2 | WebComponents Polimer, lit-apollo |
3 | Native Mobile Java ile Yerel Android, Swift ile Yerel iOS |
Önbelleğe alma, Apollo İstemcisinin en önemli özelliklerinden biridir. apollo-boost, bir dizi başka bağımlılığı da beraberinde getiren kullanışlı bir pakettir.
İllüstrasyon
Aşağıdaki adımları kullanarak istemci uygulamaları oluşturmak için Apollo Client'ı nasıl kullanacağımızı görelim -
Sunucuyu Kurmak
Bir sunucu kurmak için aşağıdaki adımları izlemeliyiz -
Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin
Bir apollo-server-app klasörü oluşturun. Dizininizi şu şekilde değiştirin: apollo-server-app terminalden. Ardından, Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.
Adım 2 - Şema Oluşturun
Ekle schema.graphql proje klasöründeki dosya apollo-server-app ve aşağıdaki kodu ekleyin -
type Query
{
students:[Student]
}
type Student {
id:ID!
firstName:String
lastName:String
college:College
}
type College {
id:ID!
name:String
location:String
rating:Float
}
Adım 3 - Çözücü Ekleme
Bir dosya oluştur resolvers.js proje klasörüne ve aşağıdaki kodu ekleyin -
const db = require('./db')
const Query = {
//resolver function for students returns list
students:() => db.students.list(),
}
const Student = {
college:(root) => {
return db.colleges.get(root.collegeId);
}
}
module.exports = {Query,Student}
Adım 4 - Uygulamayı Çalıştırın
Oluşturmak server.jsdosya. Ortam Kurulum Bölümünde 8. adıma bakın. Terminalde npm start komutunu yürütün . Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için bir istemci olarak GraphiQL kullanacağız.
Tarayıcıyı açın ve URL'yi yazın http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın.
{
students{
id
firstName
college{
name
}
}
}
Sorgunun cevabı aşağıda verildiği gibidir -
{
"data": {
"students": [
{
"id": "S1001",
"firstName": "Mohtashim",
"college": {
"name": "CUSAT"
}
},
{
"id": "S1002",
"firstName": "Kannan",
"college": {
"name": "AMU"
}
},
{
"id": "S1003",
"firstName": "Kiran",
"college": {
"name": "AMU"
}
}
]
}
}
İstemciyi Kurmak
İstemci için yeni bir terminal açın. İstemci uygulaması çalıştırılmadan önce sunucu terminali çalışır durumda tutulmalıdır. React uygulaması 3000 numaralı bağlantı noktasında ve sunucu uygulaması 9000 numaralı bağlantı noktasında çalışacaktır.
Adım 1 - Bir React Uygulaması Oluşturun
İstemci terminalinde aşağıdaki komutu yazın -
npx create-react-app hello-world-client
Bu, tipik bir tepki uygulaması için gereken her şeyi kuracaktır. Npx yardımcı programı ve create-react-app aracı, adla bir proje oluştururhello-world-client. Kurulum tamamlandıktan sonra projeyi VSCode'da açın.
Adım 2 - Hello-world-client'ı başlatın
Terminaldeki mevcut klasör yolunu şu şekilde değiştirin: hello-world-client. Projeyi başlatmak için npm start yazın. Bu, 3000 numaralı bağlantı noktasında bir geliştirme sunucusu çalıştıracak ve tarayıcıyı otomatik olarak açacak ve dizin sayfasını yükleyecektir.
Bu, aşağıda verilen ekran görüntüsünde gösterilmektedir -
Adım 3 - Apollo İstemci Kitaplıklarını Kurun
Bir Apollo İstemcisi kurmak için yeni bir terminal açın ve mevcut proje klasörü yolunda olun. Aşağıdaki komutu yazın -
npm install apollo-boost graphql
Bu, istemci tarafı için graphql kitaplıklarını ve ayrıca Apollo Boost paketini indirecektir. Apollo-boost bağımlılıklarında npm görünümü yazarak bunu kontrol edebiliriz. Bu, aşağıda gösterildiği gibi birçok bağımlılığa sahip olacaktır -
{
'apollo-cache': '^1.1.15',
'apollo-cache-inmemory': '^1.2.8',
'apollo-client': '^2.4.0',
'apollo-link': '^1.0.6',
'apollo-link-error': '^1.0.3',
'apollo-link-http': '^1.3.1',
'apollo-link-state': '^0.4.0',
'graphql-tag': '^2.4.2'
}
Apollo-Client kütüphanesinin kurulu olduğunu açıkça görebiliyoruz.
4. Adım - index.js Dosyasındaki Uygulama Bileşenini Değiştirin
Apollo Client ile, getirme API'sini kullanmadan doğrudan sunucuyu arayabiliriz. Ayrıca, sorgular ve mutasyonlar geri tik gösterimi ile yapılmış bir dizgeye gömülmemelidir. Bunun nedeni,gqlişlevi doğrudan sorguları ayrıştırır. Bu, bir programcının GraphiQL aracında sorgu yazarken aynı şekilde doğrudan sorgu yazabileceği anlamına gelir. gql geri tik gösterimiyle yazılmış şablon dizgesini graphql sorgu nesnesine ayrıştıran bir etiket işlevidir. Apollo Client sorgu yöntemi bir söz verir.
Aşağıdaki kod parçacığı, Apollo İstemcisinin nasıl içe aktarılacağını gösterir -
import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'
const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
link: new HttpLink({uri:endPointUrl}),
cache:new InMemoryCache()
});
Önceki bölümde, HTTP istekleri için getirme API'sinin nasıl kullanılacağını tartışmıştık. Aşağıdaki kod nasıl kullanılacağını gösterirgqlişlevi. loadStudentsAsync işlevi, sunucuyu sorgulamak için graphql istemcisini kullanır.
async function loadStudentsAsync() {
const query = gql`
{
students{
id
firstName
lastName
college{
name
}
}
}`
const {data} = await client.query({query}) ;
return data.students;
}
Sadece tutman gerekiyor index.js içinde srcortak klasörde klasör ve index.html; otomatik oluşturulan diğer tüm dosyalar kaldırılabilir.
Dizin yapısı aşağıda verilmiştir -
hello-world-client /
-->node_modules
-->public
index.html
-->src
index.js
-->package.json
Aşağıdaki index.js tepki uygulamasında -
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
// apollo client
import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'
import gql from 'graphql-tag'
const endPointUrl = 'http://localhost:9000/graphql'
const client = new ApolloClient({
link: new HttpLink({uri:endPointUrl}),
cache:new InMemoryCache()
});
async function loadStudentsAsync() {
const query = gql`
{
students{
id
firstName
lastName
college{
name
}
}
}
`
const {data} = await client.query({query}) ;
return data.students;
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
students:[]
}
this.studentTemplate = [];
}
async loadStudents() {
const studentData = await loadStudentsAsync();
this.setState({
students: studentData
})
console.log("loadStudents")
}
render() {
return(
<div>
<input type = "button" value = "loadStudents" onClick = {this.loadStudents.bind(this)}/>
<div>
<br/>
<hr/>
<table border = "3">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>college Name</td>
</tr>
</thead>
<tbody>
{
this.state.students.map(s => {
return (
<tr key = {s.id}>
<td>
{s.firstName}
</td>
<td>
{s.lastName}
</td>
<td>
{s.college.name}
</td>
</tr>
)
})
}
</tbody>
</table>
</div>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
React uygulaması, aşağıda gösterildiği gibi loadStudents düğmesine tıkladığımızda, öğrencileri GraphQL sunucusundan yükleyecektir -
Kimlik doğrulama, bir kullanıcının veya işlemin kimliğini doğrulama işlemi veya eylemidir. Verilerin anonim bir kullanıcı tarafından erişilebilir olmadığından emin olmak için bir uygulamanın bir kullanıcının kimliğini doğrulaması önemlidir. Bu bölümde, bir GraphQL istemcisinin kimliğini nasıl doğrulayacağımızı öğreneceğiz.
Ekspres JWT
Bu örnekte, bir istemci uygulaması oluşturmak için jQuery kullanacağız. İstekleri doğrulamak için kullanacağız express-jwt modülü sunucu tarafında.
Express-jwt modülü, JWT belirteçlerini kullanarak HTTP isteklerini doğrulamanıza olanak tanıyan bir ara yazılımdır. JSON Web Token (JWT), oturum açmış kullanıcıyı tanımlayan uzun bir dizedir.
Kullanıcı başarıyla oturum açtığında, sunucu bir JWT belirteci oluşturur. Bu simge, bir günlüğü açıkça tanımlar. Başka bir deyişle, belirteç, kullanıcının kimliğinin bir temsilidir. Yani bir dahaki sefere, istemci sunucuya geldiğinde, gerekli kaynakları almak için bu belirteci sunması gerekir. İstemci bir mobil uygulama veya bir web uygulaması olabilir.
İllüstrasyon
Bu örneği anlamak için adım adım bir prosedür izleyeceğiz.
Sunucuyu Kurmak
Sunucuyu kurma adımları aşağıdadır -
Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin
Bir klasör oluşturun auth-server-app. Dizininizi şu şekilde değiştirin: auth-server-app terminalden. Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.
Adım 2 - Şema Oluşturun
schema.graphql auth-server-apptype Query
{
greetingWithAuth:String
}
Adım 3 - Çözücü Ekleme
Bir dosya oluştur resolvers.js proje klasörüne ve aşağıdaki kodu ekleyin -
Çözümleyici, GraphQL'in bağlam nesnesinde kimliği doğrulanmış bir kullanıcı nesnesinin mevcut olup olmadığını doğrulayacaktır. Kimliği doğrulanmış bir kullanıcının mevcut olmaması bir istisna oluşturacaktır.
const db = require('./db')
const Query = {
greetingWithAuth:(root,args,context,info) => {
//check if the context.user is null
if (!context.user) {
throw new Error('Unauthorized');
}
return "Hello from TutorialsPoint, welcome back : "+context.user.firstName;
}
}
module.exports = {Query}
Adım 4 - Server.js Dosyası Oluşturun
Kimlik doğrulama ara yazılımı, JSON Web Belirteci kullanarak arayanların kimliğini doğrular. Kimlik doğrulama URL'si http://localhost:9000/login.
Bu bir post operasyonudur. Kullanıcı, arka uçtan doğrulanacak olan e-postasını ve şifresini göndermelidir. Jwt.sign yöntemi kullanılarak geçerli bir belirteç oluşturulursa, istemcinin sonraki istekler için bunu başlıkta göndermesi gerekir.
Belirteç geçerliyse, req.user, yetkilendirme ve erişim kontrolü için daha sonraki ara yazılım tarafından kullanılmak üzere kodu çözülen JSON nesnesi ile ayarlanacaktır.
Aşağıdaki kod, istekleri doğrulamak için iki modül kullanır - jsonwebtoken ve express-jwt -
Kullanıcı, greetdüğmesi, / graphql yolu için bir istek yayınlanır. Kullanıcının kimliği doğrulanmamışsa, kendi kimliğini doğrulaması istenecektir.
Kullanıcıya e-posta kimliğini ve şifresini kabul eden bir form sunulur. Örneğimizde, kullanıcının kimliğini doğrulamaktan / login yolu sorumludur.
/ Login yolu, kullanıcı tarafından sağlanan kimlik bilgileri için veritabanında bir eşleşme bulunup bulunmadığını doğrular.
Kimlik bilgileri geçersizse, kullanıcıya bir HTTP 401 istisnası döndürülür.
Kimlik bilgileri geçerliyse, sunucu tarafından bir belirteç oluşturulur. Bu belirteç, kullanıcıya yanıtın bir parçası olarak gönderilir. Bu, jwt.sign işlevi tarafından yapılır.
const expressJwt = require('express-jwt');
const jwt = require('jsonwebtoken');
//private key
const jwtSecret = Buffer.from('Zn8Q5tyZ/G1MHltc4F/gTkVJMlrbKiZt', 'base64');
app.post('/login', (req, res) => {
const {email, password} = req.body;
//check database
const user = db.students.list().find((user) => user.email === email);
if (!(user && user.password === password)) {
res.sendStatus(401);
return;
}
//generate a token based on private key, token doesn't have an expiry
const token = jwt.sign({sub: user.id}, jwtSecret);
res.send({token});
});
Her istek için app.use () işlevi çağrılacaktır. Bu da expressJWT ara yazılımını çağıracaktır. Bu ara yazılım JSON Web Jetonunun kodunu çözecektir. Jetonda saklanan kullanıcı kimliği, talep nesnesinde bir özellik kullanıcısı olarak alınacak ve saklanacaktır.
//decodes the JWT and stores in request object
app.use(expressJwt({
secret: jwtSecret,
credentialsRequired: false
}));
Kullanıcı özelliğini GraphQL bağlamında kullanılabilir hale getirmek için, bu özellik context aşağıda gösterildiği gibi nesne -
//Make req.user available to GraphQL context
app.use('/graphql', graphqlExpress((req) => ({
schema,
context: {user: req.user &&apm; db.students.get(req.user.sub)}
})));
Oluşturmak server.js geçerli klasör yolunda. Tam server.js dosyası aşağıdaki gibidir -
const bodyParser = require('body-parser');
const cors = require('cors');
const express = require('express');
const expressJwt = require('express-jwt'); //auth
const jwt = require('jsonwebtoken'); //auth
const db = require('./db');
var port = process.env.PORT || 9000
const jwtSecret = Buffer.from('Zn8Q5tyZ/G1MHltc4F/gTkVJMlrbKiZt', 'base64');
const app = express();
const fs = require('fs')
const typeDefs = fs.readFileSync('./schema.graphql',{encoding:'utf-8'})
const resolvers = require('./resolvers')
const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs, resolvers})
app.use(cors(), bodyParser.json(), expressJwt({
secret: jwtSecret,
credentialsRequired: false
}));
const {graphiqlExpress,graphqlExpress} = require('apollo-server-express')
app.use('/graphql', graphqlExpress((req) => ({
schema,
context: {user: req.user && db.students.get(req.user.sub)}
})));
app.use('/graphiql',graphiqlExpress({endpointURL:'/graphql'}))
//authenticate students
app.post('/login', (req, res) => {
const email = req.body.email;
const password = req.body.password;
const user = db.students.list().find((user) => user.email === email);
if (!(user && user.password === password)) {
res.sendStatus(401);
return;
}
const token = jwt.sign({sub: user.id}, jwtSecret);
res.send({token});
});
app.listen(port, () => console.info(`Server started on port ${port}`));
Adım 5 - Uygulamayı Çalıştırın
Terminalde npm start komutunu yürütün . Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için istemci olarak GraphiQL kullanıyoruz.
Tarayıcıyı açın ve URL'yi yazın http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın -
{
greetingWithAuth
}
Aşağıdaki yanıtta, kimliği doğrulanmış kullanıcı olmadığımız için bir hata aldık.
{
"data": {
"greetingWithAuth": null
},
"errors": [
{
"message": "Unauthorized",
"locations": [
{
"line": 2,
"column": 3
}
],
"path": [
"greetingWithAuth"
]
}
]
}
Bir sonraki bölümde, kimlik doğrulaması için bir istemci uygulaması oluşturalım.
JQuery İstemcisini Kurma
İstemci uygulamasında, şemayı çağıracak bir selam düğmesi sağlanmıştır. greetingWithAuth. Düğmeye giriş yapmadan tıklarsanız, size aşağıdaki hata mesajını verecektir -
Veritabanında bulunan bir kullanıcıyla oturum açtığınızda, aşağıdaki ekran görünecektir -
Erişmek için greeting, önce URL'ye erişmemiz gerekiyor http://localhost:9000/login aşağıdaki gibi rota.
Yanıt, sunucudan oluşturulan jetonu içerecektir.
$.ajax({
url:"http://localhost:9000/login",
contentType:"application/json",
type:"POST",
data:JSON.stringify({email,password}),
success:function(response) {
loginToken = response.token;
$('#authStatus') .html("authenticated successfully") .css({"color":"green",'font-weight':'bold'}); $("#greetingDiv").html('').css({'color':''});
},
error:(xhr,err) => alert('error')
})
Başarılı bir giriş yaptıktan sonra, aşağıdaki gibi tebrikWithAuth şemasına erişebiliriz . Taşıyıcı jetonlu sonraki tüm istekler için bir Yetkilendirme başlığı olmalıdır.
{
url: "http://localhost:9000/graphql",
contentType: "application/json",
headers: {"Authorization": 'bearer '+loginToken}, type:'POST',
data: JSON.stringify({
query:`{greetingWithAuth}`
}
Aşağıdakiler index.html kodudur -
<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() { let loginToken = ""; $("#btnGreet").click(function() {
$.ajax({url: "http://localhost:9000/graphql", contentType: "application/json", headers: {"Authorization": 'bearer '+loginToken}, type:'POST', data: JSON.stringify({ query:`{greetingWithAuth}` }), success: function(result) { $("#greetingDiv").html("<h1>"+result.data.greetingWithAuth+"</h1>")
},
error:function(jQxhr,error) {
if(jQxhr.status == 401) {
$("#greetingDiv").html('please authenticate first!!') .css({"color":"red",'font-weight':'bold'}) return; } $("#greetingDiv").html('error').css("color","red");
}
});
});
$('#btnAuthenticate').click(function() { var email = $("#txtEmail").val();
var password = $("#txtPwd").val(); if(email && password) { $.ajax({
url:"http://localhost:9000/login",
contentType:"application/json",
type:"POST",
data:JSON.stringify({email,password}),
success:function(response) {
loginToken = response.token;
$('#authStatus') .html("authenticated successfully") .css({"color":"green",'font-weight':'bold'}); $("#greetingDiv").html('').css({'color':''});
},
error:(xhr,err) => alert('error')
})
}else alert("email and pwd empty")
})
});
</script>
</head>
<body>
<h1> GraphQL Authentication </h1>
<hr/>
<section>
<button id = "btnGreet">Greet</button>
<br/> <br/>
<div id = "greetingDiv"></div>
</section>
<br/> <br/> <br/>
<hr/>
<section id = "LoginSection">
<header>
<h2>*Login first to access greeting </h2>
</header>
<input type = "text" value = "[email protected]" placeholder = "enter email" id = "txtEmail"/>
<br/>
<input type = "password" value = "pass123" placeholder = "enter password" id = "txtPwd"/>
<br/>
<input type = "button" id = "btnAuthenticate" value = "Login"/>
<p id = "authStatus"></p>
</section>
</body>
</html>
Önbelleğe alma, verileri geçici depolama alanında saklama işlemidir. cache. Yakın zamanda ziyaret ettiğiniz bir sayfaya döndüğünüzde, tarayıcı bu dosyaları orijinal sunucu yerine önbellekten alabilir. Bu, zamanınızı ve ağınızı ek trafik yükünden kurtarır.
GraphQL ile etkileşimde bulunan istemci uygulamaları, sonlarında verileri önbelleğe almaktan sorumludur. Bunun olası modellerinden biri, id gibi bir alanı küresel olarak benzersiz bir tanımlayıcı olacak şekilde ayırmaktır.
InMemory Önbelleği
InMemoryCache, Redux gibi diğer kitaplıkları kullanmadan GraphQL istemci uygulamalarında yaygın olarak kullanılan normalleştirilmiş bir veri deposudur.
ApolloClient ile InMemoryCache kullanmak için örnek kod aşağıda verilmiştir -
import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'
const cache = new InMemoryCache();
const client = new ApolloClient({
link: new HttpLink(),
cache
});
InMemoryCache yapıcısı, önbelleğinizi özelleştirmek için özelliklere sahip isteğe bağlı bir yapılandırma nesnesi alır.
Sr.No. | Parametre ve Açıklama |
---|---|
1 | addTypename Belgeye __typename eklenip eklenmeyeceğini belirlemek için bir boole (varsayılan: true) |
2 | dataIdFromObject Bir veri nesnesini alan ve depodaki verileri normalleştirirken kullanılacak benzersiz bir tanımlayıcı döndüren bir işlev |
3 | fragmentMatcher Varsayılan olarak, InMemoryCache sezgisel bir parça eşleştirici kullanır |
4 | cacheRedirects Bir istek gerçekleşmeden önce sorguyu önbellekteki başka bir girişe yönlendirmek için işlevler haritası. |
İllüstrasyon
ReactJS'de iki sekme içeren tek sayfalık bir uygulama oluşturacağız - biri ana sayfa sekmesi, diğeri öğrenciler için. Öğrenciler sekmesi, bir GraphQL sunucu API'sinden veri yükleyecektir. Uygulama , kullanıcı ana sayfa sekmesinden öğrenciler sekmesine gittiğinde öğrencilerin verilerini sorgulayacaktır . Ortaya çıkan veriler uygulama tarafından önbelleğe alınacaktır.
Ayrıca kullanarak sunucu zamanını da sorgulayacağız. getTimeSayfanın önbelleğe alınıp alınmadığını doğrulamak için alan. Veriler önbellekten döndürülürse, sayfa sunucuya gönderilen ilk isteğin zamanını gösterecektir. Veriler sunucuya yapılan yeni bir talebin sonucuysa, her zaman sunucudan gelen en son zamanı gösterecektir.
Sunucuyu Kurmak
Sunucuyu kurma adımları aşağıdadır -
Adım 1 - Proje için Gerekli Bağımlılıkları İndirin ve Yükleyin
Bir klasör oluşturun cache-server-app. Dizininizi şu şekilde değiştirin: cache-server-app terminalden. Ortam Kurulumu bölümünde açıklanan 3 ila 5 arasındaki adımları izleyin.
Adım 2 - Şema Oluşturun
Ekle schema.graphql proje klasöründeki dosya cache-server-app ve aşağıdaki kodu ekleyin -
type Query {
students:[Student]
getTime:String
}
type Student {
id:ID!
firstName:String
lastName:String
fullName:String
}
Adım 3 - Çözücü Ekleme
Proje klasöründe bir dosya resolvers.js oluşturun ve aşağıdaki kodu ekleyin -
const db = require('./db')
const Query = {
students:() => db.students.list(),
getTime:() => {
const today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
return `${h}:${m}:${s}`;
}
}
module.exports = {Query}
Adım 4 - Uygulamayı Çalıştırın
Bir server.js dosyası oluşturun. Ortam Kurulum Bölümünde 8. adıma bakın. Terminalde npm start komutunu yürütün . Sunucu, 9000 portunda çalışır durumda olacaktır. Burada, uygulamayı test etmek için bir istemci olarak GraphiQL kullanacağız.
Tarayıcıyı açın ve URL'yi girin http://localhost:9000/graphiql. Düzenleyiciye aşağıdaki sorguyu yazın -
{
getTime
students {
id
firstName
}
}
Örnek yanıt, öğrencilerin adlarını ve sunucu saatini gösterir.
{
"data": {
"getTime": "22:18:42",
"students": [
{
"id": "S1001",
"firstName": "Mohtashim"
},
{
"id": "S1002",
"firstName": "Kannan"
},
{
"id": "S1003",
"firstName": "Kiran"
}
]
}
}
ReactJS İstemcisini Kurmak
İstemci için yeni bir terminal açın. İstemci uygulaması çalıştırılmadan önce sunucu terminali çalışır durumda tutulmalıdır. React uygulaması 3000 numaralı bağlantı noktasında ve sunucu uygulaması 9000 numaralı bağlantı noktasında çalışacaktır.
Adım 1 - Bir React Uygulaması Oluşturun
İstemci terminalinde aşağıdaki komutu yazın -
npx create-react-app hello-world-client
Bu, tipik bir tepki uygulaması için gereken her şeyi kuracaktır. npx utility ve create-react-apparaçlar merhaba-dünya-müşteri adıyla bir proje oluşturur. Kurulum tamamlandıktan sonra projeyi VSCode'da açın.
Aşağıdaki komutu kullanarak tepki vermek için yönlendirici modüllerini kurun - npm install react-router-dom.
Adım 2 - Hello-world-client'ı başlatın
Terminaldeki geçerli klasör yolunu hello-world-client olarak değiştirin. Projeyi başlatmak için npm start yazın. Bu, 3000 numaralı bağlantı noktasında bir geliştirme sunucusu çalıştıracak ve tarayıcıyı otomatik olarak açacak ve dizin sayfasını yükleyecektir.
Bu, aşağıda verilen ekran görüntüsünde gösterilmektedir -
Adım 3 - Apollo İstemci Kitaplıklarını Kurun
Bir Apollo İstemcisi kurmak için yeni bir terminal açın ve mevcut proje klasörü yolunda olun. Aşağıdaki komutu yazın -
npm install apollo-boost graphql
Bu, istemci tarafı için graphql kitaplıklarını ve ayrıca Apollo Boost paketini indirecektir. Bunu npm view apollo-boost bağımlılıkları yazarak doğrulayabiliriz. Bu, aşağıda gösterildiği gibi birçok bağımlılığa sahip olacaktır -
{
'apollo-cache': '^1.1.15',
'apollo-cache-inmemory': '^1.2.8',
'apollo-client': '^2.4.0',
'apollo-link': '^1.0.6',
'apollo-link-error': '^1.0.3',
'apollo-link-http': '^1.3.1',
'apollo-link-state': '^0.4.0',
'graphql-tag': '^2.4.2'
}
Apollo-client kitaplığının kurulu olduğunu açıkça görebiliriz.
4. Adım - index.js Dosyasındaki Uygulama Bileşenini Değiştirin
Basit bir tepki uygulaması için, yalnızca index.js içinde src klasör ve index.htmlortak klasörde; otomatik oluşturulan diğer tüm dosyalar kaldırılabilir.
Dizin yapısı aşağıda verilmiştir -
hello-world-client /
-->node_modules
-->public
index.html
-->src
index.js
students.js
-->package.json
Öğrenci Bileşenini içerecek olan ek bir student.js dosyası ekleyin. Öğrenci ayrıntıları Öğrenci Bileşeni aracılığıyla alınır. Uygulama Bileşeninde bir HashRouter kullanıyoruz.
Aşağıdaki index.js tepki uygulamasında -
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {HashRouter, Route, Link} from 'react-router-dom'
//components
import Students from './students'
class App extends Component {
render() {
return(
<div><h1>Home !!</h1>
<h2>Welcome to React Application !! </h2>
</div>
)
}
}
function getTime() {
var d = new Date();
return d.getHours()+":"+d.getMinutes()+":"+d.getSeconds()
}
const routes = <HashRouter>
<div>
<h4>Time from react app:{getTime()}</h4>
<header>
<h1> <Link to="/">Home</Link>
<Link to = "/students">Students</Link> </h1>
</header>
<Route exact path = "/students" component = {Students}></Route>
<Route exact path = "/" component = {App}></Route>
</div>
</HashRouter>
ReactDOM.render(routes, document.querySelector("#root"))
Adım 5 - Student.js'de Bileşen Öğrencileri Düzenleyin
Öğrenciler Bileşeninde, verileri yüklemek için aşağıdaki iki yaklaşımı kullanacağız -
Fetch API (loadStudents_noCache) - Bu, öğrenci sekmesine her tıklandığında yeni bir isteği tetikleyecektir.
Apollo Client (loadWithApolloclient) - Bu, verileri önbellekten alacak.
Bir işlev ekleyin loadWithApolloclientsunucudan öğrenciler ve zaman için hangi sorgular. Bu işlev, önbelleğe almayı etkinleştirecektir. Burada sorguyu ayrıştırmak için bir gql işlevi kullanıyoruz.
async loadWithApolloclient() {
const query = gql`{
getTime
students {
id
firstName
}
}`;
const {data} = await client.query({query})
return data;
}
Fetch APIkaynakları getirmek için basit bir arayüzdür. Getirme, eski XMLHttpRequest'e göre web istekleri oluşturmayı ve yanıtları işlemeyi kolaylaştırır. Aşağıdaki yöntem, verilerin doğrudan getirme api kullanılarak yüklenmesini gösterir -
async loadStudents_noCache() {
const response = await fetch('http://localhost:9000/graphql', {
method:'POST',
headers:{'content-type':'application/json'},
body:JSON.stringify({query:`{
getTime
students {
id
firstName
}
}`})
})
const rsponseBody = await response.json();
return rsponseBody.data;
}
StudentsComponent yapıcısında, loadWithApolloClientyöntem. Tam Student.js dosya aşağıda -
import React, {Component} from 'react';
import { Link} from 'react-router-dom'
//Apollo Client
import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost'
import gql from 'graphql-tag'
const client = new ApolloClient({
link: new HttpLink({uri:`http://localhost:9000/graphql`}),
cache:new InMemoryCache()
})
class Students extends Component {
constructor(props) {
super(props);
this.state = {
students:[{id:1,firstName:'test'}],
serverTime:''
}
this.loadWithApolloclient().then(data => {
this.setState({
students:data.students,
serverTime:data.getTime
})
})
}
async loadStudents_noCache() {
const response = await fetch('http://localhost:9000/graphql', {
method:'POST',
headers:{'content-type':'application/json'},
body:JSON.stringify({query:`{
getTime
students {
id
firstName
}
}`})
})
const rsponseBody = await response.json();
return rsponseBody.data;
}
async loadWithApolloclient() {
console.log("inside apollo client function")
const query = gql`{
getTime
students {
id
firstName
}
}`;
const {data} = await client.query({query})
return data;
}
render() {
return(
<div>
<h3>Time from GraphQL server :{this.state.serverTime}</h3>
<p>Following Students Found </p>
<div>
<ul>
{
this.state.students.map(s => {
return(
<li key = {s.id}>
{s.firstName}
</li>
)
})
}
</ul>
</div>
</div>
)
}
}
export default Students
Adım 6 - React Uygulamasını npm start ile çalıştırın
React uygulamasını ana sayfa sekmesinden öğrenciler sekmesine geçerek test edebilirsiniz. Öğrenciler sekmesi sunucudaki verilerle yüklendiğinde. Verileri önbelleğe alacak. Evden öğrenciler sekmesine birden çok kez geçerek test edebilirsiniz. Çıktı aşağıda gösterildiği gibi olacaktır -
Önce öğrenci sayfasını URL'yi yazarak yüklediyseniz, http://localhost:3000/#/studentsReact uygulaması ve GraphQL için yükleme süresinin yaklaşık olarak aynı olacağını görebilirsiniz. Bundan sonra, ana görünüme geçip GraphQL sunucusuna geri dönerseniz, zaman değişmeyecektir. Bu, verilerin önbelleğe alındığını gösterir.
Adım 7 - loadWithApolloclient Çağrısını loadStudents_noCache olarak değiştirin
Yükleme yöntemini şu şekilde değiştirirseniz loadStudents_noCacheStudentComponent yapıcısında, çıktı verileri önbelleğe almayacaktır. Bu, önbelleğe alma ve önbelleğe almama arasındaki farkı gösterir.
this.loadStudents_noCache().then(data => {
this.setState({
students:data.students,
serverTime:data.getTime
})
})
Yukarıdaki çıktıdan, sekmeler arasında ileri geri geçiş yaparsanız, graphql sunucusundan gelen sürenin her zaman en son olacağı, yani verilerin önbelleğe alınmayacağı açıktır.