Översikt över länkar

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Länkar låter dig anpassa dataflödet mellan tRPC-klienten och servern. En länk ska bara göra en sak, antingen en självständig modifiering av en tRPC-operation (query, mutation eller subscription) eller en bieffekt baserad på operationen (som loggning).

Du kan sammansätta länkar till en array som du anger i tRPC-klientkonfigurationen via egenskapen links. Denna array representerar en länkkedja. Det innebär att tRPC-klienten kommer att köra länkarna i den ordning de läggs till i links-arrayen när en begäran görs, och köra dem i omvänd ordning när den hanterar ett svar. Här är en visuell representation av länkkedjan:

tRPC Link Diagram. Based on Apollo's.

notering

Exemplen nedan förutsätter att du använder Next.js, men samma sak kan läggas till om du använder den vanliga tRPC-klienten

utils/trpc.ts
tsx
import { httpBatchLink, loggerLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
export default createTRPCNext<AppRouter>({
  config() {
    const url = `http://localhost:3000`;
    return {
      links: [
        loggerLink(),
        httpBatchLink({
          url,
        }),
      ],
    };
  },
});

utils/trpc.ts
tsx
import { httpBatchLink, loggerLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
export default createTRPCNext<AppRouter>({
  config() {
    const url = `http://localhost:3000`;
    return {
      links: [
        loggerLink(),
        httpBatchLink({
          url,
        }),
      ],
    };
  },
});

Skapa en anpassad länk

En länk är en funktion som följer typen TRPCLink. Varje länk består av tre delar:

1. Länken returnerar en funktion som har en parameter av typen TRPCClientRuntime. Detta argument skickas av tRPC och används när man skapar en terminerande länk. Om du inte skapar en terminerande länk kan du skapa en funktion utan parametrar. I så fall ska länken läggas till i links-arrayen utan anrop (links: [..., myLink, httpBatchLink(...)]).

2. Funktionen i steg 1 returnerar en annan funktion som tar emot ett objekt med två egenskaper: op som är Operation som körs av klienten, och next som är funktionen vi använder för att anropa nästa länk i kedjan.

3. Funktionen i steg 2 returnerar en slutlig funktion som returnerar observable-funktionen från @trpc/server. observable tar emot en funktion som får en observer som hjälper vår länk att meddela nästa länk uppåt i kedjan hur de ska hantera operationsresultatet. I denna funktion kan vi returnera next(op) och lämna det som det är, eller så kan vi prenumerera på next, vilket gör att vår länk kan hantera operationsresultatet.

Exempel

utils/customLink.ts
tsx
import { TRPCLink } from '@trpc/client';
import { observable } from '@trpc/server/observable';
import type { AppRouter } from '~/server/routers/_app';
export const customLink: TRPCLink<AppRouter> = () => {
  // here we just got initialized in the app - this happens once per app
  // useful for storing cache for instance
  return ({ next, op }) => {
    // this is when passing the result to the next link
    // each link needs to return an observable which propagates results
    return observable((observer) => {
      console.log('performing operation:', op);
      const unsubscribe = next(op).subscribe({
        next(value) {
          console.log('we received value', value);
          observer.next(value);
        },
        error(err) {
          console.log('we received error', err);
          observer.error(err);
        },
        complete() {
          observer.complete();
        },
      });
      return unsubscribe;
    });
  };
};

utils/customLink.ts
tsx
import { TRPCLink } from '@trpc/client';
import { observable } from '@trpc/server/observable';
import type { AppRouter } from '~/server/routers/_app';
export const customLink: TRPCLink<AppRouter> = () => {
  // here we just got initialized in the app - this happens once per app
  // useful for storing cache for instance
  return ({ next, op }) => {
    // this is when passing the result to the next link
    // each link needs to return an observable which propagates results
    return observable((observer) => {
      console.log('performing operation:', op);
      const unsubscribe = next(op).subscribe({
        next(value) {
          console.log('we received value', value);
          observer.next(value);
        },
        error(err) {
          console.log('we received error', err);
          observer.error(err);
        },
        complete() {
          observer.complete();
        },
      });
      return unsubscribe;
    });
  };
};

Referenser

Om du behöver ett mer verkligt exempel för att skapa din anpassade länk kan du titta på några av tRPC:s inbyggda länkar på GitHub.

Den terminerande länken

Den terminerande länken är den sista länken i en länkkedja. Istället för att anropa next-funktionen är den terminerande länken ansvarig för att skicka din sammansatta tRPC-operation till tRPC-servern och returnera ett OperationResultEnvelope.

links-arrayen som du lägger till i tRPC-klientkonfigurationen måste innehålla minst en länk, och den länken ska vara en terminerande länk. Om links inte har en terminerande länk i slutet kommer tRPC-operationen inte att skickas till tRPC-servern.

httpBatchLink är den rekommenderade terminerande länken i tRPC.

httpLink, wsLink och localLink är andra exempel på terminerande länkar.

Hantera kontext

När en operation rör sig längs din länkkedja behåller den en kontext som varje länk kan läsa och modifiera. Detta låter länkar skicka metadata längs kedjan som andra länkar använder i sin exekveringslogik.

Få det aktuella kontextobjektet och modifiera det genom att komma åt op.context.

Du kan ange kontextobjektets initialvärde för en specifik operation genom att ange kontextparametern till query eller useQuery-hooken (eller mutation, subscription, etc.).

För ett exempel på användning, se Inaktivera batchhantering för specifika förfrågningar.