Latest wagmi and @tanstack/react-query are not compatible with StructuralSharing (breaks dev)

[akshatmittal]

Check existing issues

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

Describe the bug

Wagmi enables StructuralSharing by default, however creating a new project right with latest wagmi and tanstack query does not work, breaks all queries in dev that include any BigInt. Every query that includes a BigInt (including native ones) returns an error.

The only way to fix it is by disabling structuralSharing explicitly and globally.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/new-wagmi-d1zd7f?file=src%2Fmain.tsx,src%2FBalanceAtom.tsx

Steps To Reproduce

Just look at console logs. And look at the balanceData output for the error from query.

The error looks like:

StructuralSharing requires data to be JSON serializable. To fix this, turn off structuralSharing or return JSON-serializable data from your queryFn. [["balance",{"address":"0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266","chainId":1}]]: TypeError: Do not know how to serialize a BigInt

This is even after enabling custom hashFn included in wagmi/query.

What Wagmi package(s) are you using?

wagmi

Wagmi Package(s) Version(s)

2.12.8

Viem Version

2.21.1

TypeScript Version

5.5.4

Anything else?

No response

[maggo]

Can confirm this is happening out of the box and with custom hashFn on the query client.

[W3stside]

+1 for this issue. looks like a BigInt non serialisable issue in the structuralSharing default logic. for my project the balance check was failing as args: [0n] is returned and react-query cant serialise the BigInt balance return

[phamhongphuc]

Workaround: Modify default QueryClient

https://wagmi.sh/react/getting-started#setup-tanstack-query

import { QueryClient } from '@tanstack/react-query';
import { structuralSharing } from '@wagmi/core/query';

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

[jxom]

I opened a PR to fix this upstream in React Query: TanStack/query#8030

[jxom]

Fixed https://github.com/TanStack/query/releases/tag/v5.55.3 – please update to @tanstack/[email protected]

[pclaesen]

@tanstack/[email protected]

Thank you so much :-D!

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Wagmi version. If you have any questions or comments you can create a new discussion thread.