ग्राफकलाइन - सत्यापन

डेटा को जोड़ने या संशोधित करते समय, उपयोगकर्ता इनपुट को मान्य करना महत्वपूर्ण है। उदाहरण के लिए, हमें यह सुनिश्चित करने की आवश्यकता हो सकती है कि किसी क्षेत्र का मान हमेशा शून्य न हो। हम प्रयोग कर सकते हैं! (non-nullable) इस तरह के सत्यापन को करने के लिए ग्राफलाइन में मार्कर टाइप करें।

का उपयोग करने के लिए वाक्यविन्यास ! टाइप मार्कर नीचे दिया गया है -

type TypeName {
   field1:String!,
   field2:String!,
   field3:Int!
}

उपरोक्त सिंटैक्स यह सुनिश्चित करता है कि सभी फ़ील्ड शून्य नहीं हैं।

यदि हम एक स्ट्रिंग की लंबाई की जाँच करना या किसी दी गई सीमा के भीतर नंबर की जाँच करना जैसे अतिरिक्त नियमों को लागू करना चाहते हैं, तो हम कस्टम सत्यापनकर्ताओं को परिभाषित कर सकते हैं। कस्टम सत्यापन तर्क रिज़ॉल्वर फ़ंक्शन का एक हिस्सा होगा। इसे एक उदाहरण की मदद से समझते हैं।

चित्रण - कस्टम मान्यताओं को लागू करना

आइए हम मूल सत्यापन के साथ एक साइनअप फॉर्म बनाएं। फॉर्म में ईमेल, फ़र्स्टनेम और पासवर्ड फ़ील्ड होंगे।

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

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

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

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

type Query {
   greeting:String
}

type Mutation {
   signUp(input:SignUpInput):String
}

input SignUpInput {
   email:String!,
   password:String!,
   firstName:String!
}

Note- हम साइनअप फ़ंक्शन में मापदंडों की संख्या को कम करने के लिए इनपुट प्रकार साइनअप इंप्यूट का उपयोग कर सकते हैं। तो, साइनअप फ़ंक्शन केवल साइनअपइन्पुट के प्रकार का केवल एक पैरामीटर लेता है।

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

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

const Query = {
   greeting:() => "Hello"
}

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

      const {email,firstName,password} = args.input;

      const emailExpression = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      
      const isValidEmail =  emailExpression.test(String(email).toLowerCase())
      if(!isValidEmail)
      throw new Error("email not in proper format")

      if(firstName.length > 15)
      throw new Error("firstName should be less than 15 characters")

      if(password.length < 8 )
      throw new Error("password should be minimum 8 characters")
      
      return "success";
   }
}
module.exports = {Query,Mutation}

रिज़ॉल्वर फ़ंक्शन, साइनअपp पैरामीटर ईमेल, पासवर्ड और फर्स्टनाम को स्वीकार करता है। इन्हें इनपुट चर के माध्यम से पारित किया जाएगा ताकि इसे args.input के माध्यम से एक्सेस किया जा सके।

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

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

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

mutation doSignUp($input:SignUpInput) {
   signUp(input:$input)
}

चूंकि साइनअप फ़ंक्शन का इनपुट एक जटिल प्रकार है, इसलिए हमें ग्राफ़िकल में क्वेरी चर का उपयोग करने की आवश्यकता है। इसके लिए, हमें पहले क्वेरी को एक नाम देना होगा और इसे doSignUp पर कॉल करना होगा, $ इनपुट एक क्वेरी वैरिएबल है।

निम्नलिखित क्वेरी चर को ग्राफिअकल के क्वेरी चर टैब में दर्ज किया जाना चाहिए -

{
   "input":{
      "email": "abc@abc",
      "firstName": "kannan",
      "password": "pass@1234"
   }
}

त्रुटियों के सरणी में सत्यापन त्रुटियों का विवरण है जो नीचे दिखाया गया है -

{
   "data": {
      "signUp": null
   },
   
   "errors": [
      {
         "message": "email not in proper format",
         "locations": [
            {
               "line": 2,
               "column": 4
            }
         ],
         "path": [
            "signUp"
         ]
      }
   ]
}

हमें नीचे दिए गए अनुसार प्रत्येक क्षेत्र के लिए एक उचित इनपुट दर्ज करना होगा -

{
   "input":{
      "email": "[email protected]",
      "firstName": "kannan",
      "password": "pass@1234"
   }
}

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

{
   "data": {
      "signUp": "success"
   }
}

यहां, नीचे दिए गए क्वेरी में, हम कोई पासवर्ड असाइन नहीं कर रहे हैं।

{
   "input":{
      "email": "[email protected]",
      "firstName": "kannan"
   }
}

यदि आवश्यक फ़ील्ड प्रदान नहीं की जाती है, तो qraphql सर्वर निम्न त्रुटि प्रदर्शित करेगा -

{
   "errors": [
      {
         "message": "Variable \"$input\" got invalid value {\"email\":\"[email protected]\",\"firstName\":\"kannan\"}; Field value.password of required type String! was not provided.",
         "locations": [
            {
               "line": 1,
               "column": 19
            }
         ]
      }
   ]
}