数据转换器

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

你可以对响应数据和输入参数进行序列化处理。转换器需要同时在服务器端和客户端添加。

使用 superjson

SuperJSON 允许我们在服务器和客户端之间透明地使用标准 Date/Map/Set 等类型。这意味着您可以在 API 解析器中返回这些类型，并在客户端直接使用它们而无需从 JSON 重新创建对象。

使用方法

1. 安装

bash
yarn add superjson

bash
yarn add superjson

2. 添加到 createTRPCCLient() 或 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. 添加到您的 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(...)

为上传和下载配置不同转换器

如果转换器只需单向使用，或者需要为上传和下载使用不同的转换器（例如出于性能考虑），您可以分别为上传和下载提供独立的转换器。请确保在所有地方使用相同的组合转换器。

使用方法

这里使用 superjson 处理上传数据，使用 devalue 处理下载数据，因为 devalue 速度更快但在服务器端使用不安全。

1. 安装

bash
yarn add superjson devalue

bash
yarn add superjson devalue

2. 添加到 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. 添加到 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. 添加到您的 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(...)

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;
};