Skip to main content
Version: 11.x

Migrate from v10 to v11

info

This is a current work in progress representing version 11.

  • The functionality is stable and can be used in production, but we may do small breaking API-changes between patches until we reach 11.0.0
  • The packages are published with the next-tag on npm

Installation / upgrading​

npm install @trpc/server@next @trpc/client@next @trpc/react-query@next @trpc/next@next @tanstack/react-query@latest @tanstack/react-query-devtools@latest

Reverse-chronological changelog​

This is a draft document. It will be updated to a proper guide as we get closer to the v11 release. The only major thing that will incur work for you is that you will need to do is to update TanStack Query to v5.0.0.

Moved Procedure._def._output_in / Procedure._def._input_in to Procedure._def.$types (non-breaking)​

This is a breaking change for tRPC internals, but should not affect you as a user.

You don't have to do anything, unless you're using Procedure._def._output_in or Procedure._def._input_in directly in your code.

Explicit Content-Type checks (non-breaking)​

We now have explicit checks for the Content-Type-header when doing POST-requests. This means that if you send a request with a Content-Type that doesn't match the expected one, you will get a 415 Unsupported Media Type-error.

Our tRPC clients already sends content-type headers, so is only a potential breaking change if you call tRPC manually.

Added support for method overriding​

Allows you to override the HTTP method for procedures to always be sent with POST in order to get around some limitations with e.g. max URL lengths.

Closes #3910

Added support for bi-directional infinite queries​

See useInfiniteQuery()

Added inferProcedureBuilderResolverOptions<T>-helper (non-breaking)​

Adds a helper to infer the options for a procedure builder resolver. This is useful if you want to create reusable functions for different procedures.

See test here for a reference on how to use it

TypeScript will guide you through this migration

Only applies if you use data transformers.

You now setup data transformers in the links-array instead of when you initialize the tRPC-client;

Wherever you have a HTTP Link you have to add transformer: superjson if you use 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 mode now requires a prepass helper with ssr: true​

This is to fix https://github.com/trpc/trpc/issues/5378 where react-dom was imported regardless if you were using this functionality or not.

See SSR docs

Added support for short-hand router definitions (non-breaking)​

See Merging routers

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(() => '...'),
  }),
});

Deleted inferHandlerInput<T> and ProcedureArgs<T> (non-breaking for most)​

If these types mean nothing for you or your codebase, just ignore this

Use inferProcedureInput<TProcedure> instead & TRPCProcedureOptions instead

Added useSuspenseQueries()​

See useSuspenseQueries

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

Refactor internal generics (breaking)​

We have refactored our internal generics and made them more readable (TODO: link procedure builder sauce)

React is now >=18.2.0 (breaking)​

Check their migration guide: https://react.dev/blog/2022/03/08/react-18-upgrade-guide

  • Ability to pass a Promise in the url-callback if servers switch location during deploys
  • Added new lazy option that makes the websocket automatically disconnect when there are no pending requests

rawInput in middleware is now a getRawInput (breaking)​

While we're not doing anything differently internally (just yet) this is help support a much requested feature in tRPC: content types other than JSON.

Simplified types and .d.ts outputs​

Procedures in your router now only emit their input & output - where before they would also contain the full context object for every procedure, leading to unnecessary complexity in e.g. .d.ts.

React Query peerDep is now v5 (breaking)​

Check their migration guide: https://tanstack.com/query/v5/docs/framework/react/guides/migrating-to-v5

Exports names AbcProxyXyz has been renamed to AbcXyz (non-breaking)​

The proxy names were due to v9 using the AbcXyz names, these have been removed and the proxy ones have been renamed to the non-proxy names, e.g:

  • createTRPCClient was deprecated from v9, and is now completely removed. The createTRPCProxyClient has been renamed to createTRPCClient instead. createTRPCProxyClient is now marked as deprecated.

SSG Helpers (non-breaking for most)​

  • createSSGHelpers were for v9 which has now been removed. the v10 equivalent createProxySSGHelpers have been renamed to createSSGHelpers now instead.
  • createProxySSGHelpers is now deprecated but aliased to createSSGHelpers for backwards compatibility.
  • Removed exported type CreateSSGHelpersOptions

interop-mode has been removed​

We have removed the interop-mode from tRPC. This was a mode that allowed you to have an easy transition period from v9 to v10. This mode was never meant to be supported long-term and we have now removed it.