Patterns for Serializing BigInts (and other unsafe data types)

[lauchness]

Reading the docs here: https://tanstack.com/query/latest/docs/framework/react/guides/ssr#serialization

By default, these frameworks only supports returning things that are safely serializable/parsable, and therefore does not support undefined, Error, Date, Map, Set, BigInt, Infinity, NaN, -0, regular expressions etc. This also means that you can not return any of these things from your queries. If returning these values is something you want, check out superjson or similar packages.

The docs go on to say there are other packages that could be useful for this.

However, I have yet to find any examples of how to accomplish this.

The best solution I've found up until this point is keeping bigints as string, and then using BigInt(value) in components. But this isn't great. I'd really love to serialize bigint values and dehydrate my SSR components with that datatype directly.

Are there any examples of how to do this?

[barnabaas24]

Hi, were you able to find a solution for this?

[thatguyintech]

also wondering about this!

[ivanhawkes]

I'm also wondering if there's a better solution now.

[TkDodo]

superjson, as mentioned, can serialize BigInt just fine. Plug it in to the hydrate / dehydrate process and it should just work. Have you done that?

[ivanhawkes]

I haven't. I'm pretty new to react / typescript web development. Thanks for the heads up. I'll go look up how to do that!