ग्राफकलाइन - पर्यावरण सेटअप

इस अध्याय में, हम ग्राफ़िकल के लिए पर्यावरणीय सेटअप के बारे में जानेंगे। इस ट्यूटोरियल में उदाहरण निष्पादित करने के लिए आपको निम्नलिखित की आवश्यकता होगी -

• लिनक्स, मैकओएस या विंडोज पर चलने वाला कंप्यूटर।

• एक वेब ब्राउज़र, अधिमानतः Google Chrome का नवीनतम संस्करण।

• Node.js का एक हालिया संस्करण स्थापित किया गया। नवीनतम एलटीएस संस्करण की सिफारिश की गई है।

• VSCode स्थापित या अपनी पसंद के किसी भी कोड संपादक के लिए विस्तार के साथ दृश्य स्टूडियो कोड।

Nodejs के साथ एक GraphQL सर्वर बनाने के लिए कैसे

हम नीचे दिखाए गए अनुसार Nodejs के साथ GraphQL सर्वर बनाने के लिए एक विस्तृत कदम-वार दृष्टिकोण से गुजरेंगे -

चरण 1 - नोड और एनपीएम संस्करण सत्यापित करें

NodeJs स्थापित करने के बाद, टर्मिनल पर निम्न आदेशों का उपयोग करके नोड और npm के संस्करण को सत्यापित करें -

C:\Users\Admin>node -v
v8.11.3

C:\Users\Admin>npm -v
5.6.0

चरण 2 - एक परियोजना फ़ोल्डर बनाएँ और VSCode में खोलें

प्रोजेक्ट के रूट फ़ोल्डर को टेस्ट-ऐप नाम दिया जा सकता है।

नीचे दिए गए निर्देशों का उपयोग करके दृश्य स्टूडियो कोड संपादक का उपयोग करके फ़ोल्डर खोलें -

C:\Users\Admin>mkdir test-app
C:\Users\Admin>cd test-app
C:\Users\Admin\test-app>code.

चरण 3 - package.json बनाएँ और निर्भरताएँ स्थापित करें

एक पैकेज बनाएँ.जेसन फ़ाइल जिसमें ग्राफकॉल सर्वर अनुप्रयोग की सभी निर्भरताएँ होंगी।

{
   "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"
   }
}

नीचे दिए गए आदेश का उपयोग करके निर्भरता स्थापित करें -

C:\Users\Admin\test-app>npm install

चरण 4 - डेटा फ़ोल्डर में फ्लैट फ़ाइल डेटाबेस बनाएँ

इस चरण में, हम डेटा को स्टोर और पुनः प्राप्त करने के लिए फ्लैट फ़ाइलों का उपयोग करते हैं। एक फ़ोल्डर डेटा बनाएं और दो फाइलें जोड़ेंstudents.json तथा colleges.json।

निम्नलिखित है colleges.json फ़ाइल -

[
   {
      "id": "col-101",
      "name": "AMU",
      "location": "Uttar Pradesh",
      "rating":5.0
   },
   
   {
      "id": "col-102",
      "name": "CUSAT",
      "location": "Kerala",
      "rating":4.5
   }
]

निम्नलिखित है students.json फ़ाइल -

[
   {
      "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"
   }
]

चरण 5 - एक डेटा एक्सेस लेयर बनाएं

हमें डेटा फ़ोल्डर सामग्री लोड करने वाले डेटास्टोर बनाने की आवश्यकता है। इस मामले में, हमें संग्रह चर, छात्रों और कॉलेजों की आवश्यकता है । जब भी एप्लिकेशन को डेटा की आवश्यकता होती है, वह इन संग्रह चर का उपयोग करता है।

प्रोजेक्ट फ़ोल्डर में फ़ाइल db.js निम्नानुसार बनाएं -

const { DataStore } = require('notarealdb');

const store = new DataStore('./data');

module.exports = {
   students:store.collection('students'),
   colleges:store.collection('colleges')
};

चरण 6 - स्कीमा फ़ाइल बनाएँ, स्कीमा.ग्राफकल

वर्तमान प्रोजेक्ट फ़ोल्डर में एक स्कीमा फ़ाइल बनाएँ और निम्न सामग्री जोड़ें -

type Query  {
   test: String
}

चरण 7 - रिज़ॉल्वर फ़ाइल बनाएँ, resolvers.js

वर्तमान प्रोजेक्ट फ़ोल्डर में एक रिज़ॉल्वर फ़ाइल बनाएं और निम्नलिखित सामग्री जोड़ें -

const Query = {
   test: () => 'Test Success, GraphQL server is up & running !!'
}
module.exports = {Query}

चरण 8 - Server.js बनाएँ और ग्राफकॉन्फ़ को कॉन्फ़िगर करें

एक सर्वर फ़ाइल बनाएं और ग्राफ़कॉइन को निम्नानुसार कॉन्फ़िगर करें -

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}`
   )
);

चरण 9 - ग्राफ़िक्वेल के साथ एप्लिकेशन और टेस्ट चलाएं

परियोजना परीक्षण-एप्लिकेशन की फ़ोल्डर संरचना निम्नानुसार सत्यापित करें -

test-app /
   -->package.json
   -->db.js
   -->data
      students.json
      colleges.json
   -->resolvers.js
   -->schema.graphql
   -->server.js

नीचे दिए अनुसार कमांड npm शुरू करें

C:\Users\Admin\test-app>npm start

सर्वर 9000 पोर्ट में चल रहा है, इसलिए हम ग्राफ़िक्वेल टूल का उपयोग करके एप्लिकेशन का परीक्षण कर सकते हैं। ब्राउज़र खोलें और URL http: // localhost: 9000 / graphiql डालें। संपादक में निम्नलिखित प्रश्न टाइप करें -

{
   Test 
}

सर्वर से प्रतिक्रिया नीचे दी गई है -

{
   "data": {
      "test": "Test Success, GraphQL server is running !!"
   }
}