본문 바로가기
버전: 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을 업로드용으로, 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;
};