資料轉換器

您能夠序列化回應資料與輸入引數。轉換器需要同時新增至伺服器與用戶端。

使用 superjson

SuperJSON 讓我們能夠透明地使用標準的 Date/Map/Set，在伺服器與用戶端之間進行傳輸。也就是說，你可以從你的 API 解析器傳回任何這些類型，並在用戶端使用它們，而無需從 JSON 重新建立物件。

如何

1. 安裝

bash
yarn add superjson

bash
yarn add superjson

2. 加入到你的 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. 加入到 httpLink()、wsLink() 等

一旦你在 initTRPC 物件中加入 transformer，TypeScript 將會引導你到需要加入的地方

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: 'https://#: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: 'https://#:3000',
      // transformer: superjson
    }),
  ],
});

上傳和下載的不同轉換器

如果一個轉換器只應使用於一個方向，或者應對上傳和下載使用不同的轉換器（例如，出於效能考量），你可以提供個別的轉換器進行上傳和下載。請務必在所有地方使用相同的組合轉換器。

如何

這裡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),
    // This `eval` only ever happens on the **client**
    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),
    // This `eval` only ever happens on the **client**
    deserialize: (object) => eval(`(${object})`),
  },
};

3. 加入到你的 AppRouter

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

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

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