React Query Devtools cannot serialize BigInt type

Describe the bug
One of the models that I am caching with React Query is a BigInt type. Unfortunately, when I try and inspect the data in the devtools explorer, I get an uncaught error: TypeError: Do not know how to serialize a BigInt.

To Reproduce
Steps to reproduce the behavior:

Add an object using a BigInt type to the query cache
Open the Devtools
Select the query in the browser to inspect the data
See the error

Expected behavior
I should be able to view properly serialised data in the devtools browser.

Screenshots

Desktop (please complete the following information):

OS: Pop_OS 21.04
Browser: Chrome
Version: 94

Additional context
The error can be traced to this line: https://github.com/tannerlinsley/react-query/blob/master/src/devtools/Explorer.tsx#L112. If there's a reason that the data is being stringified, then hopefully there's a way to keep doing it, but there are data types which cannot be parsed by JSON.stringify. There may be other options, such as https://github.com/blitz-js/superjson but I understand that would add further complexity.

hmm, how should we serialize the BigInt ? You can certainly have non-serializable data in your cache, its just not very common. A couple of things won't work with non-serializable data:

hydration, which includes SSR and the persist plugins
structural sharing

for the persist plugins, we actually have an option to provide a different serializer:

https://github.com/tannerlinsley/react-query/blob/b84681fdc7d37645cd149f40e98cb18fd8bc393c/src/createWebStoragePersister/index.ts#L28-L29

if you want, you can contribute something similar to the devtools, as long as it defaults to JSON.stringify

Thanks Dominik. I think you raise a good point, this will also cause an issue with hydration. Is there an option to specify the serializer for hydration, because that's probably a bigger issue? I'd love to take a look at this if I get the time. I'm busy right now, but might get time in the new year if my manager lets me!

@Ephem

@Ephem I think we decided with this issue:

Hydration API can not handle undefined values #1978 (comment)

that its a limitation of hydration to only support json serializable values, right? We have since documented it here:

https://react-query.tanstack.com/reference/hydration#limitations

it's actually not a concern of hydration / dehydration, because that gives you an object, but it seems that passing this object to the return value of getStaticProps in nextJs expects it so be json serializable ?

Yeah I just dug into the hydration code and the serialisation will all be the purview of Next, so I can just serialise it myself for hydration. I'll take a look into the dev tools in the new year.

@themagickoala

@themagickoala any updates here, are you actively working on a serializer option for the devtools?

Afraid not, circumstances have conspired against me and I don't see myself having capacity for this.

@themagickoala

Hey @themagickoala, @TkDodo , I'd like to have a look on this issue!

I didn't get why javascript doesn't stringify the BigInt. Checking it here.

🎉 This issue has been resolved in version 3.34.18 🎉

The release is available on:

Your semantic-release bot 📦🚀

Thanks Henrique! I've actually just this week stopped storing the bigint and started using the select option to convert to bigint on the way out of the cache.

🎉 This issue has been resolved in version 4.0.0-alpha.24 🎉

The release is available on:

Your semantic-release bot 📦🚀

Should we reopen this issue?

@tanstack/react-query" 4.13.5
@tanstack/react-query-devtools: 4.13.5

When i open devtools all is ok:

but when i tried to select detailed view with key that contains bigint i have an error:

I got same issue but in @tanstack/react-query not in the devtool. do we have any way to bypass this since Im using generate tool and the generate code required BigInt

if it's in the QueryKey: pass a custom queryKeyHashFn
if it's in the data, it shouldn't be a problem.

ohh I see thank you

I'm having the same problem but on react-query-devtools while using https://wagmi.sh/ library.

In some screens when i opened the dev tools it will throw that error.

BigInt.prototype['toJSON'] = function () {
  return this.toString()
}

I had to add this to my ReactQueryProvider file

I'm having the same problem but on react-query-devtools while using https://wagmi.sh/ library.

In some screens when i opened the dev tools it will throw that error.

BigInt.prototype['toJSON'] = function () {
return this.toString()
}
I had to add this to my ReactQueryProvider file

so helpful, tu! i ended up adding it my react apps' entry, main.tsx. this way it applied everywhere which doesn't seem to hurt anything

If you are using Wagmi, do NOT follow this response:

I'm having the same problem but on react-query-devtools while using https://wagmi.sh/ library.

In some screens when i opened the dev tools it will throw that error.

BigInt.prototype['toJSON'] = function () {
return this.toString()
}
I had to add this to my ReactQueryProvider file

--

Instead, follow TKDodo's recommendation and the Wagmi docs example - use the same hashFn used by Wagmi to serialize query keys. From their docs:

import {
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { hashFn } from "@wagmi/core/query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      queryKeyHashFn: hashFn,
    },
  },
});

--

Instead, follow TKDodo's recommendation and the Wagmi docs example - use the same hashFn used by Wagmi to serialize query keys. From their docs:

import {
QueryClient,
QueryClientProvider,
} from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { hashFn } from "@wagmi/core/query";

const queryClient = new QueryClient({
defaultOptions: {
queries: {
queryKeyHashFn: hashFn,
},
},
});

that's cool, thanks for letting me know.

fix: react-query bigint serialization problem

The dev tool part is probably what was missing from this issue in the wagmi repo:

BigInt value can't be serialized in JSON wevm/wagmi#3855

Adding this for reference as the other issue is locked now.

Navigation Menu

Repository navigation

React Query Devtools cannot serialize BigInt type #3082

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

React Query Devtools cannot serialize BigInt type #3082

Description

Activity

TkDodo commented on Dec 10, 2021

themagickoala commented on Dec 10, 2021

TkDodo commented on Dec 10, 2021

themagickoala commented on Dec 10, 2021

TkDodo commented on Feb 14, 2022

themagickoala commented on Feb 14, 2022

HenriqueDerosa commented on Mar 23, 2022

tannerlinsley commented on Mar 26, 2022

themagickoala commented on Mar 26, 2022

tannerlinsley commented on Apr 2, 2022

mc-petry commented on Oct 31, 2022

vctqs1 commented on Aug 16, 2023

TkDodo commented on Aug 16, 2023

vctqs1 commented on Aug 16, 2023

0x33dm commented on Jun 6, 2024

murderteeth commented on Sep 3, 2024

whoislewys commented on Oct 9, 2024

0x33dm commented on Oct 9, 2024

Hugoo commented on Sep 3, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions