[Fullstack] Xây dựng forum bằng GraphQL, React, Apollo và Prisma - Part 3 (Backend - Simple Mutation
https://viblo.asia/p/fullstack-xay-dung-forum-bang-graphql-react-apollo-va-prisma-part-3-backend-simple-mutation-924lJExXZPM
Last updated
https://viblo.asia/p/fullstack-xay-dung-forum-bang-graphql-react-apollo-va-prisma-part-3-backend-simple-mutation-924lJExXZPM
Last updated
Bài đăng này đã không được cập nhật trong 5 năm
Hello mọi người! Tiếp tục với series xây dựng forum bằng GraphQL, React, Apollo và Prisma.
Các bạn có thể xem phần trước ở . Ở phần này, mình sẽ tạo một số Mutation cơ bản như CREATE, UPDATE và DELETE cho GraphQL API.
Cũng giống như Query mình đã nói ở phần trước. Đối với Mutation
chúng ta vẫn cần định nghĩa cho nó trong typeDefs
.
Trong src/index.js
:
Ở đây đơn giản là mình tạo 1 Mutation
là createNewPost
và schema Post
. createNewPost
mutation sẽ nhận 2 params title
và content
(required) và dữ liệu trả về sau khi create Post chính là 1 object có kiểu dữ liệu là Post
.
Sau khi đã định nghĩa Mutation
, chúng ta sẽ khởi tạo resolver
cho Mutation
trên.
Trong src/index.js
postId
: Tạo dynamic post ID dựa vào length của posts
Mutation
: Là một object bao gồm tất cả những thao tác cập nhật hoặc thay đổi dữ liệu (CREATE, UPDATE, DELETE)
createNewPost
: Mutation để tạo mới Post
(lưu ý cách đặt tên: Tên function trong này phải trùng với tên Mutation
trong schema mà chúng ta đã khởi tạo ở trên. Không là khi chạy sẽ báo lỗi.
Function createNewPost
khởi tạo Post
sau đó trả về chính newPost
vừa tạo.
Khởi động lại server, save change sau đó run command bên dưới. Trong root folder:
Truy cập vào http://localhost:4000
, gửi Mutation
bằng Playground.
Server response:
Với mỗi mutation chúng ta gửi, postId
sẽ tự động tăng lên, post2
, post3
, ... Để kiểm tra mutation chúng ta vừa tạo có thực sự hoạt động hay công, chúng ta sẽ gửi query lấy tất cả các posts
Tương tự với Create thì chúng ta cũng có thể Update hoặc Delete với Mutation.
Trước khi khởi tạo Mutation cho Update và Delete thì mình muốn refactor lại một chút. Hiện tại typeDefs
của chúng ta đang phình ra khá to nên mình muốn move object này ra một file riêng có định dạng là schema.graphql
Tại root folder, chạy command:
Copy toàn bộ code trong object typeDefs
vào file schema.graphql
mới vừa tạo và khởi tạo thêm 2 Mutation
mới là updatePost
và deletePost
. Tiếp theo mọi người hãy xoá biến typeDefs
đi.
Khi này file schema.graphql
của chúng ta sẽ như sau:
Quay trởi lại index.js
, chúng ta tham chiếu file schema.graphql
vừa tạo trong object server
:
Chúng ta đã có Update, Delete Mutation definition, tiếp theo là khởi tạo resolver cho nó:
Trong index.js
, add thêm 2 function này vào resolvers
object
Restart lại server sau đó test thử trong Playground
Vậy là ở phần này chúng ta đã cùng nhau tạo một số Mutation cơ bản cho GraphQL API. Ở phần tiếp theo, mình sẽ design, thiết kế DB và liên kết chúng với Prisma server.
Cảm ơn các bạn đã đọc bài !
Happy Coding!!
posts
: Ở đây vì chưa có Database nên mình tạm thời khởi tạo dữ liệu mẫu. Về khởi tạo Database, mình sẽ giới thiệu ở phần sau. Mục tiệu của phần này là hiểu được cách Mutation hoạt động (vậy là đủ rồi ).
Điều tuyệt vời của GraphQLServer
là typeDefs
có thể là string hoặc tham chiếu đến 1 file khác