tRPC:n integrointi React Queryn ja Authin kanssa

tRPC-konteksti on olio, jonka createTRPCContext-funktio luo erikseen jokaista pyyntöä varten. Se voi sisältää tietokanta-asiakkaan, todennetun istunnon, pyynnön otsakkeet tai muita pyyntökohtaisia tietoja, joita proseduurit tarvitsevat.

Konteksti luodaan ennen minkään proseduurin suorittamista, joten se on oikea paikka todennuksen ja tietokantayhteyden valmisteluun.

Kutsukaa createTRPCContextissa next-auth/next-kirjaston getServerSession(authOptions)-funktiota. Liittäkää tulos kontekstiobjektiin: return { session: await getServerSession(authOptions), db }. Nyt kaikilla proseduu­reilla on käytettävissään ctx.session.

Jos session on null, käyttäjää ei ole todennettu. Proseduurit voivat tarkistaa tämän ja palauttaa tietoja ehdollisesti tai heittää virheen.

Määritelkää middleware, joka tarkistaa ctx.session-arvon: const isAuthenticated = t.middleware(({ ctx, next }) => { if (!ctx.session) throw new TRPCError({ code: 'UNAUTHORIZED' }); return next({ ctx: { session: ctx.session } }); }).

next()-kutsu välittää rajatun kontekstin (jonka session ei ole null) seuraaville middlewareille ja proseduurikäsittelijälle.

Yhdistäkää middleware publicProcedureen: const protectedProcedure = publicProcedure.use(isAuthenticated). Nyt jokaisella protectedProcedure.query()- tai protectedProcedure.mutation()-kutsulla määritellyllä käsittelijällä on automaattisesti ei-null-arvoinen session ctx-objektissa.

TypeScript päättelee, että ctx.session ei ole null suojatuissa proseduu­reissa, koska middleware olisi heittänyt virheen ennen käsittelijän saavuttamista.

Korvatkaa publicProcedure protectedProcedurella todennusta vaativissa päätepisteissä: protectedProcedure.query(({ ctx }) => getProfileFor(ctx.session.user.id)). TypeScript tietää tässä, että ctx.session ei ole null, joten ctx.session.user.id:n käyttäminen on turvallista ilman null-tarkistusta.

Todentamattomat pyynnöt saavat automaattisesti 401 UNAUTHORIZED -vastauksen ennen käsittelijän suorittamista.

Välittäkää headers-funktio httpBatchLinkille: links: [httpBatchLink({ url: '/api/trpc', headers: async () => { const token = await getToken(); return { Authorization: 'Bearer ' + token }; } })]. Funktio suoritetaan ennen jokaista pyyntöerää.

Tätä käytetään, kun tRPC todennetaan React Native -asiakasohjelmasta tai muusta kuin Next.js-asiakasohjelmasta, joka hallinnoi todennustunnisteitaan itse.

Next.js:n Pages Routerin palvelinpuolen renderöintiä varten luokaa palvelinpuolen apufunktio: createServerSideHelpers({ router: appRouter, ctx: await createContext({ req, res }) }). Käyttäkää getServerSideProps-funktiossa helpers.post.getAll.prefetch()-kutsua.

Muuntaa esiladattu tila muotoon dehydrate(queryClient) ja välittäkää se propseina. Asiakaspuolen QueryClient hydratoituu tästä tilasta, joten ensimmäistä latauksen aikaista hakua ei tarvitse tehdä uudelleen.

Käärikää Next.js:n _app.tsx @tanstack/react-query-kirjaston Hydrate-komponenttiin. Välittäkää pageProps.trpcState state-propille. Tämä palauttaa esiladatun kyselyvälimuistin asiakasohjelmassa sarjallistetusta palvelintilasta.

Tällä asetuksella käyttäjät näkevät sivut heti täysin täytettyinä ilman asiakaspuolen latausilmaisimia ensimmäisen navigoinnin aikana.

Heittäkää TRPCError-virhe sopivalla HTTP-semantiikkaa vastaavalla koodilla: UNAUTHORIZED (401), FORBIDDEN (403), NOT_FOUND (404), BAD_REQUEST (400), INTERNAL_SERVER_ERROR (500). tRPC-asiakasohjelma muuntaa nämä hookin tuloksen asianmukaisiksi virhetiloiksi.

message-kenttä voi sisältää käyttäjälle näytettäviä tietoja, mutta tuotannossa kannattaa välttää arkaluonteisten palvelintietojen paljastamista virheviesteissä.

tRPC toimii React Native -asiakasohjelmien kanssa käyttäen samaa AppRouter-tyyppiä. Korvatkaa httpBatchLink httpLinkillä (RN:n fetch toimii samalla tavalla) ja määrittäkää todennusotsakkeet. @trpc/react-query-sovitin toimii samalla tavalla kuin verkkosovelluksen asetuksissa.

Tämä tarkoittaa, että monorepo voi jakaa yhden tRPC-reitittimen Next.js-verkkosovelluksen ja Expo React Native -sovelluksen välillä siten, että molemmissa on täysi tyyppiturvallisuus.

Laajentakaa middleware-mallia roolipohjaista käyttöoikeuksien hallintaa varten: tarkistakaa ctx.session.user.role ja heittäkää TRPCError({ code: 'FORBIDDEN' }), jos rooli ei riitä. Luokaa adminProcedure = publicProcedure.use(isAdmin) vain ylläpitäjille tarkoitetuille päätepisteille.

Yhdistäkää useita middlewareja monimutkaista valtuutusta varten: publicProcedure.use(isAuthenticated).use(hasFeatureFlag('beta')).query(...).

tRPC-konteksti luodaan jokaista pyyntöä varten, ja se sisältää istunnon, tietokanta-asiakkaan sekä muut pyynnön laajuuteen sidotut tiedot. Suojatut proseduurit luodaan liittämällä istunnon tarkistava middleware publicProcedureen .use()-kutsulla. Palvelinpuolen renderöinnissä käytetään createServerSideHelpers-apufunktiota esilataukseen ja Hydratea välimuistin palauttamiseen asiakasohjelmassa.

Muiden kuin Next.js-asiakasohjelmien todennusotsakkeet välitetään httpBatchLinkin headers-asetuksella.