BigInt value can't be serialized in JSON

[tien]

Describe the bug

Using readContractQueryOptions with BigInt in args will result in a query key containing BigInt, crashing react-query serialization.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

No response

Wagmi Version

2.5.20

Viem Version

2.9.26

TypeScript Version

No response

Check existing issues

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

Anything else?

No response

[github-actions]

Hello @tien. Please provide a minimal reproduction using new.wagmi.sh for runtime issues or TypeScript Playground for type issues. Issues marked with "needs reproduction" will be closed if they have no activity within 3 days.

[tmm]

If you are using TanStack Query with a persister, you can use the built-in deserialize and serialize utils.

import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
import { deserialize, serialize } from 'wagmi'

const persister = createSyncStoragePersister({
  serialize,
  storage: window.localStorage,
  deserialize,
})

[tien]

@tmm I'm not persisting the data though, the query key them self contains BigInt values.

[tien]

@tmm this can be easily reproduced by doing

import { readContractQueryOptions } from 'wagmi/query';

// Observe that the query key which will be used by `react-query` contains BigInt 0n
// which will throw a serialization error
console.log(
  readContractQueryOptions(
    {},
    {
      args: [0n],
    }
  )
);

[tmm]

This test works fine 67ac1eb

Either attach a minimal reproduction or break the test.

[tien]

@tmm the test show that it's incorrect. See how the 0n bigint is included in the query key? This will break if you try to use it with react-query useQuery or useSuspenseQuery (as instructed in wagmi docs on how to use suspense)

[tien]

As in doing this will lead to a crash, because react query can't handle bigint key

useSuspenseQuery(readContractQueryOptions(config, {
   args: [0n],
});

This is the approach to do suspense from wagmi docs

On how react-query doesn't support bigint query:
TanStack/query#2450
TanStack/query#3082

[tmm]

the test show that it's incorrect

You said the bug could be reproduced by doing this. The test reflects that.

---

Either you need to handle serialization yourself or you can import hashFn from wagmi/query (used internally):

import { hashFn } from 'wagmi/query'

useSuspenseQuery(readContractQueryOptions(config, {
  args: [0n],
  queryKeyHashFn: hashFn, // for bigint support
});

[tien]

@tmm thanks for clarifying the manual serialisation part. That's what I'm doing right now.

But I didn't know that you are expected to do that, and that the lib expose a utility function for that. Maybe the docs should includes that as well.

[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 other comments you can create a new discussion.