ग्राफक्लाइन - क्वेरी

एक ग्राफक्यूएल ऑपरेशन या तो पढ़ा जा सकता है या एक लेखन ऑपरेशन हो सकता है। ग्राफ़ को पढ़ने या मूल्यों को लाने के लिए ग्राफ़कॉल क्वेरी का उपयोग किया जाता है जबकि मानों को लिखने या पोस्ट करने के लिए उपयोग किया जाता है। किसी भी स्थिति में, ऑपरेशन एक सरल स्ट्रिंग है जिसे एक ग्राफ़िकल सर्वर एक विशिष्ट प्रारूप में डेटा के साथ पार्स और प्रतिक्रिया दे सकता है। आमतौर पर मोबाइल और वेब एप्लिकेशन के लिए उपयोग किया जाने वाला लोकप्रिय प्रतिक्रिया प्रारूप JSON है।

किसी क्वेरी को परिभाषित करने का सिंटैक्स इस प्रकार है -

//syntax 1
query query_name{ someField }

//syntax 2
{ someField }

निम्नलिखित प्रश्न का एक उदाहरण है -

//query with name myQuery
query myQuery{
   greeting
}

// query without any name
{
   greeting
}

यह उपरोक्त उदाहरण से स्पष्ट है कि क्वेरी कीवर्ड वैकल्पिक है।

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

उदाहरण 1 - एक कस्टम फ़ील्ड के साथ क्वेरी छात्र मॉडल

इस उदाहरण में, हमारे पास json फ़ाइल में संग्रहीत छात्रों का एक समूह है। प्रत्येक छात्र मॉडल में प्रथम नाम, अंतिम नाम और आईडी जैसे क्षेत्र होते हैं लेकिन कोई पूर्ण नाम नहीं होता है। यहां, हम चर्चा करेंगे कि सभी छात्रों के पूर्ण नाम को पुनः प्राप्त करने के लिए एक प्रश्न कैसे करें। इसके लिए, हमें स्कीमा रिज़ॉल्वर में पूर्ण नाम फ़ील्ड बनाने की आवश्यकता है।

आइए देखें कि नीचे दिए गए चरणों का उपयोग करके इस चित्र को कैसे किया जाए -

चरण 1 - परियोजना के लिए आवश्यक निर्भरताएँ डाउनलोड और स्थापित करें

नाम का फोल्डर बनाएं query-app। अपनी निर्देशिका को बदलेंquery-appटर्मिनल से। बाद में, पर्यावरण सेटअप अध्याय में समझाया गया चरण 3 से 5 का पालन करें।

चरण 2 - एक स्कीमा बनाएं

जोड़ना schema.graphql प्रोजेक्ट फ़ोल्डर क्वेरी-ऐप में फ़ाइल करें और निम्नलिखित कोड जोड़ें -

type Query {
   greeting:String
   students:[Student]
   studentById(id:ID!):Student
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   fullName:String 
}

ध्यान दें कि कोई पूर्ण नाम फ़ील्ड नहीं हैstudents.jsonफ़ाइल। हालांकि, हम लाने के लिए की जरूरत पूरा नाम एक प्रश्न के माध्यम से छात्र की। पूरा नाम , इस मामले में है कि डेटा स्रोत के साथ उपलब्ध नहीं है एक कस्टम फ़ील्ड हो जाएगा।

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

एक फ़ाइल बनाएँ resolvers.js प्रोजेक्ट फ़ोल्डर में और निम्न कोड जोड़ें -

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}

चरण 4 - एप्लिकेशन को चलाएं

बनाओ server.jsफ़ाइल। पर्यावरण सेटअप अध्याय में चरण 8 देखें। टर्मिनल में कमांड  npm शुरू करें। सर्वर 9000 पोर्ट पर अप और रनिंग होगा। यहाँ, हम अनुप्रयोग का परीक्षण करने के लिए एक ग्राहक के रूप में ग्राफिंक का उपयोग करते हैं।

ब्राउज़र खोलें और URL टाइप करें http://localhost:9000/graphiql। संपादक में निम्नलिखित प्रश्न टाइप करें -

{
   students{
      id
      fullName
   }
}

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

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "fullName": "Mohtashim:Mohammad"
         },
         
         {
            "id": "S1002",
            "fullName": "Kannan:Sudhakaran"
         },
         
         {
            "id": "S1003",
            "fullName": "Kiran:Panigrahi"
         }
      ]
   }
}

बनाओ server.js और निम्नलिखित कोड जोड़ें -

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

टर्मिनल में कमांड npm शुरू करें। सर्वर 9000 पोर्ट पर अप और रनिंग होगा। यहां, हम अनुप्रयोग का परीक्षण करने के लिए एक ग्राहक के रूप में ग्राफीक्यूएल का उपयोग करते हैं।

ब्राउज़र खोलें और URL टाइप करें http://localhost:9000/graphiql। संपादक में निम्नलिखित प्रश्न टाइप करें -

{
   students{
      id
      fullName
   }
}

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

{
   "data": {
      "students": [
         {
            "id": "S1001",
            "fullName": "Mohtashim:Mohammad"
         },
         {
            "id": "S1002",
            "fullName": "Kannan:Sudhakaran"
         },
         {
            "id": "S1003",
            "fullName": "Kiran:Panigrahi"
         }
      ]
   }
}

चित्रण 2 - नेस्टेड क्वेरी

छात्र विवरण और उनके कॉलेज विवरण लाने के लिए एक नेस्टेड क्वेरी बनाएं। हम एक ही प्रोजेक्ट फोल्डर के साथ काम करेंगे।

चरण 1 - स्कीमा संपादित करें

स्कीमा फ़ाइल में पहले से ही छात्र फ़ील्ड है। आइए हम एक फ़ील्ड कॉलेज जोड़ें और इसके प्रकार को परिभाषित करें।

type College {
   id:ID!
   name:String
   location:String
   rating:Float
}

type Student {
   id:ID!
   firstName:String
   lastName:String
   fullName:String
   college:College
}

चरण 2 - resolver.js को संशोधित करें

हमें नीचे के रूप में एक कॉलेज रिज़ॉल्वर फ़ंक्शन जोड़ने की आवश्यकता है। लौटे प्रत्येक छात्र वस्तु के लिए कॉलेज रिज़ॉल्वर फ़ंक्शन निष्पादित किया जाएगा। इस मामले में रिज़ॉल्वर के मूल पैरामीटर में छात्र शामिल होगा ।

const Student = {
   fullName:(root,args,context,info) => {
      return root.firstName+":"+root.lastName
   },
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}
module.exports = {Query,Student}

रिवाल्वर प्रत्येक छात्र के कॉलेज कलेक्शन की विधि प्राप्त करके और कॉलेजआईड पास करके लौटाता है । हम CollegeId के माध्यम से छात्र और कॉलेज के बीच संबंध रखते हैं

चरण 3 - आवेदन का परीक्षण करें

टर्मिनल विंडो खोलें और प्रोजेक्ट फ़ोल्डर में नेविगेट करें। कमांड -npm स्टार्ट टाइप करें। ब्राउज़र लॉन्च करें और URL दर्ज करेंhttp://localhost:9000/graphiql

ग्राफिअल विंडो में निम्नलिखित क्वेरी दर्ज करें -

{
   students{
      id
      firstName
      college {
         id
         name
         location
         rating
      }
   }
}

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

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

एक क्वेरी चर क्या है?

यदि किसी क्वेरी में कुछ डायनेमिक मान पारित किए जाने हैं, तो चर का उपयोग करके इन डायनेमिक मानों का प्रतिनिधित्व करें। इसलिए, क्लाइंट अनुप्रयोगों द्वारा क्वेरी का पुन: उपयोग किया जा सकता है।

चित्रण

हमें क्वेरी चर को समझने के लिए एक सरल एप्लिकेशन बनाएं।

चरण 1 - स्कीमा फ़ाइल संपादित करें

SayHello फ़ील्ड जोड़ें जो एक स्ट्रिंग पैरामीटर लेता है और एक स्ट्रिंग लौटाता है। क्लाइंट एप्लिकेशन में नाम मान गतिशील होंगे।

type Query {
   sayHello(name:String!):String
}

चरण 2 - resolver.js फ़ाइल संपादित करें

एक sayHello रिज़ॉल्वर जोड़ें जो नीचे के रूप में पैरामीटर लेता है -

sayHello:(root,args,context,info) => `Hi ${args.name} GraphQL server says Hello to you!!`

चरण 3 - रेखांकन में रेखीय क्वेरी को घोषित करें

एक चर को चर के नाम के बाद $ घोषित किया जाता है। उदाहरण के लिए: $ myname_Variable।

एक बार $ myname_Variable घोषित होने के बाद, इसे एक नामित क्वेरी सिंटैक्स के साथ उपयोग करना होगा। क्वेरी, myQuery स्ट्रिंग मान लेता है और इसे नीचे दिया गया हैहेल्लो पर दिखाया गया है -

query myQuery($myname_Variable:String!) {
   sayHello(name:$myname_Variable)
}

ग्राफिंक क्लाइंट के क्वेरी वेरिएबल्स सेक्शन में JSON ऑब्जेक्ट के रूप में $ myname_Variable के लिए मान सेट करें।

{
   "myname_Variable": "Mohtashim"
}

उपरोक्त कोड का आउटपुट निम्नानुसार है -

{
   "data": {
      "sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
   }
}

Enum के साथ Query Variable का उपयोग कैसे करें

आइए देखें कि फील्ड पैरामीटर होने पर क्वेरी चर का उपयोग कैसे करें enum type

चरण 1 - स्कीमा संपादित करें। Graphql फ़ाइल

enum ColorType {
   RED
   BLUE
   GREEN
}

type Query {
   setFavouriteColor(color:ColorType):String
}

SetFavouriteColor समारोह इनपुट के रूप में enum लेता है और एक स्ट्रिंग मान देता है।

चरण 2 - resolvers.js फ़ाइल संपादित करें

समाधानकर्ता समारोह setFavouriteColor लेता जड़ और आर्ग । रनटाइम पर कार्य करने के लिए पारित एनम मूल्य को आर्ग्स पैरामीटर के माध्यम से एक्सेस किया जा सकता है।

setFavouriteColor:(root,args) => {
   return  "Your Fav Color is :"+args.color;
}

चरण 3 - ग्राफ़िक्वेल में एक क्वेरी वेरिएबल घोषित करें

क्वेरी नाम दिया गया है query_to_setColorजो ColorType के color_variable नाम का एक वैरिएबल लेता है। इस चर को मेथड सेटफॉराइटकॉलर पर दिया जाता है।

query query_to_setColor($color_variable:ColorType) {
   setFavouriteColor(color:$color_variable)
}

GraphiQL के क्वेरी चर अनुभाग में, निम्न कोड टाइप करें -

{
   "color_variable":"RED"
}

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

{
   "data": {
      "setFavouriteColor": "Your Fav Color is: RED"
   }
}