T
tRPC

Running TRPC on Vercel with custom serialization fails

Running TRPC on Vercel with custom serialization fails

AAlex6/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),
}
}),
AAlex6/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?
AAlex6/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!

T
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 leveIt'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 needroute 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 imcall 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. Thow 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 mutatuseQuery 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 resuUsing 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 cookiesAxios, ExpressMiddleware and TRPCErrorsWe have an express based TRPC server and our procedures are calling our endpoints using axios. So whbase pathHi, don’t seem to be able to find documentation but is there a way to set the base path of the serveAny 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