Transformadores de Datos

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Puedes serializar los datos de respuesta y los argumentos de entrada. Los transformadores deben agregarse tanto en el servidor como en el cliente.

Uso de superjson

SuperJSON nos permite usar transparentemente tipos estándar como Date, Map o Set en la comunicación entre el servidor y el cliente. Es decir, puedes devolver cualquiera de estos tipos desde tu API-resolver y utilizarlos directamente en el cliente sin necesidad de reconstruir los objetos desde JSON.

Cómo hacerlo

1. Instalar

bash
yarn add superjson

bash
yarn add superjson

2. Agregar a tu initTRPC

routers/router/_app.ts
ts
import { initTRPC } from '@trpc/server';
import superjson from 'superjson';
export const t = initTRPC.create({
  transformer: superjson,
});

routers/router/_app.ts
ts
import { initTRPC } from '@trpc/server';
import superjson from 'superjson';
export const t = initTRPC.create({
  transformer: superjson,
});

3. Agregar a httpLink(), wsLink(), etc.

TypeScript te guiará sobre dónde agregar transformer una vez que lo hayas añadido al objeto initTRPC.

createTRPCClient():

src/app/_trpc/client.ts
ts
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '~/server/routers/_app';
import superjson from 'superjson';
export const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
      transformer: superjson,
    }),
  ],
});

src/app/_trpc/client.ts
ts
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '~/server/routers/_app';
import superjson from 'superjson';
export const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
      transformer: superjson,
    }),
  ],
});

Uso de devalue

Devalue funciona similar a superjson, pero se enfoca en rendimiento y cargas útiles compactas, a costa de un cuerpo menos legible para humanos.

Cómo hacerlo

1. Instalar

bash
yarn add superjson devalue

bash
yarn add superjson devalue

2. Agregar a utils/trpc.ts

Aquí usamos parse y stringify porque mitigan XSS.

utils/trpc.ts
ts
import { parse, stringify } from 'devalue';
// [...]
export const transformer = {
  deserialize: (object: any) => parse(object),
  serialize: (object: any) => stringify(object),
};

utils/trpc.ts
ts
import { parse, stringify } from 'devalue';
// [...]
export const transformer = {
  deserialize: (object: any) => parse(object),
  serialize: (object: any) => stringify(object),
};

3. Agregar a tu initTRPC

server/routers/_app.ts
ts
import { initTRPC } from '@trpc/server';
import { transformer } from '../../utils/trpc';
export const t = initTRPC.create({
  transformer,
});

server/routers/_app.ts
ts
import { initTRPC } from '@trpc/server';
import { transformer } from '../../utils/trpc';
export const t = initTRPC.create({
  transformer,
});

4. Agregar a httpLink(), wsLink(), etc.

TypeScript te guiará sobre dónde agregar transformer una vez que lo hayas añadido al objeto initTRPC.

createTRPCClient():

src/app/_trpc/client.ts
ts
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '~/server/routers/_app';
import { transformer } from '../../utils/trpc';
export const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
      transformer,
    }),
  ],
});

src/app/_trpc/client.ts
ts
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '~/server/routers/_app';
import { transformer } from '../../utils/trpc';
export const client = createTRPCClient<AppRouter>({
  links: [
    httpLink({
      url: 'http://localhost:3000',
      transformer,
    }),
  ],
});

Transformadores diferentes para subida y descarga

Si necesitas usar un transformador solo en una dirección o diferentes transformadores para subida y descarga (por ejemplo, por razones de rendimiento), puedes proporcionar transformadores individuales. Asegúrate de usar el mismo transformador combinado en todas partes.

Interfaz DataTransformer

ts
export interface DataTransformer {
  serialize(object: any): any;
  deserialize(object: any): any;
}
interface InputDataTransformer extends DataTransformer {
  /**
   * This function runs **on the client** before sending the data to the server.
   */
  serialize(object: any): any;
  /**
   * This function runs **on the server** to transform the data before it is passed to the resolver
   */
  deserialize(object: any): any;
}
interface OutputDataTransformer extends DataTransformer {
  /**
   * This function runs **on the server** before sending the data to the client.
   */
  serialize(object: any): any;
  /**
   * This function runs **only on the client** to transform the data sent from the server.
   */
  deserialize(object: any): any;
}
export interface CombinedDataTransformer {
  /**
   * Specify how the data sent from the client to the server should be transformed.
   */
  input: InputDataTransformer;
  /**
   * Specify how the data sent from the server to the client should be transformed.
   */
  output: OutputDataTransformer;
}

ts
export interface DataTransformer {
  serialize(object: any): any;
  deserialize(object: any): any;
}
interface InputDataTransformer extends DataTransformer {
  /**
   * This function runs **on the client** before sending the data to the server.
   */
  serialize(object: any): any;
  /**
   * This function runs **on the server** to transform the data before it is passed to the resolver
   */
  deserialize(object: any): any;
}
interface OutputDataTransformer extends DataTransformer {
  /**
   * This function runs **on the server** before sending the data to the client.
   */
  serialize(object: any): any;
  /**
   * This function runs **only on the client** to transform the data sent from the server.
   */
  deserialize(object: any): any;
}
export interface CombinedDataTransformer {
  /**
   * Specify how the data sent from the client to the server should be transformed.
   */
  input: InputDataTransformer;
  /**
   * Specify how the data sent from the server to the client should be transformed.
   */
  output: OutputDataTransformer;
}