Hoppa till huvudinnehållet
Version: 11.x

Migrera från v10 till v11

Inofficiell Beta-översättning

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

Migrering från v10 till v11​

tips

För de flesta användare bör migreringen vara snabb och okomplicerad.

Om de tre stegen nedan inte räcker, gå igenom dokumentet efter avsnitt märkta "sällan brytande".

1. Installera nya versioner​

npm install @trpc/server@^11 @trpc/client@^11 @trpc/react-query@^11 @trpc/next@^11 @tanstack/react-query@^5 @tanstack/react-query-devtools@^5

2. Om du använder transformers, uppdatera dina länkar​

Se transformers har flyttats till länkar för mer information.

3. Om du använder @trpc/react-query uppdatera din @tanstack/react-query-version​

Se react-query-v5 för mer information.

Fullständig ändringslogg i omvänd kronologisk ordning​

Ny TanStack React Query-integration! (icke-brytande)​

Vi är glada att meddela att den nya TanStack React Query-integrationen för tRPC nu finns tillgänglig i tRPC:s next-release!

Read the blog post for more information.

Stoppa prenumerationer från servern (sällan brytande)​

Vi stöder nu att stoppa prenumerationer från servern, vilket innebär att du kan göra saker som detta:

ts
const myRouter = router({
  sub: publicProcedure.subscription(async function* (opts) {
    for await (const data of on(ee, 'data', {
      signal: opts.signal,
    })) {
      const num = data[0] as number | undefined;
      if (num === undefined) {
        // This will now stop the subscription on the client and trigger the `onComplete` callback
        return;
      }
      yield num;
    }
  }),
});
ts
const myRouter = router({
  sub: publicProcedure.subscription(async function* (opts) {
    for await (const data of on(ee, 'data', {
      signal: opts.signal,
    })) {
      const num = data[0] as number | undefined;
      if (num === undefined) {
        // This will now stop the subscription on the client and trigger the `onComplete` callback
        return;
      }
      yield num;
    }
  }),
});

Se dokumentationen för prenumerationer för mer information.

Stöd för lazy-loading av routers (icke-brytande)​

Se dokumentationen för lazy-loading av routers för mer information.

Som en del av detta har vi ändrat argumentet för den interna metoden callProcedure() till att ta emot en { router: AnyRouter }-parameter istället för en { _def: AnyRouter['_def'] }-parameter.

Anpassad basePath för att hantera förfrågningar under en sökväg i standalone-adaptern (icke-brytande)​

Standalone-adaptern stöder nu ett basePath-alternativ som skär bort basePath från början av förfrågans sökväg.

Se dokumentationen för standalone-adaptern för mer information.

Stöd för HTTP/2-servrar (icke-brytande)​

Vi stöder nu HTTP/2-servrar, vilket innebär att du kan använda funktionerna createHTTP2Handler och createHTTPServer för att skapa HTTP/2-servrar.

Se dokumentationen för standalone-adaptern för mer information.

Flytta TRPCProcedureOptions till @trpc/client (icke-brytande för de flesta)​

Om du tidigare använde ProcedureOptions från @trpc/server måste du nu använda TRPCProcedureOptions från @trpc/client istället.

Tillåt promises i nästlad data (icke-brytande)​

Vi tillåter nu att promises finns inbäddade i nästlad data när du använder httpBatchStreamLink, vilket innebär att du nu kan göra saker som detta:

ts
const router = router({
  embedPromise: publicProcedure.query(() => {
    async function slowThing() {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      return 'slow';
    }
    return {
      instant: 'instant',
      slow: slowThing(),
    };
  }),
});
ts
const router = router({
  embedPromise: publicProcedure.query(() => {
    async function slowThing() {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      return 'slow';
    }
    return {
      instant: 'instant',
      slow: slowThing(),
    };
  }),
});

Flyttat reconnectAfterInactivityMs till sse.client (icke-brytande)​

Uppdaterat avsnittet Förbättringar av HTTP-prenumerationslänkar och relaterad dokumentation.

TypeScript-version >=5.7.2 krävs nu (icke-brytande)​

tRPC kräver nu TypeScript-version 5.7.2 eller senare. Denna ändring gjordes som svar på en felrapport där vi valde att ta ett framåtblickande tillvägagångssätt.

Om du försöker installera tRPC med en icke-stödd TypeScript-version kommer du att få ett peer dependency-fel under installationen.

Om du märker att din editor visar any-typer beror detta sannolikt på att din editor inte använder rätt TypeScript-version. För att åtgärda detta måste du konfigurera din editor att använda den TypeScript-version som är installerad i ditt projekts package.json.

För VSCode-användare: Lägg till dessa inställningar i din .vscode/settings.json:

.vscode/settings.json
json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}
.vscode/settings.json
json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

Flyttar experimental.sseSubscriptions -> sse (icke-brytande)​

Alternativet experimental.sseSubscriptions har flyttats till enbart sse i funktionen initTRPC.create().

Lagt till stöd för att upptäcka och återhämta från inaktiva anslutningar:

På servern kan du konfigurera ett ping-intervall för att hålla anslutningen vid liv:

ts
export const t = initTRPC.create({
  // ...
  sse: {
    ping: {
      enabled: true,
      intervalMs: 15_000,
    },
    client: {
      // Reconnect if no messages or pings are received for 20 seconds
      reconnectAfterInactivityMs: 20_000,
    },
  },
});
ts
export const t = initTRPC.create({
  // ...
  sse: {
    ping: {
      enabled: true,
      intervalMs: 15_000,
    },
    client: {
      // Reconnect if no messages or pings are received for 20 seconds
      reconnectAfterInactivityMs: 20_000,
    },
  },
});

Vi kommer sannolikt att lägga till en standardkonfiguration för ping-intervall och timeout i framtiden, men detta är ännu inte bestämt. Feedback är välkommen i kanalen 🎏-rfc-streaming på Discord.

Se dokumentationen för httpSubscriptionLink för mer detaljer om dessa funktioner.

Se retryLink - låter dig försöka igen vid misslyckade operationer

Förbättringar av useSubscription (icke-brytande)​

  • När du prenumererar på procedurer med hooken useSubscription kommer den nu att returnera information om prenumerationens status och anslutningen.

  • Möjlighet att använda en ponyfill när du använder httpSubscriptionLink

Utdatatyp för prenumerationsprocedur ändrad till AsyncGenerator (icke-brytande)​

Om du har använt prenumerationer med async-generatorer i v11 kan detta bryta mot hur du infererar dina typer.

Details

We changed the inferred output from:

ts
SubscriptionProcedure<{
  input: __INPUT__;
  output: __OUTPUT__;
}>;
ts
SubscriptionProcedure<{
  input: __INPUT__;
  output: __OUTPUT__;
}>;

to

ts
SubscriptionProcedure<{
  input: __INPUT__;
  output: AsyncGenerator<__OUTPUT__, void, unknown>;
}>;
ts
SubscriptionProcedure<{
  input: __INPUT__;
  output: AsyncGenerator<__OUTPUT__, void, unknown>;
}>;

If you need to infer the value you can use a helper like the below:

ts
type inferAsyncIterableYield<TOutput> =
  TOutput extends AsyncGenerator<infer $Yield> ? $Yield : never;
ts
type inferAsyncIterableYield<TOutput> =
  TOutput extends AsyncGenerator<infer $Yield> ? $Yield : never;

Denna ändring har gjorts för att säkerställa att biblioteket förblir kompatibelt med framtida uppdateringar och tillåter användning av return-typen i prenumerationers AsyncGenerator.

Se dokumentationen för prenumerationer för mer information.

Lagt till stöd för utdatavalidering i prenumerationer (icke-brytande)​

Se dokumentationen för prenumerationer för mer information.

Utfasning av prenumerationer som returnerar Observable (icke-brytande)​

Vi stöder nu att returnera async-generatorfunktioner för prenumerationer och vi har tidigare lagt till en httpSubscriptionLink.

För att se hur du använder async-generatorfunktioner för prenumerationer, se dokumentationen för prenumerationer.

Borttagning av AbortControllerEsque-ponyfill (sällan brytande)​

Vi har tagit bort AbortControllerEsque-ponyfillen från tRPC. Om du behöver stödja äldre webbläsare kan du använda en polyfill som abortcontroller-polyfill.

Stöd för Server-Sent Events (SSE) (icke-brytande)​

Vi stöder nu SSE för prenumerationer, vilket innebär att du inte behöver starta en WebSocket-server för att få realtidsuppdateringar i din applikation och att klienten automatiskt kan återansluta och återuppta om anslutningen bryts.

👉 Se mer i dokumentationen för httpSubscriptionLink.

Stöd för strömmande svar över HTTP (icke-brytande)​

Vi stöder nu strömmande mutationer och frågor med hjälp av httpBatchStreamLink.

Det innebär att query- och mutation-resolvers nu kan vara antingen AsyncGenerators med yield eller returnera promises som kan skjutas upp, vilket möjliggör strömmade svar över HTTP utan WebSockets.

Vi vill gärna ha din feedback på denna funktion - testa gärna och berätta vad du tycker i 🎏-rfc-streaming-kanalen på vår Discord!

👉 Läs mer i dokumentationen för httpBatchStreamLink

resolveHTTPRequest har ersatts av resolveRequest som använder Fetch API:er (sällan brytande)​

Funktionen resolveHTTPRequest har ersatts av resolveRequest som använder Fetch API - Request/Response.

Detta är en brytande ändring för HTTP-adaptrar, men påverkar normalt inte dig som användare.

Om du bygger en adapter kan du se hur våra adaptrar fungerar i källkoden - fråga gärna om hjälp i vår Discord.

TRPCRequestInfo har uppdaterats (sällan brytande)​

Input materialiseras nu fördröjt när proceduren kräver det, vilket innebär att input och proceduretyp inte längre är tillgängliga när tRPC anropar createContext.

Du kan fortfarande komma åt input genom att anropa info.calls[index].getRawInput().

Allt experimentellt stöd för form-data har ersatts (sällan brytande)​

Detta påverkar bara dig om du använde de experimentella formdata-funktionerna

  • experimental_formDataLink - använd httpLink

  • experimental_parseMultipartFormData - behövs inte längre

  • experimental_isMultipartFormDataRequest - behövs inte längre

  • experimental_composeUploadHandlers - behövs inte längre

  • experimental_createMemoryUploadHandler - behövs inte längre

  • experimental_NodeOnDiskFile och experimental_createFileUploadHandler - stöds inte i denna första release, öppna ett issue om du behöver lagra data på disk

  • experimental_contentTypeHandlers - behövs inte längre, men kan återinföras om communityt behöver stöd för nya datatyper

Se det nya tillvägagångssättet i examples/next-formdata

Har flyttat Procedure._def._output_in / Procedure._def._input_in till Procedure._def.$types (icke-brytande)​

Detta är en brytande ändring för tRPC:s interna delar, men påverkar normalt inte dig som användare.

Du behöver inte göra något om du inte använder Procedure._def._output_in eller Procedure._def._input_in direkt i din kod.

Explicita Content-Type-kontroller (icke-brytande)​

Vi har nu explicita kontroller för Content-Type-headern vid POST-förfrågningar. Om du skickar en förfrågan med felaktig Content-Type får du nu 415 Unsupported Media Type-fel.

Våra tRPC-klienter skickar redan korrekta content-type-headers, så detta är bara en potentiellt brytande ändring om du anropar tRPC manuellt.

Lagt till stöd för method overriding (sällan brytande)​

Möjliggör att åsidosätta HTTP-metoden för procedurer så de alltid skickas med POST, vilket löser begränsningar som max-URL-längd.

Löser #3910

Lagt till stöd för bi-directional infinite queries (icke-brytande)​

Se useInfiniteQuery()

Tillagd inferProcedureBuilderResolverOptions<T>-hjälpare (icke-brytande)​

Lägger till en hjälpare för att inferera alternativ för en procedure builder-resolver. Användbart om du vill skapa återanvändbara funktioner för olika procedurer.

Se test här som referens för användning

Transformers flyttas till länkar (brytande) -​

TypeScript guidar dig genom denna migration

Gäller endast om du använder datatransformers.

Du konfigurerar nu datatransformers i links-arrayen istället för vid initialisering av tRPC-klienten:

Var du än har en HTTP-länk måste du lägga till transformer: superjson om du använder transformers:

ts
httpBatchLink({
  url: '/api/trpc',
  transformer: superjson, // <-- add this
});
ts
httpBatchLink({
  url: '/api/trpc',
  transformer: superjson, // <-- add this
});
ts
createTRPCNext<AppRouter>({
  // [..]
  transformer: superjson, // <-- add this
});
ts
createTRPCNext<AppRouter>({
  // [..]
  transformer: superjson, // <-- add this
});

@trpc/next SSR-läge kräver nu prepass-helper med ssr: true (sällan brytande)​

För att fixa https://github.com/trpc/trpc/issues/5378 där react-dom importerades oavsett om funktionen användes.

Se SSR-dokumentation

Stöd tillagt för kortformsrouterdefinitioner (icke-brytande)​

Se Sammanslagning av routrar

ts
const appRouter = router({
  // Shorthand plain object for creating a sub-router
  nested1: {
    proc: publicProcedure.query(() => '...'),
  },
  // Equivalent of:
  nested2: router({
    proc: publicProcedure.query(() => '...'),
  }),
});
ts
const appRouter = router({
  // Shorthand plain object for creating a sub-router
  nested1: {
    proc: publicProcedure.query(() => '...'),
  },
  // Equivalent of:
  nested2: router({
    proc: publicProcedure.query(() => '...'),
  }),
});

Borttagna inferHandlerInput<T> och ProcedureArgs<T> (oftast icke-brytande)​

Om dessa typer inte säger dig något, ignorera detta

Använd inferProcedureInput<TProcedure> istället & TRPCProcedureOptions istället

Tillagd useSuspenseQueries()​

Se useSuspenseQueries

https://github.com/trpc/trpc/pull/5226

Interna generics refaktorerade (sällan brytande)​

Vi har refaktorerat våra interna generics för bättre läsbarhet (TODO: länk procedure builder-sås)

React kräver nu >=18.2.0 (sällan brytande)​

Se deras migreringsguide: https://react.dev/blog/2022/03/08/react-18-upgrade-guide

NodeJS 18+ och moderna webbläsare krävs nu (sällan brytande)​

Vi har lagt till användning av FormData, File, Blob och ReadableStream. NodeJS 18 krävs nu, men dessa har funnits i webbläsare i många år.

  • Möjlighet att skicka ett Promise i url-callbacken om servrar byter plats vid deployment

  • Nytt lazy-alternativ som automatiskt kopplar från websocket när inga förfrågningar väntar

rawInput i middleware är nu getRawInput (sällan brytande)​

Internt ändras inget (än), men detta möjliggör ett efterfrågat tRPC-funktion: stöd för andra format än JSON.

Förenklade typer och .d.ts-utskrifter​

Procedurer i din router emitterar nu endast input & output - tidigare inkluderades hela kontextobjektet för varje procedure, vilket skapade onödig komplexitet i t.ex. .d.ts.

React Query peerDep är nu v5 (brytande) -​

Det främsta du behöver göra är att byta ut en massa isLoading till isPending

Läs deras migreringsguide: https://tanstack.com/query/v5/docs/framework/react/guides/migrating-to-v5

Exportnamnen AbcProxyXyz har bytts till AbcXyz (icke-brytande)​

Proxynamnen fanns på grund av att v9 använde AbcXyz-namnen. Dessa har nu tagits bort och proxyversionerna har bytt namn till icke-proxynamnen, t.ex.:

  • createTRPCClient var föråldrad från v9 och har nu helt tagits bort. createTRPCProxyClient har bytt namn till createTRPCClient istället. createTRPCProxyClient är nu markerat som föråldrat.

SSG Helpers (sällan brytande)​

  • createSSGHelpers fanns för v9 och har nu tagits bort. Motsvarigheten i v10, createProxySSGHelpers, har bytt namn till createSSGHelpers istället.

  • createProxySSGHelpers är nu föråldrad men är alias för createSSGHelpers för bakåtkompatibilitet.

  • Borttagen exporttyp CreateSSGHelpersOptions

interop-läget har tagits bort (sällan brytande) -​

Vi har tagit bort interop-läget från tRPC. Detta var ett läge som gjorde det möjligt att ha en enkel övergångsperiod från v9 till v10. Detta läge var aldrig tänkt att stödjas långsiktigt och vi har nu tagit bort det.