คิวรี การกลายข้อมูล และการสมัครรับข้อมูล

ต่อ .input(zodSchema).query(async ({ input, ctx }) => ...) เข้ากับ publicProcedure ตัวจัดการจะได้รับข้อมูลเข้าที่ผ่านการตรวจสอบแล้วและบริบทของคำขอ ให้ส่งคืนค่าใดก็ได้ที่ทำให้เป็นอนุกรมได้ เช่น ออบเจ็กต์ อาร์เรย์ หรือค่าพื้นฐาน

ชนิดข้อมูลผลลัพธ์จะถูกอนุมานโดยอัตโนมัติ และกลายเป็นชนิดข้อมูลของฮุก useQuery ที่สอดคล้องกันบนไคลเอ็นต์

trpc.post.getById.useQuery({ id: '1' }) จะเรียกกระบวนการ getById ในเราเตอร์ post ฮุกจะส่งคืนออบเจ็กต์ผลลัพธ์ของรีแอ็กต์คิวรีที่คุ้นเคย: { data, isLoading, isError, refetch }

ออบเจ็กต์ข้อมูลเข้ามีชนิดข้อมูลแบบคงที่: การส่ง { id: 123 } เมื่อสคีมาคาดหวังสตริงจะทำให้เกิดข้อผิดพลาด TypeScript ซึ่งตรวจพบได้ขณะพัฒนา

ใช้ .input(zodSchema).mutation(async ({ input, ctx }) => ...) สำหรับการดำเนินการเขียนข้อมูลฝั่งเซิร์ฟเวอร์ เช่น การสร้าง การอัปเดต หรือการลบข้อมูล มิวเทชันจะถูกเรียกอย่างชัดเจน แทนที่จะทำงานเมื่อคอมโพเนนต์ถูกเมานต์

ตัวจัดการมิวเทชันเข้าถึงบริบทคำขอทั้งหมดได้ (รวมถึงเซสชันจาก NextAuth) ผ่าน ctx

const { mutate, isLoading, error } = trpc.post.create.useMutation() เรียก mutate({ title: 'New', content: '...' }) เพื่อกระตุ้นมิวเทชัน เช่นเดียวกับ useMutation ของรีแอ็กต์คิวรี มิวเทชันจะไม่ทำงานเมื่อคอมโพเนนต์ถูกเมานต์

ส่งฟังก์ชันเรียกกลับ onSuccess และ onError ไปยังตัวเลือกของ useMutation เพื่อจัดการผลข้างเคียงหลังมิวเทชัน

หากต้องการรีเฟรชข้อมูลคิวรีหลังมิวเทชันสำเร็จ ให้ใช้ฮุกยูทิลิตีของ tRPC: const utils = trpc.useUtils() ใน onSuccess ให้เรียก utils.post.getAll.invalidate() เพื่อกระตุ้นการดึงข้อมูลรายการโพสต์ใหม่

นี่คือสิ่งที่เทียบเท่ากับ queryClient.invalidateQueries() ของรีแอ็กต์คิวรี และใช้รูปแบบทำให้ข้อมูลล้าสมัยแล้วดึงข้อมูลใหม่แบบเดียวกัน

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

บทบาทสองด้านนี้ (การตรวจสอบขณะทำงานและชนิดข้อมูล TypeScript) ช่วยขจัดการทำงานซ้ำซ้อน: คุณกำหนดสัญญาเพียงครั้งเดียวใน Zod แล้วได้รับหลักประกันด้านความปลอดภัยทั้งสองแบบ

โดยค่าเริ่มต้น tRPC ใช้ httpBatchLink เพื่อรวมคำขอ tRPC หลายรายการที่ทำพร้อมกันให้เป็นคำขอ HTTP เดียว การเรียก useQuery หลายครั้งในรอบการเรนเดอร์เดียวกันของคอมโพเนนต์จะถูกส่งและจัดการผลลัพธ์พร้อมกัน

วิธีนี้ลดค่าใช้จ่ายของเครือข่ายได้อย่างมาก เมื่อเทียบกับการส่งคำขอ HTTP แยกกันสำหรับแต่ละคิวรีในหน้าที่ต้องใช้ข้อมูลหลายรายการ

กำหนดกระบวนการสมัครรับข้อมูล: publicProcedure.subscription(async function*() { while (true) { yield await nextEvent(); } }) การสมัครรับข้อมูลใช้ตัวสร้างแบบอะซิงโครนัสและต้องใช้การส่งข้อมูลผ่าน WebSocket

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

แทนที่ httpBatchLink ด้วยการใช้ httpBatchLink ร่วมกับ wsLink ผ่าน splitLink โดยส่งการสมัครรับข้อมูลไปยัง wsLink และส่งคิวรี/มิวเทชันไปยัง httpBatchLink สร้างไคลเอ็นต์ WebSocket ด้วย createWSClient({ url: 'ws://localhost:3000' })

การส่งข้อมูลแบบผสมนี้หมายความว่าคำขอส่วนใหญ่จะใช้การรวมคำขอ HTTP ที่มีประสิทธิภาพ ขณะที่การสมัครรับข้อมูลจะใช้การเชื่อมต่อ WebSocket แบบคงอยู่

trpc.notifications.onNew.useSubscription(undefined, { onData: (notification) => addToList(notification), onError: console.error }) จะสมัครรับข้อมูลจากกระบวนการ ฟังก์ชันเรียกกลับ onData จะถูกเรียกสำหรับค่าแต่ละค่าที่ส่งออกมา

การสมัครรับข้อมูลจะถูกสร้างขึ้นใหม่โดยอัตโนมัติหาก WebSocket ถูกตัดการเชื่อมต่อแล้วเชื่อมต่ออีกครั้ง

หน้ารายการแบบเรียลไทม์อาจใช้คิวรีเพื่อโหลดรายการเริ่มต้น ใช้มิวเทชันเพื่อเพิ่มรายการ และใช้การสมัครรับข้อมูลเพื่อรับรายการใหม่แบบสดจากผู้ใช้อื่น ทั้งสามรายการใช้ชนิดข้อมูลตาม AppRouter เดียวกันและประกอบเข้าด้วยกันได้อย่างเป็นธรรมชาติ

กลยุทธ์การทำให้แคชใช้ไม่ได้ขึ้นอยู่กับว่าคุณต้องการดึงข้อมูลทั้งหมดใหม่ (ทำให้ใช้ไม่ได้หลังมิวเทชัน) หรืออัปเดตแคช (utils.post.getAll.setData)

เมธอดยูทิลิตีใดของ tRPC ที่กระตุ้นการดึงข้อมูลคิวรีใหม่หลังมิวเทชันทำงานสำเร็จ

กำหนดคิวรีด้วย .query() และมิวเทชันด้วย .mutation() โดยทั้งสองอย่างผ่านการตรวจสอบด้วยสคีมา Zod บนไคลเอ็นต์ ให้ใช้ trpc.router.procedure.useQuery() และ useMutation() ทำให้คิวรีใช้ไม่ได้หลังมิวเทชันด้วย utils.procedure.invalidate() การสมัครรับข้อมูลใช้ตัวสร้างแบบอะซิงโครนัสและต้องใช้ wsLink สำหรับการส่งข้อมูลผ่าน WebSocket

โดยค่าเริ่มต้น httpBatchLink จะรวมคิวรีที่ทำพร้อมกันให้เป็นคำขอ HTTP เดียว