TanStack Query Devtools failing to parse BigInt

[MidnightLightning]

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Describe the bug

When attempting to debug wagmi queries with the TanStack devtools, the devtools fails to open if I use both useQuery and useReadContract in the same component, if the contract being read with useReadContract has bigint values as arguments into the function call. In the JavaScript console it throws an error of:

Uncaught (in promise) TypeError: Do not know how to serialize a BigInt
    at JSON.stringify (<anonymous>)
    at hashKey (chunk-6Y4SHYZR.js?v=c0e65ea7:123:15)
    at hashQueryKeyByOptions (chunk-6Y4SHYZR.js?v=c0e65ea7:120:10)
    at matchQuery (chunk-6Y4SHYZR.js?v=c0e65ea7:69:31)
    at chunk-6Y4SHYZR.js?v=c0e65ea7:1098:18
    at Array.find (<anonymous>)

If the component uses only useQuery or useReadContract, the issue doesn't happen. Only if they're both used. and if the useReadContract target function doesn't take a bigint value as input, it doesn't happen.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/new-wagmi-qqhzxm

Steps To Reproduce

• Install wagmi v2, with @tanstack/react-query-devtools v5.66.
• In one component, use both useQuery (imported from @tanstack/react-query) and useReadContract (imported from wagmi). Note the page renders just fine; both queries succeed.
• Attempt to open the react-query-devtools view. It fails and in the Javascript console gives an error

What Wagmi package(s) are you using?

wagmi

Wagmi Package(s) Version(s)

2.14.1

Viem Version

2.7.9

TypeScript Version

5.0.4

Anything else?

This was originally experienced as #3328, under wagmi v1. After upgrading to v2, the issue persists, and I've narrowed it down to just this situation of combining two different types of react-query calls.

[MidnightLightning]

@jxom @tmm Any thoughts on this one? I think it's an issue with wagmi and not with the react-query devtools tool, since it seems from the react-query documentation the implementing tool needs to supply key-to-JSON parsing scripts, and wagmi appears to be doing it in some cases, but not in this edge case?

[1997roylee]

import './bigint-polyfill';

// bigint-polyfill.ts

export interface _BigInt extends BigInt {
    toJSON: () => string;
}

(BigInt.prototype as _BigInt).toJSON = function () {
    return this.toString();
};

[MidnightLightning]

@1997roylee that works by making all BigInts be serializable, but in a lossy way. Converting BigInts to strings works in some use-cases where the goal is human-friendliness, but it makes it so the BigInts cannot be de-serialized back to BigInts.

The react-query library provides for the implementing application to give a queryHashFn, to handle situations like this without polluting the global space (TanStack/query#2450). I suspect this bug is in wagmi only providing that custom BigInt parsing logic in certain circumstances, and this blend of queries ends up not passing the custom serializer?

[tmm]

The react-query library provides for the implementing application to give a queryHashFn, to handle situations like this without polluting the global space

https://github.com/wevm/wagmi/blob/main/packages/react/src/utils/query.ts#L82