แนะนำการใช้งาน tRPC

จากการแบ่งปันเรื่องการพัฒนาระบบงานด้วย TypeScript
ทั้งส่วนของ frontend และ backend นั้น
โดยปกติจะติดต่อสื่อสารผ่าน HTTP
ซึ่งมักจะเป็น RESTful APIs นั่นเอง
แต่มักจะมีปัญหาเรื่องของการเปลี่ยนแปลง
นั่นคือเมื่อฝั่งของ backend ทำการเปลี่ยนแปลงรูปแบบของ request หรือ response แล้ว
มักจะส่งผลกระทบต่อฝั่ง frontend เสมอ ถ้าไม่ทำการแจ้งการเปลี่ยนแปลง
จึงแนะนำอีกรูปแบบคือ tRPC (TypeScript Remote Procedure Call)

โดยที่ tRPC นั้นเป็นหนึ่งใน implmentation ของ RPC
ซึ่งถูกออกแบบมาสำหรับ TypeScript โดยเฉพาะเท่านั้น
และทั้ง frontend และ backend ต้อง share code ร่วมกัน หรืออยู่ใน Monorepo

ขั้นตอนการใช้งาน tRPC ในการพัฒนาระบบเป็นดังนี้

ขั้นตอนที่ 1 ทำการสร้าง tRPC server ขึ้นมา

เพื่อสร้าง procudure สำหรับการใช้งานจากฝั่งของ client ขึ้นมา
โดยปกติจะกำหนดเป็น HTTP request/response ของ RESTful API
แต่ใน tRPC นั้นจะกำหนดเป็นชื่อ procedure แบบ public
จากนั้นกำหนด data type ของ procedure ต่าง ๆ
ซึ่งจะใช้ package zod สำหรับตรวจสอบโครงสร้างของข้อมูล

ตัวอย่างของ code

[gist id="c670cb4478219698ce305e15a55c00b4" file="app-router.ts"]

คำอธิบาย

• ในแต่ละ procedure นั้น ถ้าต้องการดึงข้อมูลจะใช้ query ส่วนการ update ข้อมูลใช้ mutation
• ทำการจัดกลุ่มของ procedure ต่าง ๆ ด้วย AppRouter
• การตรวขสอบข้อมูลหรือ validation จะทำในการเรียกใช้งานจากฝั่งของ client ดังนั้นถ้ามีการเปลี่ยนแปลงฝั่ง server แล้ว ทาง client จะรู้ผลกระทบทันที

ขั้นตอนที่ 2 ทำการพัฒนาส่วนของ Server ด้วย package express เพื่อให้ client ใช้งาน

ทำการ expose AppRouter ที่สร้างไว้ให้สามารถเข้าถึงผ่าน HTTP protocol

[gist id="c670cb4478219698ce305e15a55c00b4" file="server.ts"]

ขั้นตอนที่ 3 สร้างส่วนของ Client เพื่อเรียกใช้งาน

[gist id="c670cb4478219698ce305e15a55c00b4" file="client.ts"]

เพียงเท่านี้ก็สามารถใช้งาน tRPC แบบง่าย ๆ ได้แล้ว
หรือสามารถเรียกผ่าน curl ได้ดังนี้

[gist id="c670cb4478219698ce305e15a55c00b4" file="1.txt"]

ขอให้สนุกกับการ coding ครับ