GraphQL - ตัวแก้ไข

Resolver คือชุดของฟังก์ชันที่สร้างการตอบสนองสำหรับแบบสอบถาม GraphQL พูดง่ายๆคือตัวแก้ไขทำหน้าที่เป็นตัวจัดการแบบสอบถาม GraphQL ทุกฟังก์ชันตัวแก้ไขในสคีมา GraphQL ยอมรับสี่อาร์กิวเมนต์ตำแหน่งตามที่ระบุด้านล่าง -

fieldName:(root, args, context, info) => { result }

ตัวอย่างของฟังก์ชันตัวแก้ไขแสดงอยู่ด้านล่าง -

//resolver function  with no parameters and returning string
greeting:() => {
   return "hello from  TutorialsPoint !!!"
}

//resolver function with no parameters and returning list
students:() => db.students.list()

//resolver function with arguments and returning object
studentById:(root,args,context,info) => {
   return db.students.get(args.id);
}

ด้านล่างนี้เป็นอาร์กิวเมนต์ตำแหน่งและคำอธิบาย -

ซีเนียร์	อาร์กิวเมนต์และคำอธิบาย
1	root อ็อบเจ็กต์ที่มีผลลัพธ์ที่ส่งคืนจากตัวแก้ไขบนฟิลด์พาเรนต์
2	args วัตถุที่มีอาร์กิวเมนต์ส่งผ่านเข้าไปในเขตข้อมูลในแบบสอบถาม
3	context นี่คือออบเจ็กต์ที่ใช้ร่วมกันโดยตัวแก้ปัญหาทั้งหมดในแบบสอบถามหนึ่ง ๆ
4	info ประกอบด้วยข้อมูลเกี่ยวกับสถานะการดำเนินการของแบบสอบถามรวมถึงชื่อเขตข้อมูลเส้นทางไปยังเขตข้อมูลจากราก

รูปแบบผลลัพธ์ Resolver

Resolvers ใน GraphQL สามารถส่งคืนค่าประเภทต่างๆตามที่ระบุด้านล่าง -

ซีเนียร์	อาร์กิวเมนต์และคำอธิบาย
1	null or undefined สิ่งนี้บ่งชี้ว่าไม่พบวัตถุ
2	array จะใช้ได้เฉพาะในกรณีที่สคีมาระบุว่าผลลัพธ์ของฟิลด์ควรเป็นรายการ
3	promise ตัวแก้ไขมักจะดำเนินการแบบอะซิงโครนัสเช่นการดึงข้อมูลจากฐานข้อมูลหรือ API แบ็กเอนด์ดังนั้นจึงสามารถคืนสัญญาได้
4	scalar or object ตัวแก้ไขยังสามารถคืนค่าอื่น ๆ

ภาพประกอบ

ให้เราสร้างแอปพลิเคชั่นง่ายๆเพื่อทำความเข้าใจตัวแก้ไข สิ่งนี้จะสร้างสคีมาสำหรับการสืบค้นนักเรียนโดยใช้รหัสจากเซิร์ฟเวอร์ ข้อมูลนักเรียนจะถูกเก็บไว้ในไฟล์แบบแบนและเราจะใช้โมดูลโหนดที่เรียกว่าnotarealdb เพื่อปลอมฐานข้อมูลและอ่านจากไฟล์แบบแบน

ต่อไปนี้เป็นกระบวนการที่ชาญฉลาดในการสร้างแอปพลิเคชันง่ายๆ -

ขั้นตอนที่ 1 - ดาวน์โหลดและติดตั้งการอ้างอิงที่จำเป็นสำหรับโครงการ

สร้างโฟลเดอร์ชื่อ resolver-app. เปลี่ยนไดเร็กทอรีของคุณเป็นresolver-appจากขั้ว ต่อมาทำตามขั้นตอนที่ 3 ถึง 5 ในบทการตั้งค่าสภาพแวดล้อม

ขั้นตอนที่ 2 - สร้างสคีมา

เพิ่มไฟล์ schema.graphql ในโฟลเดอร์โปรเจ็กต์ resolver-app และเพิ่มรหัสต่อไปนี้ -

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

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

แสดงให้เห็นว่าสคีไฟล์ที่ผู้ใช้สามารถสอบถามทักทายนักเรียนและstudentById ในการดึงข้อมูลนักเรียนที่มีรหัสเฉพาะเราใช้data type ID!ซึ่งแสดงฟิลด์ตัวระบุเฉพาะที่ไม่เป็นโมฆะ นักเรียนข้อมูลส่งกลับอาร์เรย์ของนักเรียนและทักทายผลตอบแทนค่าสตริงที่เรียบง่าย

ขั้นตอนที่ 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);
   }
}
module.exports = {Query}

ที่นี่studentByIdใช้พารามิเตอร์สามตัว ดังที่กล่าวไว้ในบทนี้studentIdสามารถดึงมาจาก args; root จะมีวัตถุ Query เอง ในการส่งคืนนักเรียนที่ระบุเราจำเป็นต้องเรียกใช้เมธอด get ด้วยพารามิเตอร์ id ในคอลเล็กชันนักเรียน

นี่ทักทายนักเรียน studentByIdมี resolvers ที่จัดการแบบสอบถามstudents resolver functionส่งคืนรายชื่อนักเรียนจากชั้นการเข้าถึงข้อมูล ในการเข้าถึงฟังก์ชั่นตัวแก้ไขภายนอกโมดูลต้องส่งออกอ็อบเจ็กต์เคียวรีโดยใช้ module.exports

ขั้นตอนที่ 4 - เรียกใช้แอปพลิเคชัน

สร้างไฟล์ server.js อ้างถึงขั้นตอนที่ 8 ในบทการตั้งค่าสภาพแวดล้อม ดำเนินการคำสั่ง npm start ในเทอร์มินัล เซิร์ฟเวอร์จะทำงานบนพอร์ต 9000 ที่นี่เราใช้ GraphiQL เป็นไคลเอนต์เพื่อทดสอบแอปพลิเคชัน

เปิดเบราว์เซอร์และป้อน url http://localhost:9000/graphiql. พิมพ์คำค้นหาต่อไปนี้ในตัวแก้ไข -

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

ผลลัพธ์สำหรับแบบสอบถามด้านบนมีดังที่แสดงด้านล่าง -

{
   "data": {
      "studentById": {
         "id": "S1001",
         "firstName": "Mohtashim",
         "lastName": "Mohammad"
      }
   }
}