メインコンテンツへスキップ
バージョン: 9.x

データトランスフォーマー

非公式ベータ版翻訳

このページは 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(...)

アップロードとダウンロードで異なるトランスフォーマーを使用する​

トランスフォーマーを一方向のみで使用したい場合や、アップロードとダウンロードで異なるトランスフォーマーを使用したい場合（例：パフォーマンス上の理由）、個別のトランスフォーマーを指定できます。すべての場所で同じ組み合わせのトランスフォーマーを使用するように注意してください。

使用方法​

ここでは、サーバー側で使用するとセキュリティ上問題があるものの高速なdevalueをデータダウンロード用に、superjsonをアップロード用に使用しています。

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