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 servidor y cliente. Esto significa que puedes devolver cualquiera de estos tipos en tu API-resolver y utilizarlos directamente en el cliente sin reconstruir los objetos desde JSON.

Cómo hacerlo

1. Instalar

bash
yarn add superjson

bash
yarn add superjson

2. Agregar a la configuración de createTRPCCLient() o withTRPC()

client.ts
ts
import superjson from 'superjson';
// [...]
export const client = createTRPCClient<AppRouter>({
  // [...]
  transformer: superjson,
});

client.ts
ts
import superjson from 'superjson';
// [...]
export const client = createTRPCClient<AppRouter>({
  // [...]
  transformer: superjson,
});

pages/_app.tsx
ts
import superjson from 'superjson';
// [...]
export default withTRPC<AppRouter>({
  config(config) {
    return {
      // [...]
      transformer: superjson,
    };
  },
})(MyApp);

pages/_app.tsx
ts
import superjson from 'superjson';
// [...]
export default withTRPC<AppRouter>({
  config(config) {
    return {
      // [...]
      transformer: superjson,
    };
  },
})(MyApp);

3. Agregar a tu AppRouter

server/routers/_app.ts
ts
import * as trpc from '@trpc/server';
import superjson from 'superjson';
export const appRouter = trpc.router().transformer(superjson);
// .query(...)

server/routers/_app.ts
ts
import * as trpc from '@trpc/server';
import superjson from 'superjson';
export const appRouter = trpc.router().transformer(superjson);
// .query(...)

Transformadores diferentes para subida y descarga

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

Cómo hacerlo

En este ejemplo se usa superjson para subir datos y devalue para descargar, porque devalue es mucho más rápido pero inseguro para usar en el servidor.

1. Instalar

bash
yarn add superjson devalue

bash
yarn add superjson devalue

2. Agregar a utils/trpc.ts

utils/trpc.ts
ts
import { uneval } from 'devalue';
import superjson from 'superjson';
// [...]
export const transformer = {
  input: superjson,
  output: {
    serialize: (object) => uneval(object),
    deserialize: (object) => eval(`(${object})`),
  },
};

utils/trpc.ts
ts
import { uneval } from 'devalue';
import superjson from 'superjson';
// [...]
export const transformer = {
  input: superjson,
  output: {
    serialize: (object) => uneval(object),
    deserialize: (object) => eval(`(${object})`),
  },
};

3. Agregar a createTRPCCLient()

client.ts
ts
import { transformer } from '../utils/trpc';
// [...]
export const client = createTRPCClient<AppRouter>({
  // [...]
  transformer: transformer,
});

client.ts
ts
import { transformer } from '../utils/trpc';
// [...]
export const client = createTRPCClient<AppRouter>({
  // [...]
  transformer: transformer,
});

4. Agregar a tu AppRouter

server/routers/_app.ts
ts
import * as trpc from '@trpc/server';
import { transformer } from '../../utils/trpc';
export const appRouter = trpc.router().transformer(transformer);
// .query(...)

server/routers/_app.ts
ts
import * as trpc from '@trpc/server';
import { transformer } from '../../utils/trpc';
export const appRouter = trpc.router().transformer(transformer);
// .query(...)

Interfaz DataTransformer

ts
type DataTransformer = {
  serialize(object: any): any;
  deserialize(object: any): any;
};
type CombinedDataTransformer = {
  input: DataTransformer;
  output: DataTransformer;
};

ts
type DataTransformer = {
  serialize(object: any): any;
  deserialize(object: any): any;
};
type CombinedDataTransformer = {
  input: DataTransformer;
  output: DataTransformer;
};