본문으로 건너뛰기
버전: 11.x

데이터 트랜스포머

응답 데이터와 입력 인수를 직렬화할 수 있습니다. 트랜스포머는 서버와 클라이언트 양쪽에 모두 추가해야 합니다.

superjson 사용​

SuperJSON을 사용하면 서버와 클라이언트 간에 표준 Date/Map/Set을 투명하게 사용할 수 있습니다. 즉, API 리졸버에서 이러한 타입을 반환하고 클라이언트에서 JSON에서 객체를 다시 생성하지 않고 사용할 수 있습니다.

방법​

1. 설치​

bash
yarn add superjson
bash
yarn add superjson

2. initTRPC에 추가​

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

initTRPC 객체에 추가하는 즉시 TypeScript가 transformer를 추가해야 하는 위치를 안내합니다

createTRPCClient():

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

devalue 사용​

Devalue는 superjson과 유사하게 작동하며 성능과 컴팩트한 페이로드에 초점을 맞추지만, 사람이 읽기 어려운 바디라는 단점이 있습니다.

방법​

1. 설치​

bash
yarn add devalue
bash
yarn add devalue

2. utils/trpc.ts에 추가​

여기서는 XSS 완화를 위해 parse와 stringify를 사용합니다.

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. 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,
});

initTRPC 객체에 추가하는 즉시 TypeScript가 transformer를 추가해야 하는 위치를 안내합니다

createTRPCClient():

src/app/_trpc/client.ts
ts
import { createTRPCClient, httpLink } 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, httpLink } 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,
    }),
  ],
});

업로드와 다운로드용 다른 트랜스포머​

트랜스포머가 한 방향에만 사용되거나 업로드와 다운로드에 서로 다른 트랜스포머가 사용되어야 하는 경우(예: 성능상의 이유), 업로드와 다운로드용 개별 트랜스포머를 제공할 수 있습니다. 모든 곳에서 동일한 결합된 트랜스포머를 사용하도록 하세요.

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