How to retrieve and receive Bigint data to/from TRPC procedure

Node: v16.15.1 I'm trying to return an object which contains an amount property from one of my TRPC procedures... This property should retrieve a bigint. Unfortunately, I'm receiving error: TypeError: Do not know how to serialize a BigInt When doing this. I've already configured superjson Data transformer in my TRPC server instance creation and in client's createTRPCNext's response, but this didn't solve the problem. What is the most appropriate way of receiving and returning bigint properties to/from my TRPC procedures inside my Next.js application? I appreciate any help, thanks! 🙏🏼 These are my packages versions: "@trpc/client": "10.14.1", "@trpc/next": "10.14.1", "@trpc/react-query": "10.14.1", "@trpc/server": "10.14.1", "next": "13.2.3", "superjson": "1.12.3"
N
Nick•321d ago
You probably just need to register the type with superjson It’s in their docs how to do this
FFA
frankind.eth | Franco Aguzzi•321d ago
Hey @Nick Lucas ! I appreciate your quick response, I'll take a look on this now and let you know in what it results 😉
FFA
frankind.eth | Franco Aguzzi•321d ago
@Nick Lucas Adding the following code wasn't enough for getting rid of the error: TypeError: Do not know how to serialize a BigInt registerCustom<bigint, string>( { isApplicable: (v): v is bigint => typeof v === "bigint", serialize: (v) => v.toString(), deserialize: (v) => BigInt(v), }, "bigint", ); Do you have any other suggestion on how to fix this issue? I'm send attached to this message my TRPC server file + TRPC client file so you can have more visibility of how I'm implementing things here 👍

trpc-hooks.ts

trpc.ts

N
Nick•321d ago
You’ll need to add it on both client and api if you haven’t, otherwise I’d check their GitHub issues
FFA
frankind.eth | Franco Aguzzi•321d ago
I've extracted the registration of this custom type to a file which is being imported in both client and server TRPC configuration files, but the error below persists: TypeError: Do not know how to serialize a BigInt I wonder if this is related to TRPC procedures config, to SuperJson lib (which should give support to BigInt without the need of registering new custom serialize/deserialize function for it, as mentioned in their docs: https://github.com/blitz-js/superjson#examples-3) or to Next.js Neither SuperJson, TRPC nor Next.js Github issues contain related issues, so I'm finding myself completely stuck in this limitation now 😮‍💨
GitHub
GitHub - blitz-js/superjson: Safely serialize JavaScript expression...
Safely serialize JavaScript expressions to a superset of JSON, which includes Dates, BigInts, and more. - GitHub - blitz-js/superjson: Safely serialize JavaScript expressions to a superset of JSON,...

trpc-transformer.ts

N
NEO•321d ago
The workaround is to extend BigInt by modifying the prototype Create a bigintPatch.ts file and paste this code 
//@ts-expect-error
BigInt.prototype.toJSON = function () {
  const int = Number.parseInt(this.toString())
  return int ?? this.toString()
}
//@ts-expect-error
BigInt.prototype.toJSON = function () {
  const int = Number.parseInt(this.toString())
  return int ?? this.toString()
}
then import it like import "bigintPatch.ts" on the page where you’re calling the query/mutation
FFA
frankind.eth | Franco Aguzzi•321d ago
Hi @NEO I've added something very similar (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#use_within_json) to the code snippet you've shared and the issue was fixed! 🥳 Thanks so much for your help @nlucas and @NEO, I really appreciate it! trpc
BigInt - JavaScript | MDN
BigInt values represent numeric values which are too large to be represented by the number primitive.
More Posts
TypeError: Cannot read properties of null (reading 'useContext') when using useMutation with TRPC inI'm encountering an error in my Next.js application when trying to use the useMutation hook with TRPInitial websockets getToken() returns null: next-auth + websockets :)Hello! So the way I am trying to authenticate websockets is like this: ``` import { getToken } froCan I get the original type name, instead of the shape, with query?I'm not sure how to explain it, so, here's a screen shot:TRPCClientError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON ErrorHello folks, I'm getting an issue with my integration, I'm a newbie in tRPC and I can't work well mytrpc corsmy sveltekit app is running on https://example.com with tRPC and it's making requests to http://127.T3 app tRPC external callsCurrently i'm just making Post request and formatting my payload to ```{ "0": { "json":Next-auth session not being fetched in tRPC contextNext-auth session not being fetched in tRPC contextuseMutation not handeling arguments correctly.Hello, I have a mutation setup on the server with the input being an object containing the fields emUpdate Clerk Organization from TRPC Router (T3 Stack)Hello, if anyone got an idea on how to handle this I would highly appreciate it. I have some organiHow to not send request in specific condition in useQuery()```js const { data: artists, isLoading } = api.findArtist.useQuery({ name: search, }); ``` TRPCClientError: fetch failedI get the below error when createTRPCProxyClient runs on BE of a Next.JS app hosted on Vercel: ```TinferRouterOutputs not inferringCould anyone point me in the right direction to why my types aren't being inferred here? (Using T3 bModular Router ThoughtsHello, I hope I can convey clearly what I hope to accomplish. To start, I have a monorepo, with a feIssue with trpc fetch when trying to pass Clerk auth to contextI'm currently trying to add Clerk auth to my trpc context, but I just keep getting this error: `ErrBullMQ + TRPCCurious how to configure BullMQ with TRPC correctly. Currently I have the queue, queueevents, and thTrpc refetches all of the queries when i run a mutationIm running node 16.15.0 with Pnpm When i run a mutation for some reason all of the queries get refettRPC Client on NodeJS server keeps complaining that no fetcher has been configuredHey, I want to create a tRPC setup where I have one server (works fine) and then a client which is cBest Practice to Fetch a Query OnDemandWhat's the best practice to fetch a query on demand? I don't have the context for the query's inputOutput Response ShapeI'm wondering, is the output response shape locked in, or can we modify it in any way? For example: Need help```js import {initTRPC} from '@trpc/server'; import * as trpcNext from '@trpc/server/adapters/next';