Running TRPC on Vercel with custom serialization fails

AAlex

6/27/2023

Hi all, I'm having some difficulties with the serialization of my objects when I run on vercel. I'm running nextjs 13.4.4 with trpc/server,client,next 10.28.1 and the next page routing. I'm using a custom type "ts-money" which is returned in a trpc response like:

getSalaryEnvironment: protectedProcedure
    .input(
      z.object({
        administratorId: z.string(),
        salaryDate: salaryDateSchema,
      }),
    )
    .query(async ({ input }) => {
      return {
        date: new Date(2023, 5, 31),
        nbrOfDaysWorked: 20,
        salaryDate: input.salaryDate,
        totalGrossIncomeFromPreviousSalaryInYear: new Money(6000000,Currencies.EUR),
      }
    }),

getSalaryEnvironment: protectedProcedure
    .input(
      z.object({
        administratorId: z.string(),
        salaryDate: salaryDateSchema,
      }),
    )
    .query(async ({ input }) => {
      return {
        date: new Date(2023, 5, 31),
        nbrOfDaysWorked: 20,
        salaryDate: input.salaryDate,
        totalGrossIncomeFromPreviousSalaryInYear: new Money(6000000,Currencies.EUR),
      }
    }),

AAlex

6/27/2023

I have implemented a custom serialization for it like so:

import { Money } from 'ts-money'
import { z } from 'zod'

const moneySchema = z.object({
  amount: z.number(),
  currency: z.union([z.literal('EUR'), z.literal('USD'), z.literal('GBP')]),
})
export const initializeSuperJson = () => {
  superjson.registerCustom(
    {
      isApplicable: (m): m is Money => {
        return moneySchema.safeParse(m).success
      },
      serialize: (m: Money) => {
        return { amount: m.amount, currency: m.currency }
      },
      deserialize: (json: { amount: number; currency: string }) => {
        return new Money(json.amount, json.currency)
      },
    },
    'Money',
  )
}

import { Money } from 'ts-money'
import { z } from 'zod'

const moneySchema = z.object({
  amount: z.number(),
  currency: z.union([z.literal('EUR'), z.literal('USD'), z.literal('GBP')]),
})
export const initializeSuperJson = () => {
  superjson.registerCustom(
    {
      isApplicable: (m): m is Money => {
        return moneySchema.safeParse(m).success
      },
      serialize: (m: Money) => {
        return { amount: m.amount, currency: m.currency }
      },
      deserialize: (json: { amount: number; currency: string }) => {
        return new Money(json.amount, json.currency)
      },
    },
    'Money',
  )
}

It is injected in my singleton client (Using T3 approach) like so:

/**
 * A set of typesafe react-query hooks for your tRPC API
 */
export const api = createTRPCNext<AppRouter>({
  config() {
    initializeSuperJson()
    return {
      /**
       * Transformer used for data de-serialization from the server
       * @see https://trpc.io/docs/data-transformers
       **/
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server
       * @see https://trpc.io/docs/links
       * */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === 'development' ||
            (opts.direction === 'down' && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    }
  },

/**
 * A set of typesafe react-query hooks for your tRPC API
 */
export const api = createTRPCNext<AppRouter>({
  config() {
    initializeSuperJson()
    return {
      /**
       * Transformer used for data de-serialization from the server
       * @see https://trpc.io/docs/data-transformers
       **/
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server
       * @see https://trpc.io/docs/links
       * */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === 'development' ||
            (opts.direction === 'down' && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
    }
  },

When I run it locally everything works as expected... But when deployed on vercel the custome serialization is not executed. I have added some logging and I can see the injection of custom serialization happening the first time I use a trpc route api.xxxx But the custom serilization does not take place. Any idea where I could start digging?

Jjulius

6/27/2023

Check here https://github.com/trpc/trpc/blob/next13-auth/examples/next-13-starter/src/trpc/shared.ts

AAlex

6/27/2023

Hi Julius, I will try this. Thanks for sharing.👍 This did resolve my issue. thanks for sharring this example.

Looking for more? Join the community!

tRPC

Running TRPC on Vercel with custom serialization fails

Join Server

tRPC

Running TRPC on Vercel with custom serialization fails

Join Server

Recommended Posts

How to prefetch data on the client into the cache?To simplify a bit, lets say I'm making an app that allows users to view a project. I have a top leve It's possible to upload a zip file through trpc?I'm doing a screen where I need to upload a zip with pdfs files, it is possible with trpc? or I need route needs jwt but it doesn'thi i do have a public route but when i i call it on the front end it requires a jwt token SERVER im call socket.io events from inside trpc endpoints?how do i implement notifications when someone likes a post with socket.io? will every user have his Prefetch on useContext() is not being picked up by react-query.I need to prefetch one of my procedures to pre-load data for a page that the user can navigate to. T how do you consume trpc endpoints from postman?I'm currently trying to set up testing for a full stack project while using trpc. but im unsure how tRPC 10 Mutations Firing Twice in Deployed Releases OnlyWe have a newly-upgraded tRPC 10 / ReactQuery 4 app and on two pages on which we have a lot of mutat useQuery with query paramsHi, I'm wondering how to correctly handle query params as a useQuery input using Nextjs. ``` const infiniteQuery always undefined cursorHey there ! I'm struggling a bit to understand who the `useInfiniteQuery` is supposed to work with Migrating v9 to v10 - - using the client?I'm migrating a large project from trpc v9 to v10. There is a section of the code that uses the resu Using tRPC and something else too? For building a mobile app / public API.A bit noobish, but I'm starting a new project w/ the t3 stack and I'm looking to build a mobile app whats the difference between context and middlewareand which 1 should I use for express session cookies Axios, ExpressMiddleware and TRPCErrorsWe have an express based TRPC server and our procedures are calling our endpoints using axios. So wh base pathHi, don’t seem to be able to find documentation but is there a way to set the base path of the serve Any Benefit using tRPC for only remote api calls?Hi, does it make sense to use trpc if all I will be doing is calling a remote api? I have set it up Can I connect to a regular node express with socket.io?My idea is that I will host the socketio nodejs server in some server, and then use it with my nextj