Package Exports

trpc-transformer
trpc-transformer/dist/index.cjs
trpc-transformer/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (trpc-transformer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

✨ tRPC-transformer

A simple tRPC transformer combining superjson with Decimal.js.

Installation

yarn add trpc-transformer

npm i trpc-transformer

Usage

Add it to your initTRPC:

import { initTRPC } from '@trpc/server';
import transformer from 'trpc-transformer';

export const t = initTRPC.create({ transformer });

...and to your tRPC client:

import transformer from 'trpc-transformer';

const client = trpc.createClient({
  links: [
    httpBatchLink({
      // ...
      transformer,
    }),
  ],
});

Benefits

Assuming you have an appRouter.ts like this on the server-side:

import { initTRPC } from '@trpc/server';
import transformer from 'trpc-transformer';
import prisma from '~/lib/server/prisma';

const t = initTRPC.create({ transformer });

export const appRouter = t.router({
  users: t.procedure.query(() =>
    prisma.user.findMany({
      select: {
        id: true,
        name: true,
        createdAt: true,
        accounts: {
          select: { iban: true, balance: true },
        },
      },
    })
  )
});

export type AppRouter = typeof appRouter;

...then, you'll have your data correctly serialized/deserialized on the client-side:

import Decimal from 'decimal.js';
import { trpc } from '~/lib/client/trpc';

const usersQuery = trpc.users.useQuery();

console.log('Account createdAt is Date:', usersQuery.data?.[0].createdAt instanceof Date); // 👈 true
console.log('Account balance is Decimal.js:', usersQuery.data?.[0].accounts[0].balance instanceof Decimal); // 👈 true

[NOTE] The above example assumes a Next.js project with a lib/client/trpc.ts file like this:

import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from 'swapp.ro.server';
export const trpc = createTRPCReact<AppRouter>();

...and a layout.tsx file like this:

'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import { useState } from 'react';
import transformer from 'trpc-transformer';
import { trpc } from '~/lib/client/trpc';

export default function DynamicLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: 'your api url',
          transformer,
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
}

Learn more

See trpc.io/docs/data-transformers and github.com/blitz-js/superjson.

License

The ISC License.