Integrera tRPC med React Query och Auth

tRPC-kontexten är ett objekt som skapas på nytt för varje begäran av funktionen createTRPCContext. Den kan innehålla databasklienten, den autentiserade sessionen, HTTP-huvudena för begäran eller andra data som är specifika för den aktuella begäran och som procedurerna behöver.

Kontexten skapas före alla procedurer, vilket gör den till rätt plats för autentisering och konfiguration av databasanslutningen.

I createTRPCContext anropar du getServerSession(authOptions) från next-auth/next. Lägg resultatet i kontextobjektet: return { session: await getServerSession(authOptions), db }. Alla procedurer har nu tillgång till ctx.session.

Om session är null är användaren inte autentiserad. Procedurer kan kontrollera detta för att villkorligt returnera data eller kasta ett fel.

Definiera en middleware som kontrollerar ctx.session: const isAuthenticated = t.middleware(({ ctx, next }) => { if (!ctx.session) throw new TRPCError({ code: 'UNAUTHORIZED' }); return next({ ctx: { session: ctx.session } }); }).

Anropet till next() skickar den typmässigt avgränsade kontexten (med en icke-null session) vidare till efterföljande middleware och procedurhanteraren.

Komponera middlewaren med publicProcedure: const protectedProcedure = publicProcedure.use(isAuthenticated). Nu har alla hanterare som definieras med protectedProcedure.query() eller protectedProcedure.mutation() automatiskt en icke-null session i ctx.

TypeScript drar slutsatsen att ctx.session inte är null i skyddade procedurer, eftersom middlewaren skulle ha kastat ett fel innan hanteraren nåddes.

Ersätt publicProcedure med protectedProcedure för slutpunkter som kräver autentisering: protectedProcedure.query(({ ctx }) => getProfileFor(ctx.session.user.id)). TypeScript vet att ctx.session inte är null här, så det är säkert att komma åt ctx.session.user.id utan en null-kontroll.

Oautentiserade förfrågningar får automatiskt ett 401 UNAUTHORIZED-svar innan hanteraren körs.

Skicka en headers-funktion till httpBatchLink: links: [httpBatchLink({ url: '/api/trpc', headers: async () => { const token = await getToken(); return { Authorization: 'Bearer ' + token }; } })]. Funktionen körs före varje grupp av förfrågningar.

Detta används när tRPC autentiseras från en React Native-klient eller från en annan klient än Next.js som hanterar sina egna autentiseringstoken.

För SSR i Next.js Pages Router skapar du en hjälpinstans på serversidan: createServerSideHelpers({ router: appRouter, ctx: await createContext({ req, res }) }). Använd helpers.post.getAll.prefetch() i getServerSideProps.

Dehydrera det förhämtade tillståndet med dehydrate(queryClient) och skicka det som props. På klienten hydreras QueryClient från detta tillstånd, vilket gör att den första hämtningen inte behöver göras om.

Omslut din Next.js _app.tsx med Hydrate från @tanstack/react-query. Skicka pageProps.trpcState till egenskapen state. Detta återställer den förhämtade frågecachen på klienten från det serialiserade servertillståndet.

Med denna konfiguration ser användarna fullständigt ifyllda sidor direkt utan laddningsindikatorer på klientsidan vid den första navigeringen.

Kasta TRPCError med lämpliga HTTP-semantiska koder: UNAUTHORIZED (401), FORBIDDEN (403), NOT_FOUND (404), BAD_REQUEST (400), INTERNAL_SERVER_ERROR (500). tRPC-klienten mappar dessa till lämpliga feltillstånd i hook-resultatet.

Fältet message kan innehålla detaljer som visas för användaren, men undvik att läcka känslig serverinformation i produktionsfelmeddelanden.

tRPC fungerar med React Native-klienter som använder samma AppRouter-typ. Ersätt httpBatchLink med ett httpLink (RN fetch fungerar på samma sätt) och konfigurera autentiseringshuvuden. Adaptern @trpc/react-query fungerar på samma sätt som i webbkonfigurationen.

Det innebär att ett monorepo kan dela en tRPC-router mellan en Next.js-webbapp och en Expo React Native-app, med full typsäkerhet i båda.

Utöka middleware-mönstret för rollbaserad åtkomst: kontrollera ctx.session.user.role och kasta TRPCError({ code: 'FORBIDDEN' }) om rollen inte har tillräckliga behörigheter. Skapa adminProcedure = publicProcedure.use(isAdmin) för slutpunkter som endast är avsedda för administratörer.

Kombinera flera middleware för komplex auktorisering: publicProcedure.use(isAuthenticated).use(hasFeatureFlag('beta')).query(...).

tRPC-kontexten skapas för varje begäran och innehåller sessionen, databasklienten och andra data som hör till den aktuella begäran. Skyddade procedurer skapas genom att komponera en middleware som kontrollerar sessionen med publicProcedure via .use(). Serverrendering använder createServerSideHelpers för förhämtning och Hydrate för att återställa cachen på klienten.

Autentiseringshuvuden för andra klienter än Next.js skickas via alternativet headers på httpBatchLink.