Data Transformers
You are able to serialize the response data & input args. The transformers need to be added both to the server and the client.
Using superjson
SuperJSON allows us to transparently use, e.g., standard Date
/Map
/Set
s over the wire between the server and client. That is, you can return any of these types from your API-resolver and use them in the client without having to recreate the objects from JSON.
How to
1. Install
bash
yarn add superjson
bash
yarn add superjson
2. Add to your initTRPC
routers/router/_app.tsts
import { initTRPC } from '@trpc/server';import superjson from 'superjson';export const t = initTRPC.create({transformer: superjson,});
routers/router/_app.tsts
import { initTRPC } from '@trpc/server';import superjson from 'superjson';export const t = initTRPC.create({transformer: superjson,});
3. Add to createTRPCProxyClient()
or createTRPCNext()
ts
import { createTRPCProxyClient } from '@trpc/client';import superjson from 'superjson';import type { AppRouter } from '~/server/routers/_app';export const client = createTRPCProxyClient<AppRouter>({transformer: superjson, // <--// [...]});
ts
import { createTRPCProxyClient } from '@trpc/client';import superjson from 'superjson';import type { AppRouter } from '~/server/routers/_app';export const client = createTRPCProxyClient<AppRouter>({transformer: superjson, // <--// [...]});
utils/trpc.tsts
import { createTRPCNext } from '@trpc/next';import superjson from 'superjson';import type { AppRouter } from '~/server/routers/_app';// [...]export const trpc = createTRPCNext<AppRouter>({config({ ctx }) {return {transformer: superjson, // <--};},// [...]});
utils/trpc.tsts
import { createTRPCNext } from '@trpc/next';import superjson from 'superjson';import type { AppRouter } from '~/server/routers/_app';// [...]export const trpc = createTRPCNext<AppRouter>({config({ ctx }) {return {transformer: superjson, // <--};},// [...]});
Different transformers for upload and download
If a transformer should only be used for one direction or different transformers should be used for upload and download (e.g., for performance reasons), you can provide individual transformers for upload and download. Make sure you use the same combined transformer everywhere.
How to
Here superjson is used for uploading and devalue for downloading data because devalue is a lot faster but insecure to use on the server.
1. Install
bash
yarn add superjson devalue
bash
yarn add superjson devalue
2. Add to utils/trpc.ts
utils/trpc.tsts
import { uneval } from 'devalue';import superjson from 'superjson';// [...]export const transformer = {input: superjson,output: {serialize: (object) => uneval(object),deserialize: (object) => eval(`(${object})`),},};
utils/trpc.tsts
import { uneval } from 'devalue';import superjson from 'superjson';// [...]export const transformer = {input: superjson,output: {serialize: (object) => uneval(object),deserialize: (object) => eval(`(${object})`),},};
3. Add to your AppRouter
server/routers/_app.tsts
import { initTRPC } from '@trpc/server';import { transformer } from '../../utils/trpc';export const t = initTRPC.create({transformer,});export const appRouter = t.router({// [...]});
server/routers/_app.tsts
import { initTRPC } from '@trpc/server';import { transformer } from '../../utils/trpc';export const t = initTRPC.create({transformer,});export const appRouter = t.router({// [...]});
4. Add to createTRPCProxyClient()
client.tsts
import { createTRPCProxyClient } from '@trpc/client';import { transformer } from '../utils/trpc';export const client = createTRPCProxyClient<AppRouter>({transformer, // <--// [...]});
client.tsts
import { createTRPCProxyClient } from '@trpc/client';import { transformer } from '../utils/trpc';export const client = createTRPCProxyClient<AppRouter>({transformer, // <--// [...]});
DataTransformer
interface
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;};