GraphQL से एक परिचय: यह कैसे काम करता है और इसका उपयोग कैसे करें

Unsplash पर मैट डंकन द्वारा फोटो

GraphQL एपीआई के लिए एक क्वेरी भाषा है। यह दिखाता है कि सर्वर द्वारा प्रदान किए गए विभिन्न प्रकार के डेटा क्या हैं और फिर ग्राहक वास्तव में वही चुन सकता है जो वह चाहता है।

इसके अलावा ग्राफक्यूएल में आप एक से अधिक रीस्ट एपीआई कॉल करने के बजाय एक कॉल में कई सर्वर संसाधन प्राप्त कर सकते हैं।

लाभों की पूरी सूची के लिए आप https://graphql.org/ देख सकते हैं।

जब तक आप कार्रवाई में ग्राफकॉल को नहीं देखते हैं, तब तक लाभ को समझना मुश्किल है। तो चलिए ग्राफकलाइन का उपयोग करते हुए शुरू करते हैं।

हम इस लेख में NodeJS के साथ साथ GraphQL का उपयोग करेंगे।

पूर्व आवश्यक वस्तुएँ

यहां से NodeJS इंस्टॉल करें: https://nodejs.org/en/।

NodeJs के साथ GraphQL का उपयोग कैसे करें

कई भाषाओं के साथ GraphQL का उपयोग किया जा सकता है। यहां हम इस बात पर ध्यान केंद्रित करेंगे कि हम NodeJS का उपयोग करते हुए जावास्क्रिप्ट के साथ ग्राफक्लाइन का उपयोग कैसे कर सकते हैं।

ग्राफक-विथ-नोडज नामक एक फ़ोल्डर बनाएँ। प्रोजेक्ट फ़ोल्डर में जाएं और NpmJS प्रोजेक्ट बनाने के लिए npm init चलाएं। इसके लिए कमांड नीचे दी गई है।

सीडी ग्राफल-साथ-नोड्ज
एनपीएम init

निर्भरता स्थापित करें

निम्नलिखित आदेश का उपयोग कर एक्सप्रेस स्थापित करें:

npm स्थापित एक्सप्रेस

निम्न कमांड का उपयोग करके ग्राफकॉल स्थापित करें। हम एक्सप्रेस के लिए ग्राफकलाइन और ग्राफकॉल स्थापित करेंगे।

npm स्थापित करें एक्सप्रेस-ग्राफकल ग्राफकल

NodeJS कोड

प्रोजेक्ट के अंदर server.js नामक एक फ़ाइल बनाएँ और उसमें निम्न कोड कॉपी करें:

const express = आवश्यकता ('एक्सप्रेस');
const port = 5000;
const app = express ();

app.get ('/ hello', (req, res) => {
    res.send ( "हैलो");
   }
);

app.listen (बंदरगाह);
कंसोल.लॉग (`लोकलहोस्ट पर चल रहा सर्वर: $ {पोर्ट}`);

उपरोक्त कोड में एक एकल HTTP GET समापन बिंदु है जिसे / हैलो कहा जाता है।

अंतिम बिंदु एक्सप्रेस का उपयोग करके बनाया गया है।

अब हमें इस कोड को GraphQL सक्षम करने के लिए संशोधित करना है।

कोड में GraphQL सक्षम करना

GraphQL में एक एकल URL समापन बिंदु होगा जिसे / graphql कहा जाता है जो सभी अनुरोधों को संभाल लेगा।

निम्न कोड को server.js में कॉपी करें:

// सभी पुस्तकालयों की जरूरत है
const express = आवश्यकता ('एक्सप्रेस');
const graphqlHTTP = की आवश्यकता होती है ('एक्सप्रेस-ग्राफक्ल');
const {GraphQLSchema} = आवश्यकता (c graphql ’);

const {queryType} = आवश्यकता ('./ query.js');

// पोर्ट नंबर और एक्सप्रेस ऐप की स्थापना
const port = 5000;
const app = express ();

 // स्कीमा को परिभाषित करें
const स्कीमा = नया ग्राफकसेलसेमा ({क्वेरी: क्वेरीटेप});

// नोडजेज ग्राफकलाइन सर्वर सेटअप करें
app.use ('/ graphql', graphqlHTTP ({
    स्कीमा: स्कीमा,
    ग्रेफिक: सच,
}));

app.listen (बंदरगाह);
कंसोल.लॉग (`ग्राफकॉल सर्वर लोकलहोस्ट पर चल रहा है: $ {पोर्ट}`);

अब इस कोड के माध्यम से चलते हैं।

graphqlHTTP हमें / graphql url पर एक ग्राफकलाइन सर्वर सेट करने में सक्षम बनाता है। यह जानता है कि आने वाले अनुरोध को कैसे संभालना है।

यह सेटअप कोड की निम्नलिखित पंक्तियों में किया गया है:

app.use ('/ graphql', graphqlHTTP ({
    स्कीमा: स्कीमा,
    ग्रेफिक: सच,
}));

अब हम 'graphqlHTTP' के अंदर के पैरामीटर को एक्सप्लोर करते हैं।

graphiql

graphiql एक वेब यूआई है, जिसके साथ आप ग्राफकॉल एंडपॉइंट्स का परीक्षण कर सकते हैं। हम इसे सही पर सेट करेंगे ताकि हमारे द्वारा बनाए गए विभिन्न ग्राफ़कॉल एंडपॉइंट्स का परीक्षण करना आसान हो।

योजना

GraphQL में केवल एक बाहरी समापन बिंदु / ग्राफकल होता है। यह समापन बिंदु कई अन्य समापन बिंदु हो सकते हैं जो विभिन्न कार्य कर रहे हैं। इन समापन बिंदुओं को स्कीमा में निर्दिष्ट किया जाएगा।

स्कीमा जैसे काम करेगा:

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

स्कीमा को कोड में निम्नानुसार परिभाषित किया गया है:

const स्कीमा = नया ग्राफकसेलसेमा ({क्वेरी: क्वेरीटेप});

स्कीमा में क्वेरी के साथ-साथ म्यूटेशन प्रकार भी हो सकते हैं। यह लेख केवल क्वेरी प्रकार पर केंद्रित होगा।

सवाल

आप स्कीमा में देख सकते हैं कि क्वेरी को क्वेरी टाइप किया गया है।

हम निम्न आदेश का उपयोग करके query.js फ़ाइल से क्वेरी टाइप आयात करते हैं:

const {queryType} = आवश्यकता ('./ query.js');

query.js एक कस्टम फ़ाइल है जिसे हम जल्द ही बना लेंगे।

क्वेरी वह है जहां हम स्कीमा में केवल-पढ़ने के लिए समापन बिंदु निर्दिष्ट करते हैं।

प्रोजेक्ट में query.js नामक फ़ाइल बनाएँ और उसमें निम्न कोड कॉपी करें।

const {GraphQLObjectType,
    GraphQLString
} = आवश्यकता ('ग्राफकल');


// क्वेरी को परिभाषित करें
const क्वेरी टाइप = नया ग्राफकॉइनऑब्जेक्टटाइप ({
    नाम: 'क्वेरी',
    खेत: {
        नमस्ते: {
            प्रकार:

            हल: फ़ंक्शन () {
                वापसी "हैलो वर्ल्ड";
            }
        }
    }
});

Export.queryType = queryType;

समझाया गया

queryType को GraphQLObjectType के रूप में बनाया गया है और इसे क्वेरी नाम दिया गया है।

फ़ील्ड वे हैं जहाँ हम विभिन्न बिंदुओं को निर्दिष्ट करते हैं।

इसलिए यहां हम एक एंडपॉइंट जोड़ रहे हैं जिसे हैलो कहा जाता है।

हैलो में एक प्रकार का ग्राफक्यूएलस्ट्रिंग होता है जिसका अर्थ है कि इस समापन बिंदु में स्ट्रिंग का रिटर्न प्रकार है। इस ग्राफक स्कीमा के बाद से स्ट्रिंग के बजाय ग्राफलाइनस्ट्रिंग टाइप है। तो सीधे स्ट्रिंग का उपयोग करने से काम नहीं चलेगा।

फंक्शन फंक्शन उस क्रिया को इंगित करता है जब समापन बिंदु कहा जाता है। यहां कार्रवाई एक स्ट्रिंग "हैलो वर्ल्ड" को वापस करने के लिए है।

अंत में, हम export.queryType = queryType का उपयोग करके क्वेरी टाइप करते हैं। यह सुनिश्चित करना है कि हम इसे server.js में आयात कर सकते हैं।

अनुप्रयोग चलाना

निम्नलिखित कमांड का उपयोग करके एप्लिकेशन चलाएँ:

नोड server.js

आवेदन लोकलहोस्ट पर चलता है: 5000 / ग्राफकल।

आप लोकलहोस्ट: 5000 / ग्राफकल पर जाकर आवेदन का परीक्षण कर सकते हैं।

यह URL ग्राफ़िकल वेब UI चलाता है जैसा कि नीचे स्क्रीन में दिखाया गया है।

इनपुट बाईं ओर दिया गया है और आउटपुट दाईं ओर दिखाया गया है।

निम्नलिखित इनपुट दें

{
  नमस्ते
}

यह निम्न आउटपुट देगा

{
  "डेटा": {
    "हैलो": "हैलो वर्ल्ड"
  }
}

बधाई

आपने अपना पहला GraphQL समापन बिंदु बनाया है।

अधिक समापन बिंदु जोड़ना

हम 2 नए एंडपॉइंट बनाएंगे:

  • मूवी: यह एंडपॉइंट एक मूवी लौटाएगा, मूवी आईडी दी जाएगी
  • निर्देशक: यह समापन बिंदु निर्देशक आईडी दिए गए एक निर्देशक को लौटा देगा। यह इस निर्देशक द्वारा निर्देशित सभी फिल्मों को भी लौटाएगा।

डेटा जोड़ना

आमतौर पर, एक एप्लिकेशन डेटाबेस से डेटा पढ़ेगा। लेकिन इस ट्यूटोरियल के लिए, हम कोड में डेटा को सादगी के लिए हार्डकोड करेंगे।

Data.js नामक एक फ़ाइल बनाएँ और निम्नलिखित कोड जोड़ें।

// हार्डकोड फिल्मों और निर्देशकों के लिए कुछ डेटा
चलो फिल्में = [{
    आईडी: 1,
    नाम: "मूवी 1",
    वर्ष: २०१ 201,
    निदेशक: १
},
{
    आईडी: 2,
    नाम: "मूवी 2",
    वर्ष: 2017,
    निदेशक: १
},
{
    आईडी: 3,
    नाम: "मूवी 3",
    वर्ष: २०१६,
    निर्देशक: ३
}
];

निर्देशकों = [{
    आईडी: 1,
    नाम: "निर्देशक 1",
    उम्र: 20
},
{
    आईडी: 2,
    नाम: "निर्देशक 2",
    उम्र: 30
},
{
    आईडी: 3,
    नाम: "निर्देशक 3",
    उम्र: 40
}
];

Export.movies = फिल्में;
Export.directors = Directors;

इस फ़ाइल में फिल्में और निर्देशक डेटा हैं। हम अपने समापन बिंदु के लिए इस फ़ाइल में डेटा का उपयोग करेंगे।

क्वेरी में मूवी समापन बिंदु जोड़ना

नए एंडपॉइंट्स को query.js फ़ाइल में queryType में जोड़ा जाएगा।

मूवी एंडपॉइंट के लिए कोड नीचे दिखाया गया है:

चलचित्र: {
            प्रकार:
            args: {
                आईडी: {प्रकार: ग्राफकैलिंट}
            },
            संकल्प: फ़ंक्शन (स्रोत, आर्ग्स) {
                वापसी _.find (फिल्में, {आईडी: args.id});
            }
        }

इस समापन बिंदु का रिटर्न प्रकार फिल्म टाइप है जिसे जल्द ही परिभाषित किया जाएगा।

arg पैरामीटर का उपयोग मूवी एंडपॉइंट पर इनपुट को इंगित करने के लिए किया जाता है। इस एंडपॉइंट का इनपुट आईडी है जो कि ग्राफक्लाइंट टाइप का है।

फंक्शन फ़ंक्शन मूवी की सूची से, आईडी के अनुरूप फिल्म को लौटाता है। खोज एक सूची में एक तत्व को खोजने के लिए इस्तेमाल किया पुस्तकालय से एक समारोह है।

Query.js का पूरा कोड नीचे दिखाया गया है:

const {GraphQLObjectType,
    GraphQLString,
    GraphQLInt
} = आवश्यकता ('ग्राफकल');
const _ = की आवश्यकता होती है ('लॉश');

const {movieType} = आवश्यकता ('./ type.js');
{{फिल्में} = आवश्यकता ('./ data.js');


// क्वेरी को परिभाषित करें
const क्वेरी टाइप = नया ग्राफकॉइनऑब्जेक्टटाइप ({
    नाम: 'क्वेरी',
    खेत: {
        नमस्ते: {
            प्रकार:

            हल: फ़ंक्शन () {
                वापसी "हैलो वर्ल्ड";
            }
        },

        चलचित्र: {
            प्रकार:
            args: {
                आईडी: {प्रकार: ग्राफकैलिंट}
            },
            संकल्प: फ़ंक्शन (स्रोत, आर्ग्स) {
                वापसी _.find (फिल्में, {आईडी: args.id});
            }
        }
    }
});

Export.queryType = queryType;

उपरोक्त कोड से, हम देख सकते हैं कि मूवी टाइप वास्तव में type.js में परिभाषित है।

कस्टम प्रकार मूवी टाइप जोड़ना

Type.js नामक एक फ़ाइल बनाएँ।

निम्न कोड को type.js में जोड़ें

कास्ट {
    GraphQLObjectType,
    GraphQLID,
    GraphQLString,
    GraphQLInt
} = आवश्यकता ('ग्राफकल');

// मूवी प्रकार परिभाषित करें
मूवी टाइप = नया ग्राफकॉइनऑब्जेक्टटाइप ({
    नाम: 'मूवी',
    खेत: {
        आईडी: {प्रकार: ग्राफकैलिड},
        नाम: {प्रकार: ग्राफक्लाइनस्ट्रिंग},
        वर्ष: {प्रकार: ग्राफकाइंट},
        निदेशक: {प्रकार: ग्राफकैलिड}

    }
});

Export.movieType = movieType;

यह देखा जा सकता है कि मूवी टाइप एक ग्राफकॉइलजेक्ट के रूप में बनाया गया है।

इसके 4 क्षेत्र हैं: आईडी, नाम, वर्ष और निर्देशक। इनमें से प्रत्येक फ़ील्ड के प्रकारों को निर्दिष्ट करते समय और साथ ही उन्हें जोड़ते हैं।

ये क्षेत्र सीधे डेटा से आते हैं। इस मामले में, यह फिल्मों की सूची से होगा।

क्वेरी जोड़ने और निर्देशक समापन बिंदु के लिए टाइप करें

फिल्म की तरह, यहां तक ​​कि निर्देशक के समापन बिंदु को भी जोड़ा जा सकता है।

Query.js में, निर्देशक समापन बिंदु को इस प्रकार जोड़ा जा सकता है:

निदेशक: {
            प्रकार: निर्देशक टाइप,
            args: {
                आईडी: {प्रकार: ग्राफकैलिंट}
            },
            संकल्प: फ़ंक्शन (स्रोत, आर्ग्स) {
                वापसी _.find (निदेशक, {आईडी: args.id});
            }
        }

संचालक टाइप को निम्न प्रकार से जोड़ा जा सकता है ।js:

// डायरेक्टर टाइप को परिभाषित करें
निदेशकप्रकार = नया ग्राफकॉइबोजेक्टप्राइप ({
    नाम: 'निर्देशक',
    खेत: {
        आईडी: {प्रकार: ग्राफकैलिड},
        नाम: {प्रकार: ग्राफक्लाइनस्ट्रिंग},
        आयु: {प्रकार: ग्राफकैलिंट},
        चलचित्र: {
            प्रकार: नया ग्राफकिनलिस्ट (मूवी टाइप),
            संकल्प (स्रोत, args) {
                वापसी _.फिल्टर (फिल्में, {directorId: source.id});
            }

        }

    }
});

एक मिनट रुकिए। निर्देशक टाइप फिल्म टाइप से थोड़ा अलग है। ऐसा क्यों है?

डायरेक्टर टाइप के अंदर एक संकल्प फ़ंक्शन क्यों है? पहले हमने देखा कि रिज़ॉल्यूशन फ़ंक्शंस केवल क्वेरी में मौजूद थे ...

डायरेक्टरटाइप की विशेष प्रकृति

जब डायरेक्टर एंडपॉइंट कहा जाता है तो हमें डायरेक्टर की डिटेल्स वापस करनी होती हैं, साथ ही सभी मूवीज जो डायरेक्टर ने डायरेक्ट की हैं।

पहले 3 फ़ील्ड आईडी, नाम, डायरेक्टरटाइप में उम्र सीधी है और डेटा (डायरेक्टर्स लिस्ट) से सीधे आती है।

चौथे क्षेत्र, फिल्में, इस निर्देशक द्वारा फिल्मों की सूची को शामिल करने की आवश्यकता है।

इसके लिए, हम यह उल्लेख कर रहे हैं कि फिल्मों का प्रकार फिल्मी टाइप की एक ग्राफकलाइनिस्ट (फिल्मों की सूची) है।

लेकिन हम इस निर्देशक द्वारा निर्देशित सभी फिल्मों को कैसे देखेंगे?

इसके लिए, हमारे पास फिल्मों के क्षेत्र में एक संकल्प फ़ंक्शन है। इस रिज़ॉल्यूशन फ़ंक्शन के इनपुट स्रोत और आर्ग्स हैं।

स्रोत में मूल वस्तु विवरण होगा।

आइए एक डायरेक्टर के लिए फ़ील्ड्स आईडी = 1, नाम = "रैंडम" और उम्र = 20 कहते हैं। फिर source.id = 1, source.name = "रैंडम" और source.age = 20

इसलिए इस उदाहरण में, रिज़ॉल्यूशन फ़ंक्शन उन सभी फ़िल्मों का पता लगाता है जहाँ निर्देशकआईड आवश्यक निर्देशक की आईडी से मेल खाता है।

कोड

इस एप्लिकेशन के लिए संपूर्ण कोड इस GitHub रेपो में उपलब्ध है

अनुप्रयोग का परीक्षण

अब हम विभिन्न परिदृश्यों के लिए आवेदन का परीक्षण करते हैं।

नोड server.js का उपयोग करके एप्लिकेशन को चलाएं।

लोकलहोस्ट पर जाएँ: 5000 / ग्राफकल और निम्न इनपुट्स आज़माएँ।

चलचित्र

इनपुट:

{
  फिल्म (आईडी: १) {
    नाम
  }
}

आउटपुट:

{
  "डेटा": {
    "चलचित्र": {
      "नाम": "मूवी 1"
    }
  }
}

ऊपर से, हम देख सकते हैं कि ग्राहक ठीक वही अनुरोध कर सकता है जो वह चाहता है और ग्राफकॉल यह सुनिश्चित करेगा कि केवल उन्हीं मापदंडों को वापस भेजा जाए। यहां केवल नाम फ़ील्ड का अनुरोध किया जाता है और केवल वह सर्वर द्वारा वापस भेजा जाता है।

फिल्म (आईडी: 1) में, आईडी इनपुट पैरामीटर है। हम सर्वर को मूवी वापस भेजने के लिए कह रहे हैं जिसमें 1 की आईडी है।

इनपुट:

{
  फिल्म (आईडी: ३) {
    नाम
    आईडी
    साल
  }
}

आउटपुट:

{
  "डेटा": {
    "चलचित्र": {
      "नाम": "मूवी 3",
      "आईडी": "3",
      "वर्ष": 2016
    }
  }
}

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

निदेशक

इनपुट:

{
  निदेशक (आईडी: 1) {
    नाम
    आईडी,
    आयु
  }
}

आउटपुट:

{
  "डेटा": {
    "निदेशक": {
      "नाम": "निर्देशक 1",
      "आईडी": "1",
      "आयु": 20
    }
  }
}

इनपुट:

{
  निदेशक (आईडी: 1) {
    नाम
    आईडी,
    उम्र,
    चलचित्र{
      नाम,
      साल
    }
  }
}

आउटपुट:

{
  "डेटा": {
    "निदेशक": {
      "नाम": "निर्देशक 1",
      "आईडी": "1",
      "आयु": 20,
      "चलचित्र": [
        {
          "नाम": "मूवी 1",
          "वर्ष": 2018
        },
        {
          "नाम": "मूवी 2",
          "वर्ष": 2017
        }
      ]
    }
  }
}

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

इसी तरह, इसे अन्य क्षेत्रों और प्रकारों तक बढ़ाया जा सकता है। उदाहरण के लिए, हम एक क्वेरी खोज सकते हैं जैसे id 1 के साथ एक निर्देशक खोजें। इस निर्देशक के लिए सभी फिल्में खोजें। फिल्म के प्रत्येक कलाकार के लिए। प्रत्येक अभिनेता को शीर्ष 5 रेटेड फिल्में और इतने पर मिलता है। इस क्वेरी के लिए, हमें प्रकारों के बीच संबंध निर्दिष्ट करना होगा। एक बार जब हम ऐसा कर लेते हैं, तो ग्राहक अपने इच्छित किसी भी रिश्ते को क्वेरी कर सकता है।

बधाई

अब आप ग्राफकॉल की मूल अवधारणाओं को जानते हैं।

आप ग्राफ़िकल के बारे में अधिक जानने के लिए दस्तावेज़ीकरण देख सकते हैं

लेखक के बारे में

मैं प्रौद्योगिकी से प्यार करता हूं और क्षेत्र में प्रगति का अनुसरण करता हूं। मुझे अपने प्रौद्योगिकी ज्ञान के साथ दूसरों की मदद करना भी पसंद है।

मेरे लिंक्डइन खाते में मेरे साथ जुड़ने के लिए स्वतंत्र महसूस करें https://www.linkedin.com/in/aditya1811/

आप मुझे ट्विटर https://twitter.com/adityasridhar18 पर भी फॉलो कर सकते हैं

मेरी वेबसाइट: https://adityasridhar.com/

मूल रूप से adityasridhar.com पर प्रकाशित।