feat: require transformers on frontend & backend when present (#3289)

packages/client/src/createTRPCClient.ts

@@ -18,7 +18,7 @@ export function createTRPCClient<TRouter extends AnyRouter>(
     return [httpBatchLink(opts)];
   };
   const client = new Client<TRouter>({
-    transformer: opts.transformer,
+    ...opts,
     links: getLinks(),
   });
   return client;

packages/client/src/internals/TRPCClient.ts

@@ -1,7 +1,10 @@
 import {
   AnyRouter,
   ClientDataTransformerOptions,
+  CombinedDataTransformer,
   DataTransformer,
+  DataTransformerOptions,
+  DefaultDataTransformer,
   inferProcedureInput,
   inferProcedureOutput,
   inferSubscriptionOutput,
@@ -22,13 +25,38 @@ import {
   TRPCLink,
 } from '../links/types';
 
-interface CreateTRPCClientBaseOptions {
-  /**
-   * Data transformer
-   * @link https://trpc.io/docs/data-transformers
-   **/
-  transformer?: ClientDataTransformerOptions;
-}
+type CreateTRPCClientBaseOptions<TRouter extends AnyRouter> =
+  TRouter['_def']['_config']['transformer'] extends DefaultDataTransformer
+    ? {
+        /**
+         * Data transformer
+         *
+         * You must use the same transformer on the backend and frontend
+         * @link https://trpc.io/docs/data-transformers
+         **/
+        transformer?: 'You must set a transformer on the backend router';
+      }
+    : TRouter['_def']['_config']['transformer'] extends DataTransformerOptions
+    ? {
+        /**
+         * Data transformer
+         *
+         * You must use the same transformer on the backend and frontend
+         * @link https://trpc.io/docs/data-transformers
+         **/
+        transformer: TRouter['_def']['_config']['transformer'] extends CombinedDataTransformer
+          ? DataTransformerOptions
+          : TRouter['_def']['_config']['transformer'];
+      }
+    : {
+        /**
+         * Data transformer
+         *
+         * You must use the same transformer on the backend and frontend
+         * @link https://trpc.io/docs/data-transformers
+         **/
+        transformer?: ClientDataTransformerOptions;
+      };
 
 type TRPCType = 'subscription' | 'query' | 'mutation';
 export interface TRPCRequestOptions {
@@ -49,7 +77,7 @@ export interface TRPCSubscriptionObserver<TValue, TError> {
 
 /** @internal */
 export type CreateTRPCClientOptions<TRouter extends AnyRouter> =
-  | CreateTRPCClientBaseOptions & {
+  | CreateTRPCClientBaseOptions<TRouter> & {
       links: TRPCLink<TRouter>[];
     };
 
@@ -62,16 +90,22 @@ export class TRPCClient<TRouter extends AnyRouter> {
     this.requestId = 0;
 
     function getTransformer(): DataTransformer {
-      if (!opts.transformer)
+      if (!opts.transformer || typeof opts.transformer === 'string')
         return {
           serialize: (data) => data,
           deserialize: (data) => data,
         };
-      if ('input' in opts.transformer)
-        return {
-          serialize: opts.transformer.input.serialize,
-          deserialize: opts.transformer.output.deserialize,
-        };
+      // Type guard for `opts.transformer` because it can be `any`
+      function isTransformer(obj: any): obj is ClientDataTransformerOptions {
+        return true;
+      }
+      if (isTransformer(opts.transformer)) {
+        if ('input' in opts.transformer)
+          return {
+            serialize: opts.transformer.input.serialize,
+            deserialize: opts.transformer.output.deserialize,
+          };
+      }
       return opts.transformer;
     }
 

packages/server/src/core/initTRPC.ts

@@ -7,7 +7,6 @@ import {
 } from '../error/formatter';
 import { createFlatProxy } from '../shared';
 import {
-  CombinedDataTransformer,
   DataTransformerOptions,
   DefaultDataTransformer,
   defaultTransformer,
@@ -86,9 +85,7 @@ function createTRPCInner<TParams extends PartialRootConfigTypes>() {
       ErrorFormatter<$Context, DefaultErrorShape>
     >;
     type $Transformer = TOptions['transformer'] extends DataTransformerOptions
-      ? TOptions['transformer'] extends DataTransformerOptions
-        ? CombinedDataTransformer
-        : DefaultDataTransformer
+      ? TOptions['transformer']
       : DefaultDataTransformer;
     type $ErrorShape = ErrorFormatterShape<$Formatter>;
 

packages/tests/server/___testHelpers.ts

@@ -70,14 +70,14 @@ export function routerToServerAndClientNew<TRouter extends AnyNewRouter>(
     url: wssUrl,
     ...opts?.wsClient,
   });
-  const trpcClientOptions: WithTRPCConfig<typeof router> = {
+  const trpcClientOptions = {
     links: [httpBatchLink({ url: httpUrl })],
     ...(opts?.client
       ? typeof opts.client === 'function'
         ? opts.client({ httpUrl, wssUrl, wsClient })
         : opts.client
       : {}),
-  };
+  } as WithTRPCConfig<typeof router>;
 
   const client = createTRPCClient<typeof router>(trpcClientOptions);
   const proxy = createTRPCClientProxy<typeof router>(client);

packages/tests/server/initTRPC.test.ts

@@ -1,5 +1,4 @@
 import {
-  CombinedDataTransformer,
   DataTransformerOptions,
   DefaultDataTransformer,
   initTRPC,
@@ -34,7 +33,7 @@ test('custom transformer', () => {
   const router = t.router({});
   expectTypeOf(
     router._def._config.transformer,
-  ).toMatchTypeOf<CombinedDataTransformer>();
+  ).toMatchTypeOf<DataTransformerOptions>();
   expectTypeOf(
     router._def._config.transformer,
   ).not.toMatchTypeOf<DefaultDataTransformer>();

packages/tests/server/interop/__legacyRouterToServerAndClient.ts

@@ -1,9 +1,6 @@
 import { routerToServerAndClientNew } from '../___testHelpers';
-import {
-  CreateTRPCClientOptions,
-  TRPCWebSocketClient,
-  WebSocketClientOptions,
-} from '@trpc/client/src';
+import { TRPCWebSocketClient, WebSocketClientOptions } from '@trpc/client/src';
+import { WithTRPCConfig } from '@trpc/next';
 import { CreateHTTPHandlerOptions } from '@trpc/server/src/adapters/standalone';
 import { WSSHandlerOptions } from '@trpc/server/src/adapters/ws';
 import { MigrateOldRouter } from '@trpc/server/src/deprecated/interop';
@@ -20,12 +17,12 @@ export function legacyRouterToServerAndClient<TOldRouter extends OldRouter>(
     wssServer?: Partial<WSSHandlerOptions<MigrateOldRouter<TOldRouter>>>;
     wsClient?: Partial<WebSocketClientOptions>;
     client?:
-      | Partial<CreateTRPCClientOptions<MigrateOldRouter<TOldRouter>>>
+      | Partial<WithTRPCConfig<MigrateOldRouter<TOldRouter>>>
       | ((opts: {
           httpUrl: string;
           wssUrl: string;
           wsClient: TRPCWebSocketClient;
-        }) => Partial<CreateTRPCClientOptions<MigrateOldRouter<TOldRouter>>>);
+        }) => Partial<WithTRPCConfig<MigrateOldRouter<TOldRouter>>>);
   },
 ) {
   const router = _router.interop() as MigrateOldRouter<TOldRouter>;

packages/tests/server/transformer.test.ts

@@ -2,6 +2,7 @@
 import { routerToServerAndClientNew, waitError } from './___testHelpers';
 import {
   TRPCClientError,
+  createTRPCProxyClient,
   createWSClient,
   httpBatchLink,
   httpLink,
@@ -495,3 +496,52 @@ Object {
 
   close();
 });
+
+describe('required tranformers', () => {
+  test('works without transformer', () => {
+    const t = initTRPC.create({});
+    const router = t.router({});
+
+    createTRPCProxyClient<typeof router>({
+      links: [httpBatchLink({ url: '' })],
+    });
+  });
+
+  test('works with transformer', () => {
+    const transformer = superjson;
+    const t = initTRPC.create({
+      transformer,
+    });
+    const router = t.router({});
+
+    createTRPCProxyClient<typeof router>({
+      links: [httpBatchLink({ url: '' })],
+      transformer,
+    });
+  });
+
+  test('errors with transformer set on backend but not on frontend', () => {
+    const transformer = superjson;
+    const t = initTRPC.create({
+      transformer,
+    });
+    const router = t.router({});
+
+    // @ts-expect-error missing transformer on frontend
+    createTRPCProxyClient<typeof router>({
+      links: [httpBatchLink({ url: '' })],
+    });
+  });
+
+  test('errors with transformer set on frontend but not on backend', () => {
+    const transformer = superjson;
+    const t = initTRPC.create({});
+    const router = t.router({});
+
+    createTRPCProxyClient<typeof router>({
+      links: [httpBatchLink({ url: '' })],
+      // @ts-expect-error missing transformer on backend
+      transformer,
+    });
+  });
+});