GraphQL - แบบสอบถาม

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

ไวยากรณ์ในการกำหนดแบบสอบถามมีดังนี้ -

//syntax 1
query query_name{ someField }

//syntax 2
{ someField }

ต่อไปนี้เป็นตัวอย่างของแบบสอบถาม -

//query with name myQuery
query myQuery{
   greeting
}

// query without any name
{
   greeting
}

จากตัวอย่างข้างต้นเห็นได้ชัดว่าคีย์เวิร์ดเคียวรีเป็นทางเลือก

การสืบค้น GraphQL ช่วยลดการดึงข้อมูลมากเกินไป แตกต่างจาก Restful API GraphQL อนุญาตให้ผู้ใช้ จำกัด ช่องที่ควรดึงมาจากเซิร์ฟเวอร์ ซึ่งหมายถึงข้อความค้นหาขนาดเล็กและปริมาณการใช้งานบนเครือข่ายน้อยลง ซึ่งจะช่วยลดเวลาตอบสนอง

ภาพประกอบ 1 - แบบสอบถามโมเดลนักเรียนด้วยฟิลด์ที่กำหนดเอง

ในตัวอย่างนี้เรามีชุดนักเรียนที่เก็บไว้ในไฟล์ json โมเดลนักเรียนแต่ละคนมีฟิลด์เช่น firstName, lastName และ id แต่ไม่มี fullName ในที่นี้เราจะพูดถึงวิธีการสร้างแบบสอบถามเพื่อดึง fullName ของนักเรียนทุกคน สำหรับสิ่งนี้เราต้องสร้างฟิลด์ fullName ในตัวแก้ไขสคีมาทั้งสองตัว

ให้เราดูวิธีการทำภาพประกอบโดยใช้ขั้นตอนด้านล่าง -

ขั้นตอนที่ 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 start ในเทอร์มินัล เซิร์ฟเวอร์จะทำงานบนพอร์ต 9000 ที่นี่เราใช้ GraphiQL เป็นไคลเอนต์เพื่อทดสอบแอปพลิเคชัน

เปิดเบราว์เซอร์และพิมพ์ 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 start ในเทอร์มินัล เซิร์ฟเวอร์จะทำงานบนพอร์ต 9000 ที่นี่เราใช้ GraphiQL เป็นไคลเอนต์เพื่อทดสอบแอปพลิเคชัน

เปิดเบราว์เซอร์และพิมพ์ 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 เรามีการเชื่อมโยงความสัมพันธ์ระหว่างนักศึกษาและวิทยาลัยผ่านcollegeId

ขั้นตอนที่ 3 - ทดสอบแอปพลิเคชัน

เปิดหน้าต่างเทอร์มินัลและไปที่โฟลเดอร์โครงการ พิมพ์คำสั่ง -npm start เปิดเบราว์เซอร์และป้อน URLhttp://localhost:9000/graphiql.

ป้อนแบบสอบถามต่อไปนี้ในหน้าต่าง 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 - แก้ไขไฟล์ Schema

เพิ่มช่อง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 - ประกาศตัวแปรการค้นหาใน GraphiQL

ตัวแปรถูกประกาศด้วย $ ตามด้วยชื่อของตัวแปร ตัวอย่างเช่น $ myname_Variable

เมื่อมีการประกาศ $ myname_Variable แล้วจะต้องใช้กับไวยากรณ์การสืบค้นที่มีชื่อ แบบสอบถาม myQuery รับค่าสตริงและส่งต่อไปยัง sayHello ดังที่แสดงด้านล่าง -

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

ตั้งค่าสำหรับ $ myname_Variable เป็นออบเจ็กต์ JSON ในส่วนตัวแปรการสืบค้นของไคลเอ็นต์ GraphiQL

{
   "myname_Variable": "Mohtashim"
}

ผลลัพธ์ของรหัสด้านบนมีดังนี้ -

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

วิธีใช้ Query Variable กับ Enum

ให้เราดูวิธีใช้ตัวแปรแบบสอบถามเมื่อพารามิเตอร์ฟิลด์คือ enum type.

ขั้นตอนที่ 1 - แก้ไขไฟล์ schema.graphql

enum ColorType {
   RED
   BLUE
   GREEN
}

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

setFavouriteColorฟังก์ชั่นใช้เวลา enum เป็น input และส่งกลับค่าสตริง

ขั้นตอนที่ 2 - แก้ไขไฟล์ resolvers.js

ฟังก์ชั่นจำแนกsetFavouriteColorใช้เวลารากและargs ค่า enum ที่ส่งผ่านไปยังฟังก์ชันขณะรันไทม์สามารถเข้าถึงได้ผ่านพารามิเตอร์ args

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

ขั้นตอนที่ 3 - ประกาศตัวแปรการค้นหาใน GraphiQL

มีการตั้งชื่อแบบสอบถาม query_to_setColorซึ่งรับตัวแปรของชื่อ color_variable ของ ColorType ตัวแปรนี้ถูกส่งต่อไปยังเมธอด setFavouriteColor

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

ในส่วนตัวแปรการค้นหาของ GraphiQL ให้พิมพ์รหัสต่อไปนี้ -

{
   "color_variable":"RED"
}

คำตอบดังแสดงด้านล่าง -

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