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โข334d 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โข334d 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โข334d 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 ๐
N
Nickโข334d 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โข334d 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,...
N
NEOโข334d ago
The workaround is to extend BigInt by modifying the prototype
Create a
bigintPatch.ts
file and paste this code then import it like import "bigintPatch.ts"
on the page where youโre calling the query/mutationFFA
frankind.eth | Franco Aguzziโข334d 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!
BigInt - JavaScript | MDN
BigInt values represent numeric values which are too large to be represented by the number primitive.
4.8KMembers
View on DiscordMore 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';