본문 바로가기
버전: 10.x

데이터 변환기

비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

응답 데이터와 입력 인자를 직렬화할 수 있습니다. 변환기는 서버와 클라이언트 양쪽에 추가해야 합니다.

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. createTRPCProxyClient() 또는 createTRPCNext()에 추가​

ts
import { createTRPCProxyClient } from '@trpc/client';
import type { AppRouter } from '~/server/routers/_app';
import superjson from 'superjson';
export const client = createTRPCProxyClient<AppRouter>({
  transformer: superjson, // <--
  // [...]
});
ts
import { createTRPCProxyClient } from '@trpc/client';
import type { AppRouter } from '~/server/routers/_app';
import superjson from 'superjson';
export const client = createTRPCProxyClient<AppRouter>({
  transformer: superjson, // <--
  // [...]
});
utils/trpc.ts
ts
import { createTRPCNext } from '@trpc/next';
import type { AppRouter } from '~/server/routers/_app';
import superjson from 'superjson';
// [...]
export const trpc = createTRPCNext<AppRouter>({
  config(config) {
    return {
      transformer: superjson, // <--
    };
  },
  // [...]
});
utils/trpc.ts
ts
import { createTRPCNext } from '@trpc/next';
import type { AppRouter } from '~/server/routers/_app';
import superjson from 'superjson';
// [...]
export const trpc = createTRPCNext<AppRouter>({
  config(config) {
    return {
      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) => (0, 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) => (0, 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({
  // [...]
});

4. createTRPCProxyClient()에 추가​

client.ts
ts
import { createTRPCProxyClient } from '@trpc/client';
import { transformer } from '../utils/trpc';
export const client = createTRPCProxyClient<AppRouter>({
  transformer, // <--
  // [...]
});
client.ts
ts
import { createTRPCProxyClient } from '@trpc/client';
import { transformer } from '../utils/trpc';
export const client = createTRPCProxyClient<AppRouter>({
  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;
}