GraphQL - Ortam Kurulumu

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 toplama 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 !!"
   }
}