การผสาน tRPC กับ React Query และการยืนยันตัวตน

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

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

ใน createTRPCContext ให้เรียก getServerSession(authOptions) จาก next-auth/next แล้วแนบผลลัพธ์ลงในออบเจ็กต์บริบท: return { session: await getServerSession(authOptions), db } กระบวนงานทั้งหมดจึงเข้าถึง ctx.session ได้

หากไม่มีเซสชัน ผู้ใช้จะยังไม่ได้ยืนยันตัวตน กระบวนงานสามารถตรวจสอบเงื่อนไขนี้เพื่อเลือกว่าจะส่งข้อมูลกลับหรือส่งข้อผิดพลาด

ให้กำหนดมิดเดิลแวร์ที่ตรวจสอบ ctx.session: const isAuthenticated = t.middleware(({ ctx, next }) => { if (!ctx.session) throw new TRPCError({ code: 'UNAUTHORIZED' }); return next({ ctx: { session: ctx.session } }); })

การเรียก next() จะส่งต่อบริบทที่จำกัดชนิดให้แคบลงแล้ว (เซสชันไม่เป็นค่าว่าง) ไปยังมิดเดิลแวร์ถัดไปและตัวจัดการกระบวนงาน

นำมิดเดิลแวร์มาประกอบกับ publicProcedure: const protectedProcedure = publicProcedure.use(isAuthenticated) จากนั้นตัวจัดการใด ๆ ที่กำหนดด้วย protectedProcedure.query() หรือ protectedProcedure.mutation() จะมีเซสชันที่ไม่เป็นค่าว่างใน ctx โดยอัตโนมัติ

TypeScript อนุมานได้ว่า ctx.session ไม่เป็นค่าว่างภายในกระบวนงานที่มีการป้องกัน เพราะมิดเดิลแวร์จะส่งข้อผิดพลาดก่อนถึงตัวจัดการ

ให้แทนที่ publicProcedure ด้วย protectedProcedure สำหรับจุดปลายทางที่ต้องมีการยืนยันตัวตน: protectedProcedure.query(({ ctx }) => getProfileFor(ctx.session.user.id)) TypeScript ทราบว่า ctx.session ไม่เป็นค่าว่างในจุดนี้ จึงเข้าถึง ctx.session.user.id ได้อย่างปลอดภัยโดยไม่ต้องตรวจสอบค่าว่าง

คำขอที่ยังไม่ได้ยืนยันตัวตนจะได้รับการตอบกลับ 401 UNAUTHORIZED โดยอัตโนมัติก่อนที่ตัวจัดการจะทำงาน

ส่งฟังก์ชันส่วนหัวไปยัง httpBatchLink: links: [httpBatchLink({ url: '/api/trpc', headers: async () => { const token = await getToken(); return { Authorization: 'Bearer ' + token }; } })] ฟังก์ชันนี้จะทำงานก่อนทุกชุดคำขอ

วิธีนี้ใช้เมื่อยืนยันตัวตน tRPC จากไคลเอนต์ RN หรือไคลเอนต์ที่ไม่ใช่ Next.js ซึ่งจัดการโทเค็นการยืนยันตัวตนด้วยตนเอง

สำหรับ SSR ในตัวจัดเส้นทางหน้าเว็บของ Next.js ให้สร้างตัวช่วยฝั่งเซิร์ฟเวอร์: createServerSideHelpers({ router: appRouter, ctx: await createContext({ req, res }) }) ให้ใช้ helpers.post.getAll.prefetch() ใน getServerSideProps

ให้แยกสถานะที่ดึงข้อมูลล่วงหน้าไว้ด้วย dehydrate(queryClient) แล้วส่งต่อเป็น props ฝั่งไคลเอนต์ QueryClient จะเติมข้อมูลจากสถานะนี้ จึงไม่ต้องดึงข้อมูลซ้ำในครั้งแรกที่โหลด

ให้ห่อ _app.tsx ของ Next.js ด้วย Hydrate จาก @tanstack/react-query แล้วส่ง pageProps.trpcState ไปยังพร็อพส์ state การทำเช่นนี้จะกู้คืนแคชคำค้นที่ดึงข้อมูลล่วงหน้าบนไคลเอนต์จากสถานะเซิร์ฟเวอร์ที่ทำให้เป็นอนุกรมแล้ว

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

ให้ส่ง TRPCError พร้อมรหัสที่สอดคล้องกับความหมายของ HTTP: UNAUTHORIZED (401), FORBIDDEN (403), NOT_FOUND (404), BAD_REQUEST (400), INTERNAL_SERVER_ERROR (500) ไคลเอนต์ tRPC จะจับคู่รหัสเหล่านี้กับสถานะข้อผิดพลาดที่เหมาะสมในผลลัพธ์ของฮุก

ฟิลด์ message อาจมีรายละเอียดที่แสดงแก่ผู้ใช้ได้ แต่ควรหลีกเลี่ยงการเปิดเผยข้อมูลที่ละเอียดอ่อนของเซิร์ฟเวอร์ในข้อความข้อผิดพลาดของระบบที่ใช้งานจริง

tRPC ทำงานร่วมกับไคลเอนต์ RN โดยใช้ชนิด AppRouter เดียวกัน ให้แทนที่ httpBatchLink ด้วย httpLink (การดึงข้อมูลของ RN ทำงานในลักษณะเดียวกัน) และกำหนดค่าส่วนหัวยืนยันตัวตน อะแดปเตอร์ @trpc/react-query ทำงานเหมือนกับการตั้งค่าบนเว็บทุกประการ

นั่นหมายความว่าโมโนรีโพสามารถใช้เราเตอร์ tRPC เดียวร่วมกันระหว่างแอปเว็บ Next.js และแอป Expo RN โดยมีความปลอดภัยด้านชนิดข้อมูลอย่างครบถ้วนทั้งสองฝั่ง

ขยายรูปแบบมิดเดิลแวร์เพื่อรองรับการเข้าถึงตามบทบาท โดยตรวจสอบ ctx.session.user.role และส่ง TRPCError({ code: 'FORBIDDEN' }) หากบทบาทมีสิทธิ์ไม่เพียงพอ ให้สร้าง adminProcedure = publicProcedure.use(isAdmin) สำหรับจุดปลายทางที่ใช้ได้เฉพาะผู้ดูแลระบบ

ซ้อนมิดเดิลแวร์หลายตัวสำหรับการอนุญาตที่ซับซ้อน: publicProcedure.use(isAuthenticated).use(hasFeatureFlag('beta')).query(...)

บริบท tRPC สร้างขึ้นสำหรับแต่ละคำขอ และเก็บเซสชัน ไคลเอนต์ฐานข้อมูล และข้อมูลอื่น ๆ ที่มีขอบเขตตามคำขอ กระบวนงานที่มีการป้องกันสร้างขึ้นโดยนำมิดเดิลแวร์ตรวจสอบเซสชันมาประกอบกับ publicProcedure ด้วย .use() การเรนเดอร์ฝั่งเซิร์ฟเวอร์ใช้ createServerSideHelpers สำหรับการดึงข้อมูลล่วงหน้า และใช้ Hydrate เพื่อกู้คืนแคชบนไคลเอนต์

ส่วนหัวยืนยันตัวตนสำหรับไคลเอนต์ที่ไม่ใช่ Next.js จะส่งผ่านตัวเลือก headers ของ httpBatchLink