Integrere tRPC med React Query og autentisering

tRPC-konteksten er et objekt som opprettes på nytt for hver forespørsel av funksjonen createTRPCContext. Den kan inneholde databaseklienten, den autentiserte økten, forespørselshodene eller andre data per forespørsel som prosedyrene trenger.

Opprettingen av konteksten skjer før enhver prosedyre, noe som gjør dette til riktig sted for oppsett av autentisering og databaseforbindelse.

I createTRPCContext kalles getServerSession(authOptions) fra next-auth/next. Legg resultatet til i kontekstobjektet: return { session: await getServerSession(authOptions), db }. Alle prosedyrer har nå tilgang til ctx.session.

Hvis session er null, er brukeren ikke autentisert. Prosedyrene kan kontrollere dette for å returnere data betinget eller kaste en feil.

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

next()-kallet sender den innsnevrede konteksten, med en session som ikke er null, videre til påfølgende mellomvarer og prosedyrebehandleren.

Kombiner mellomvaren med publicProcedure: const protectedProcedure = publicProcedure.use(isAuthenticated). Nå har enhver behandler som er definert med protectedProcedure.query() eller protectedProcedure.mutation() automatisk en session som ikke er null i ctx.

TypeScript utleder at ctx.session ikke er null i beskyttede prosedyrer fordi mellomvaren ville ha kastet en feil før behandleren ble nådd.

Bytt ut publicProcedure med protectedProcedure for endepunkter som krever autentisering: protectedProcedure.query(({ ctx }) => getProfileFor(ctx.session.user.id)). TypeScript vet at ctx.session ikke er null her, så det er trygt å få tilgang til ctx.session.user.id uten en null-sjekk.

Uautentiserte forespørsler får automatisk et 401 UNAUTHORIZED-svar før behandleren kjøres.

Send en headers-funksjon til httpBatchLink: links: [httpBatchLink({ url: '/api/trpc', headers: async () => { const token = await getToken(); return { Authorization: 'Bearer ' + token }; } })]. Funksjonen kjøres før hver gruppe av forespørsler.

Dette brukes når tRPC autentiseres fra en React Native-klient eller en annen klient enn Next.js som håndterer sine egne autentiseringstokener.

For SSR i Next.js Pages Router oppretter du en hjelper på serversiden: createServerSideHelpers({ router: appRouter, ctx: await createContext({ req, res }) }). Bruk helpers.post.getAll.prefetch() i getServerSideProps.

Serialiser den forhåndshentede tilstanden med dehydrate(queryClient) og send den som props. På klienten hydrerer QueryClient fra denne tilstanden, slik at den første hentingen på nytt unngås.

Pakk inn Next.js _app.tsx med Hydrate fra @tanstack/react-query. Send pageProps.trpcState til state-prop-en. Dette gjenoppretter den forhåndshentede spørringsbufferet på klienten fra den serialiserte tilstanden fra serveren.

Med dette oppsettet ser brukerne fullstendig utfylte sider umiddelbart, uten lastespinnere på klienten ved første navigering.

Kast TRPCError med passende HTTP-semantiske koder: UNAUTHORIZED (401), FORBIDDEN (403), NOT_FOUND (404), BAD_REQUEST (400), INTERNAL_SERVER_ERROR (500). tRPC-klienten mapper disse til passende feiltilstander i resultatet fra hooken.

message-feltet kan inneholde detaljer som vises til brukeren, men unngå å lekke sensitiv serverinformasjon i feilmeldinger i produksjon.

tRPC fungerer med React Native-klienter ved hjelp av den samme AppRouter-typen. Bytt ut httpBatchLink med httpLink (RN fetch fungerer på samme måte) og konfigurer autentiseringshoder. @trpc/react-query-adapteren fungerer på samme måte som i nettoppsettet.

Dette betyr at et monorepo kan dele én tRPC-ruter mellom en Next.js-nettapp og en Expo React Native-app, med full typesikkerhet i begge.

Utvid mellomvaremønsteret for rollebasert tilgang: kontroller ctx.session.user.role og kast TRPCError({ code: 'FORBIDDEN' }) hvis rollen ikke har tilstrekkelige rettigheter. Opprett adminProcedure = publicProcedure.use(isAdmin) for endepunkter som bare administratorer har tilgang til.

Kombiner flere mellomvarer for kompleks autorisasjon: publicProcedure.use(isAuthenticated).use(hasFeatureFlag('beta')).query(...).

tRPC-konteksten opprettes for hver forespørsel og inneholder økten, databaseklienten og andre data knyttet til forespørselen. Beskyttede prosedyrer opprettes ved å kombinere en mellomvare som kontrollerer økten med publicProcedure ved hjelp av .use(). Gjengivelse på serversiden bruker createServerSideHelpers til forhåndshenting og Hydrate til å gjenopprette hurtigbufferet på klienten.

Autentiseringshoder for klienter som ikke bruker Next.js, sendes via headers-alternativet i httpBatchLink.