ग्राफकॉल - उदाहरण

इस अध्याय में, हम एक साधारण एपीआई बनाएंगे जो ग्रीटिंग संदेश, हैलोवर्ल्ड, और ग्राफिंकल का उपयोग करके इसे एक्सेस करता है।

उदाहरण

यह उदाहरण NodeJS, एक्सप्रेस और अपोलो सर्वर पर आधारित है। हम निम्नलिखित चरणों के साथ सभी अवधारणाओं को एक साथ रखना सीखेंगे -

चरण 1 - एक्सप्रेस की स्थापना

ExpressJS एक वेब एप्लिकेशन फ्रेमवर्क है जो वेबसाइटों और वेब एप्लिकेशन को बनाने में मदद करता है। इस उदाहरण में, हम एक्सप्रेस फ्रेमवर्क के शीर्ष पर एक ग्राफलाइन एपीआई का निर्माण करेंगे।

अगला कदम एक फ़ोल्डर बनाना है hello-world-serverऔर टर्मिनल से एक ही फ़ोल्डर में नेविगेट करें। Package.json जोड़ें, और पैकेज को एक नाम दें। चूंकि यह पैकेज केवल आंतरिक रूप से उपयोग किया जाता है, इसलिए हम इसे निजी घोषित कर सकते हैं।

{
   "name":"hello-world-server",
   "private":true
}

नीचे दिखाए अनुसार एक्सप्रेस सर्वर के लिए निर्भरता स्थापित करें -

C:\Users\Admin\hello-world-server>npm install express body-parser cors

body-parser एक मिडलवेयर पैकेज है जो एक्सप्रेस को HTTP पोस्ट अनुरोधों को कुशलतापूर्वक संभालने में मदद करता है। cors एक अन्य मिडलवेयर पैकेज है जो क्रॉस-ऑरिजिन रिसोर्स शेयरिंग को हैंडल करता है।

बनाओ server.js प्रोजेक्ट फ़ोल्डर में फ़ाइल करें और उसमें निम्नलिखित टाइप करें -

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

यह सत्यापित करने के लिए कि एक्सप्रेस सर्वर चालू है और चल रहा है, टर्मिनल विंडो में निम्नलिखित कोड निष्पादित करें -

C:\Users\Admin\hello-world-server>node server.js

निम्न आउटपुट सर्वर कंसोल में प्रदर्शित होता है। इससे पता चलता है कि पोर्ट 9000 पर एक्सप्रेस सर्वर चल रहा है।

server is up and running at 9000

यदि आप ब्राउज़र खोलते हैं और टाइप करते हैं http://localhost:9000, आपको निम्न स्क्रीन मिलेगी -

सर्वर को बंद करने के लिए, दबाएँ Ctrl + C।

चरण 2 - ग्राफकॉल और अपोलो सर्वर स्थापित करें

अब जब एक्सप्रेस को कॉन्फ़िगर किया गया है, तो अगला कदम निम्नलिखित ग्राफक्लाइन निर्भरता को डाउनलोड करना है -

• graphql
• graphql-tools
• apollo-server-express@1

हम अपोलो सर्वर v1.0 का उपयोग करेंगे क्योंकि यह एक स्थिर रिलीज है। इन निर्भरताओं को स्थापित करने के लिए निम्न कमांड टाइप करें -

C:\Users\Admin\hello-world-server>npm install graphql graphql-tools apollo-server-express@1

हम जाँच सकते हैं कि क्या ये निर्भरताएँ सफलतापूर्वक जाँच कर स्थापित की गई हैं package.json फ़ाइल जो हमने पहले बनाई थी।

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

चरण 3 - स्कीमा को परिभाषित करें

एक ग्राफकाइ स्कीमा यह परिभाषित करती है कि किस तरह की वस्तु को किसी सेवा से प्राप्त किया जा सकता है, और यह किस क्षेत्र में है। स्कीमा का उपयोग करके परिभाषित किया जा सकता हैGraphQL Schema Definition Language। अब, निम्नलिखित कोड स्निपेट को इसमें जोड़ेंserver.js फ़ाइल -

// Adding Type Definitions
const typeDefinition = `
   type Query  {
      greeting: String
   }

यहां, क्वेरी में एक ग्रीटिंग विशेषता है जो एक स्ट्रिंग मान लौटाता है ।

चरण 4 - एक रिज़ॉल्वर बनाएं

रिसॉल्वर बनाने में पहला कदम ग्रीटिंग क्षेत्र के लिए अनुरोध को संसाधित करने के लिए कुछ कोड जोड़ना है। यह एक में निर्दिष्ट हैresolver। रिज़ॉल्वर फ़ंक्शन की संरचना स्कीमा से मेल खाना चाहिए। में निम्नलिखित कोड स्निपेट जोड़ेंserver.js फ़ाइल।

// Adding resolver
const  resolverObject = {
   Query : {
      greeting: () => 'Hello GraphQL  From TutorialsPoint !!'
   }
}

दूसरा चरण स्कीमा और रिज़ॉल्वर का उपयोग करके बाँधना है makeExecutableSchema। यह फ़ंक्शन ग्रैक्कल-टूल मॉड्यूल में पूर्व-परिभाषित है। में निम्नलिखित कोड स्निपेट जोड़ें server.js फ़ाइल।

const {makeExecutableSchema} = require('graphql-tools')
const schema = makeExecutableSchema({typeDefs:typeDefinition, resolvers:resolverObject})

चरण 5 - ReactJS / GraphiQL एप्लिकेशन से डेटा प्राप्त करने के लिए रूट निर्धारित करें

में निम्नलिखित कोड स्निपेट जोड़ें server.js फ़ाइल -

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 समारोह मार्ग रजिस्टर करने के लिए मदद करता हैhttp://localhost:9000/graphql। ReactJS एप्लिकेशन क्वेरी डेटा के लिए इस समापन बिंदु का उपयोग कर सकता है। इसी तरह, graphqliExpress फ़ंक्शन मार्ग को पंजीकृत करने में मदद करता हैhttp://localhost:9000/graphiql। यह एपीआई का परीक्षण करने के लिए ग्राफिइल ब्राउज़र ब्राउजर द्वारा उपयोग किया जाएगा।

पूरा server.js कोड नीचे दिया गया है -

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

चरण 6 - आवेदन शुरू करें

निष्पादित server.js Node.js का उपयोग इस प्रकार है -

C:\Users\Admin\hello-world-server>node server.js

चरण 7 - ग्राफकॉल एपीआई का परीक्षण करें

ब्राउज़र खोलें और टाइप करें http://localhost:9000/graphiql। GraphiQL के क्वेरी टैब में, निम्नलिखित दर्ज करें -

{
   greeting
}

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

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!"
   }
}

निम्नलिखित छवि प्रतिक्रिया को दर्शाती है -

Note - कृपया सुनिश्चित करें कि अपोलो सर्वर संस्करण 1.0 का उपयोग किया जाता है।