GraphQL - Đột biến
Trong chương này, chúng ta sẽ tìm hiểu các truy vấn đột biến trong GraphQL.
Truy vấn đột biến sửa đổi dữ liệu trong kho dữ liệu và trả về một giá trị. Nó có thể được sử dụng để chèn, cập nhật hoặc xóa dữ liệu. Các đột biến được xác định là một phần của lược đồ.
Cú pháp của một truy vấn đột biến được đưa ra dưới đây:
mutation{
someEditOperation(dataField:"valueOfField"):returnType
}Hình minh họa
Hãy để chúng tôi hiểu cách thêm bản ghi sinh viên mới vào kho dữ liệu bằng cách sử dụng truy vấn đột biến.
Bước 1 - Tải xuống và cài đặt các phụ thuộc bắt buộc cho dự án
Tạo một thư mục dự án theo tên ứng dụng. Thay đổi thư mục của bạn thành ứng dụng đột biến từ thiết bị đầu cuối. Làm theo các bước từ 3 đến 5 được giải thích trong chương Thiết lập Môi trường.
Bước 2 - Tạo tệp schema.graphql
Thêm vào schema.graphql tệp trong thư mục dự án ứng dụng đột biến và thêm mã sau:
type Query {
greeting:String
}
type Mutation {
createStudent(collegeId:ID,firstName:String,lastName:String):String
}Lưu ý rằng hàm createStudent trả về kiểu Chuỗi. Đây là số nhận dạng (ID) duy nhất được tạo sau khi tạo sinh viên.
Bước 3 - Tạo tệp Resolutionver.js
Tạo một tệp giải quyết tệp tin.js trong thư mục dự án và thêm mã sau:
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}Hàm đột biến trỏ đến tập hợp sinh viên trong kho dữ liệu. Để thêm một học sinh mới , hãy gọi phương thức tạo trong bộ sưu tập học sinh. Các args đối tượng sẽ chứa các thông số được thông qua trong truy vấn. Phương thức tạo tập hợp sinh viên sẽ trả về id của một đối tượng sinh viên mới được tạo.
Bước 4 - Chạy ứng dụng
Tạo một server.jstập tin. Tham khảo bước 8 trong Chương Thiết lập Môi trường. Thực hiện lệnh npm start trong terminal. Máy chủ sẽ hoạt động trên cổng 9000. Ở đây, chúng tôi sử dụng GraphiQL làm máy khách để kiểm tra ứng dụng.
Bước tiếp theo là mở trình duyệt và nhập URL http://localhost:9000/graphiql. Nhập truy vấn sau vào trình soạn thảo -
//college Id should be matched with data from colleges.json for easy retrieval
mutation {
createStudent(collegeId:"col-2",firstName:"Tim",lastName:"George")
}Truy vấn trên sẽ tạo một đối tượng student trong tệp student.json. Truy vấn sẽ trả về một số nhận dạng duy nhất. Phản hồi của truy vấn như được hiển thị bên dưới:
{
"data": {
"createStudent": "SkQtxYBUm"
}
}Để xác minh xem đối tượng student có được tạo hay không, chúng ta có thể sử dụng truy vấn studentById. Bạn cũng có thể mở tệp student.json từ thư mục dữ liệu để xác minh id.
Để sử dụng truy vấn studentById, hãy chỉnh sửa schema.graphql như dưới đây -
type Query {
studentById(id:ID!):Student
}
type Student {
id:ID!
firstName:String
lastName:String
collegeId:String
}Chỉnh sửa resolver.js tệp như được cung cấp bên dưới -
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}Dưới đây là truy vấn để lấy sinh viên theo id duy nhất được trả về từ truy vấn đột biến -
{
studentById(id:"SkQtxYBUm") {
id
firstName
lastName
}
}Phản hồi từ máy chủ như sau:
{
"data": {
"studentById": {
"id": "SkQtxYBUm",
"firstName": "Tim",
"lastName":"George"
}
}
}Trả lại một đối tượng trong đột biến
Cách tốt nhất là trả lại một đối tượng ở dạng đột biến. Ví dụ: ứng dụng khách muốn tìm nạp thông tin chi tiết của sinh viên và trường đại học. Trong trường hợp này, thay vì đưa ra hai yêu cầu khác nhau, chúng ta có thể tạo một truy vấn trả về một đối tượng chứa các sinh viên và thông tin chi tiết về trường đại học của họ.
Bước 1 - Chỉnh sửa tệp lược đồ
Thêm một phương pháp mới có tên addStudent trả về đối tượng trong loại đột biến của schema.graphql.
Hãy để chúng tôi tìm hiểu cách truy cập thông tin chi tiết về trường đại học thông qua chi tiết sinh viên. Thêm loại đại học trong tệp giản đồ.
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
}Bước 2 - Cập nhật tệp Resolutionvers.js
Cập nhật tệp resolvers.js trong thư mục dự án và thêm mã sau:
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}Bước 3 - Khởi động Máy chủ và Nhập Truy vấn Yêu cầu trong GraphiQL
Tiếp theo, chúng tôi sẽ khởi động máy chủ và yêu cầu truy vấn trong GraphiQL với đoạn mã sau:
mutation {
addStudent_returns_object(collegeId:"col-101",firstName:"Susan",lastName:"George") {
id
firstName
college{
id
name
}
}
}Truy vấn trên thêm một sinh viên mới và truy xuất đối tượng student cùng với đối tượng college. Điều này tiết kiệm các chuyến đi vòng đến máy chủ.
Câu trả lời như dưới đây -
{
"data": {
"addStudent_returns_object": {
"id": "rklUl08IX",
"firstName": "Susan",
"college": {
"id": "col-101",
"name": "AMU"
}
}
}
}