ग्राफक्लीन - उत्परिवर्तन

इस अध्याय में, हम ग्राफक्यूएल में म्यूटेशन क्वेश्चन सीखेंगे।

म्यूटेशन क्वेरीज़ डेटा स्टोर में डेटा को संशोधित करती है और एक मान लौटाती है। इसका उपयोग डेटा डालने, अपडेट करने या हटाने के लिए किया जा सकता है। म्यूटेशन को स्कीमा के एक भाग के रूप में परिभाषित किया गया है।

एक म्यूटेशन क्वेरी का सिंटैक्स नीचे दिया गया है -

mutation{
   someEditOperation(dataField:"valueOfField"):returnType
}

चित्रण

आइए हम समझते हैं कि म्यूटेशन क्वेरी में नए स्टूडेंट रिकॉर्ड को कैसे जोड़ा जाए।

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

उत्परिवर्तन-ऐप नाम से एक प्रोजेक्ट फ़ोल्डर बनाएँ। अपनी निर्देशिका को टर्मिनल से म्यूटेशन-ऐप में बदलें। पर्यावरण सेटअप अध्याय में समझाया गया चरण 3 से 5 का पालन करें।

चरण 2 - एक स्कीमा बनाएँ। Graphql फ़ाइल

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

type Query {
   greeting:String
}

type Mutation {
   createStudent(collegeId:ID,firstName:String,lastName:String):String
}

ध्यान दें कि फ़ंक्शन createStudent एक स्ट्रिंग प्रकार देता है। यह एक विशिष्ट पहचानकर्ता (आईडी) है जो एक छात्र बनाने के बाद उत्पन्न होता है।

चरण 3 - एक resolver.js फ़ाइल बनाएँ

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

const db = require('./db')
const Mutation = {
   createStudent:(root,args,context,info) => {
      return db.students.create({collegeId:args.collegeId,
      firstName:args.firstName,
      lastName:args.lastName})
   }
}
const Query = {
   greeting:() => "hello"
}

module.exports = {Query,Mutation}

म्यूटेशन फ़ंक्शन छात्रों को डेटास्टोर में संग्रह करने के लिए इंगित करता है। एक नया छात्र जोड़ने के लिए, छात्रों के संग्रह में विधि बनाएँ। आर्ग वस्तु मापदंडों जो क्वेरी में पारित कर रहे हैं शामिल होंगे। छात्रों के संग्रह की बनाएँ विधि एक नए बनाए गए छात्र ऑब्जेक्ट की आईडी लौटाएगी।

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

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

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

//college Id should be matched with data from colleges.json for easy retrieval

mutation {
   createStudent(collegeId:"col-2",firstName:"Tim",lastName:"George")
}

उपरोक्त क्वेरी student.json फ़ाइल में एक छात्र ऑब्जेक्ट बनाएगी। क्वेरी एक विशिष्ट पहचानकर्ता लौटाएगी। क्वेरी की प्रतिक्रिया नीचे दी गई है -

{
   "data": {
      "createStudent": "SkQtxYBUm"
   }
}

यह सत्यापित करने के लिए कि क्या छात्र ऑब्जेक्ट बनाया गया है, हम छात्रबाय क्वेरी का उपयोग कर सकते हैं। आप id को सत्यापित करने के लिए डेटा फ़ोल्डर से students.json फ़ाइल भी खोल सकते हैं।

StudentById क्वेरी का उपयोग करने के लिए, संपादित करें schema.graphql जैसा कि नीचे दिया गया है -

type Query {
   studentById(id:ID!):Student
}

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

संपादित करें resolver.js नीचे दिए अनुसार फ़ाइल -

const db = require('./db')
const Query = {
   studentById:(root,args,context,info) => {
      return db.students.get(args.id);
   }
}

const Mutation = {
   createStudent:(root,args,context,info) => {
      return db.students.create({collegeId:args.collegeId,
      firstName:args.firstName,
      lastName:args.lastName})
   }
}

module.exports = {Query,Mutation}

नीचे दिए गए म्यूटेशन क्वेरी से लौटे अद्वितीय आईडी द्वारा छात्र को प्राप्त करने की क्वेरी है -

{
    studentById(id:"SkQtxYBUm") {
    id
    firstName
    lastName
  }
}

सर्वर से प्रतिक्रिया इस प्रकार है -

{
   "data": {
      "studentById": {
         "id": "SkQtxYBUm",
         "firstName": "Tim",
         "lastName":"George"
      }
   }
}

म्यूटेशन में एक वस्तु लौटाते हुए

उत्परिवर्तन में किसी वस्तु को वापस करना सबसे अच्छा अभ्यास है। उदाहरण के लिए, क्लाइंट एप्लिकेशन छात्र और कॉलेज के विवरण प्राप्त करना चाहता है। इस मामले में, हम दो अलग-अलग अनुरोध करने के बजाय, एक क्वेरी बना सकते हैं जो छात्रों और उनके कॉलेज के विवरण वाली एक वस्तु लौटाती है।

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

नाम का एक नया तरीका जोड़ें addStudent जो उत्परिवर्तन के प्रकार में वस्तु लौटाता है schema.graphql।

आइए जानें कि छात्र विवरणों के माध्यम से कॉलेज के विवरण का उपयोग कैसे करें। स्कीमा फ़ाइल में कॉलेज प्रकार जोड़ें।

type Mutation {
   addStudent_returns_object(collegeId:ID,firstName:String,lastName:String):Student

   createStudent(collegeId:ID,firstName:String,lastName:String):String
}

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

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

चरण 2 - resolvers.js फ़ाइल को अपडेट करें

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

const Mutation = {
   createStudent:(root,args,context,info) => {

      return db.students.create({
         collegeId:args.collegeId,
         firstName:args.firstName,
         lastName:args.lastName
      })
   },
   
   // new resolver function
   addStudent_returns_object:(root,args,context,info) => {
      const id = db.students.create({
         collegeId:args.collegeId,
         firstName:args.firstName,
         lastName:args.lastName
      })

      return db.students.get(id)
   }
}

//for each single student object returned,resolver is invoked
const Student = {
   college:(root) => {
      return db.colleges.get(root.collegeId);
   }
}

module.exports = {Query,Student,Mutation}

चरण 3 - सर्वर को शुरू करें और ग्राफिउल में अनुरोध क्वेरी टाइप करें

इसके बाद, हम सर्वर को शुरू करेंगे और निम्नलिखित कोड के साथ ग्राफीक्यूएल में क्वेरी का अनुरोध करेंगे -

mutation {
   addStudent_returns_object(collegeId:"col-101",firstName:"Susan",lastName:"George") {
      id
      firstName
      college{
         id
         name
      }
   }
}

उपरोक्त क्वेरी एक नया छात्र जोड़ता है और कॉलेज ऑब्जेक्ट के साथ छात्र ऑब्जेक्ट को पुनः प्राप्त करता है। यह सर्वर को राउंड ट्रिप बचाता है।

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

{
   "data": {
      "addStudent_returns_object": {
         "id": "rklUl08IX",
         "firstName": "Susan",
         "college": {
            "id": "col-101",
            "name": "AMU"
         }
      }
   }
}