fix: useContractRead & useContractReads data instability

.changeset/brown-carrots-fail.md

@@ -0,0 +1,5 @@
+---
+'wagmi': patch
+---
+
+Added an `isDataEqual` config option to `useContractRead`, `useContractReads` & `useContractInfiniteReads` to define whether or not that data has changed. Defaults to `deepEqual`.

.changeset/smart-lemons-train.md

@@ -0,0 +1,5 @@
+---
+'wagmi': patch
+---
+
+Fixed an issue where `useContractRead` & `useContractReads` would return unstable data.

docs/pages/docs/hooks/useContractInfiniteReads.en-US.mdx

@@ -429,6 +429,35 @@ function App() {
 }
 ```
 
+### isDataEqual (optional)
+
+Determines if the data has changed or not. Defaults to `deepEqual`.
+
+```tsx {20}
+import { useContractInfiniteReads } from 'wagmi'
+
+function App() {
+  const { data, isError, isLoading } = useContractInfiniteReads({
+    cacheKey: 'mlootAttributes',
+    contracts: (param = 0) => [
+      {
+        addressOrName: '0x1dfe7ca09e99d10835bf73044a23b73fc20623df',
+        contractInterface: mlootABI,
+        functionName: 'getChest',
+        args: [param],
+      },
+      {
+        addressOrName: '0x1dfe7ca09e99d10835bf73044a23b73fc20623df',
+        contractInterface: mlootABI,
+        functionName: 'getWaist',
+        args: [param],
+      },
+    ],
+    isDataEqual: (prev, next) => prev === next,
+  })
+}
+```
+
 ### staleTime (optional)
 
 Time (in ms) after data is considered stale. If set to `Infinity` the data will never be considered stale. Defaults to `0`.

docs/pages/docs/hooks/useContractRead.en-US.mdx

@@ -217,6 +217,23 @@ function App() {
 }
 ```
 
+### isDataEqual (optional)
+
+Determines if the data has changed or not. Defaults to `deepEqual`.
+
+```tsx {11}
+import { useContractRead } from 'wagmi'
+
+function App() {
+  const contractRead = useContractRead({
+    addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
+    contractInterface: wagmigotchiABI,
+    functionName: 'getHunger',
+    isDataEqual: (prev, next) => prev === next,
+  })
+}
+```
+
 ### staleTime (optional)
 
 Time (in ms) after data is considered stale. If set to `Infinity` the data will never be considered stale. Defaults to `0`.

docs/pages/docs/hooks/useContractReads.en-US.mdx

@@ -351,6 +351,30 @@ function App() {
 }
 ```
 
+### isDataEqual (optional)
+
+Determines if the data has changed or not. Defaults to `deepEqual`.
+
+```tsx {15}
+import { useContractReads } from 'wagmi'
+
+function App() {
+  const { data, isError, isLoading } = useContractReads({
+    contracts: [
+      {
+        ...wagmigotchiContract,
+        functionName: 'getAlive',
+      },
+      {
+        ...wagmigotchiContract,
+        functionName: 'getBoredom',
+      },
+    ],
+    isDataEqual: (prev, next) => prev === next,
+  })
+}
+```
+
 ### staleTime (optional)
 
 Time (in ms) after data is considered stale. If set to `Infinity` the data will never be considered stale. Defaults to `0`.

packages/core/src/actions/contracts/multicall.test.ts

@@ -169,7 +169,7 @@ describe('multicall', () => {
               "hex": "0x05a6db",
               "type": "BigNumber",
             },
-            undefined,
+            null,
           ]
         `)
       })

packages/core/src/actions/contracts/multicall.ts

@@ -90,7 +90,7 @@ export async function multicall<Data extends any[] = Result[]>({
     ...params,
   )) as AggregateResult
   return results.map(({ returnData, success }, i) => {
-    if (!success) return undefined
+    if (!success) return null
     const { addressOrName, contractInterface, functionName } = <
       MulticallContract
     >contracts[i]
@@ -103,7 +103,7 @@ export async function multicall<Data extends any[] = Result[]>({
       })
       if (!allowFailure) throw err
       console.warn(err.message)
-      return undefined
+      return null
     }
 
     const contract = getContract({
@@ -118,7 +118,7 @@ export async function multicall<Data extends any[] = Result[]>({
       return Array.isArray(result) && result.length === 1 ? result[0] : result
     } catch (err) {
       if (!allowFailure) throw err
-      return undefined
+      return null
     }
   }) as Data
 }

packages/core/src/actions/contracts/readContracts.test.ts

@@ -292,7 +292,7 @@ describe('readContracts', () => {
             "hex": "0x05a6db",
             "type": "BigNumber",
           },
-          undefined,
+          null,
         ]
       `)
     })

packages/react/src/hooks/contracts/useContractInfiniteReads.ts

@@ -7,6 +7,7 @@ import {
 
 import { InfiniteQueryConfig, QueryFunctionArgs } from '../../types'
 import { useInfiniteQuery } from '../utils'
+import { deepEqual } from '../../utils'
 
 export type UseContractInfiniteReadsConfig<TPageParam = any> =
   InfiniteQueryConfig<ReadContractResult, Error> &
@@ -77,6 +78,7 @@ export function useContractInfiniteReads<TPageParam = any>({
   contracts,
   enabled: enabled_ = true,
   getNextPageParam,
+  isDataEqual = deepEqual,
   keepPreviousData,
   onError,
   onSettled,
@@ -99,8 +101,9 @@ export function useContractInfiniteReads<TPageParam = any>({
   return useInfiniteQuery(queryKey_, queryFn({ contracts }), {
     cacheTime,
     enabled,
-    keepPreviousData,
     getNextPageParam,
+    isDataEqual,
+    keepPreviousData,
     select,
     staleTime,
     suspense,

packages/react/src/hooks/contracts/useContractRead.ts

@@ -3,14 +3,13 @@ import {
   ReadContractConfig,
   ReadContractResult,
   readContract,
-  watchReadContract,
 } from '@wagmi/core'
-import { hashQueryKey, useQueryClient } from 'react-query'
+import { hashQueryKey } from 'react-query'
 
 import { QueryConfig, QueryFunctionArgs } from '../../types'
-import { parseContractResult } from '../../utils'
+import { deepEqual, parseContractResult } from '../../utils'
 import { useBlockNumber } from '../network-status'
-import { useChainId, useQuery } from '../utils'
+import { useChainId, useInvalidateOnBlock, useQuery } from '../utils'
 
 type UseContractReadArgs = ReadContractConfig & {
   /** If set to `true`, the cache will depend on the block number */
@@ -76,6 +75,7 @@ export function useContractRead({
   cacheOnBlock = false,
   cacheTime,
   enabled: enabled_ = true,
+  isDataEqual = deepEqual,
   select,
   staleTime,
   suspense,
@@ -121,40 +121,12 @@ export function useContractRead({
     return enabled
   }, [addressOrName, blockNumber, cacheOnBlock, enabled_, functionName])
 
-  const client = useQueryClient()
-  React.useEffect(() => {
-    if (enabled) {
-      const unwatch = watchReadContract(
-        {
-          addressOrName,
-          args,
-          chainId,
-          contractInterface,
-          functionName,
-          overrides,
-          listenToBlock: watch && !cacheOnBlock,
-        },
-        (result) => client.setQueryData(queryKey_, result),
-      )
-      return unwatch
-    }
-  }, [
-    addressOrName,
-    args,
-    cacheOnBlock,
-    chainId,
-    client,
-    contractInterface,
-    enabled,
-    functionName,
-    overrides,
-    queryKey_,
-    watch,
-  ])
+  useInvalidateOnBlock({ enabled: watch && !cacheOnBlock, queryKey: queryKey_ })
 
   return useQuery(queryKey_, queryFn, {
     cacheTime,
     enabled,
+    isDataEqual,
     queryKeyHashFn,
     select: (data) => {
       const result = parseContractResult({

packages/react/src/hooks/contracts/useContractReads.ts

@@ -1,16 +1,15 @@
 import * as React from 'react'
-import { hashQueryKey, useQueryClient } from 'react-query'
+import { hashQueryKey } from 'react-query'
 import {
   ReadContractsConfig,
   ReadContractsResult,
   readContracts,
-  watchReadContracts,
 } from '@wagmi/core'
 
 import { QueryConfig, QueryFunctionArgs } from '../../types'
 import { useBlockNumber } from '../network-status'
-import { useChainId, useQuery } from '../utils'
-import { parseContractResult } from '../../utils'
+import { useChainId, useInvalidateOnBlock, useQuery } from '../utils'
+import { deepEqual, parseContractResult } from '../../utils'
 
 export type UseContractReadsConfig = QueryConfig<ReadContractsResult, Error> &
   ReadContractsConfig & {
@@ -63,6 +62,7 @@ export function useContractReads({
   contracts,
   overrides,
   enabled: enabled_ = true,
+  isDataEqual = deepEqual,
   keepPreviousData,
   onError,
   onSettled,
@@ -93,24 +93,12 @@ export function useContractReads({
     return enabled
   }, [blockNumber, cacheOnBlock, contracts, enabled_])
 
-  const client = useQueryClient()
-  React.useEffect(() => {
-    if (enabled) {
-      const unwatch = watchReadContracts(
-        {
-          contracts,
-          overrides,
-          listenToBlock: watch && !cacheOnBlock,
-        },
-        (result) => client.setQueryData(queryKey_, result),
-      )
-      return unwatch
-    }
-  }, [cacheOnBlock, client, contracts, enabled, overrides, queryKey_, watch])
+  useInvalidateOnBlock({ enabled: watch && !cacheOnBlock, queryKey: queryKey_ })
 
   return useQuery(queryKey_, queryFn, {
     cacheTime,
     enabled,
+    isDataEqual,
     keepPreviousData,
     queryKeyHashFn,
     staleTime,

packages/react/src/hooks/utils/index.ts

@@ -1,5 +1,6 @@
 export { useBaseQuery, useQuery, useInfiniteQuery } from './query'
 export { useChainId } from './useChainId'
 export { useForceUpdate } from './useForceUpdate'
+export { useInvalidateOnBlock } from './useInvalidateOnBlock'
 export { useSyncExternalStore } from './useSyncExternalStore'
 export { useSyncExternalStoreWithTracked } from './useSyncExternalStoreWithTracked'

packages/react/src/hooks/utils/useInvalidateOnBlock.ts

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { QueryKey, useQueryClient } from 'react-query'
+
+import { useBlockNumber } from '../network-status'
+
+export function useInvalidateOnBlock({
+  enabled,
+  queryKey,
+}: {
+  enabled?: boolean
+  queryKey: QueryKey
+}) {
+  const { data: blockNumber } = useBlockNumber({
+    enabled,
+    watch: enabled,
+  })
+  const queryClient = useQueryClient()
+
+  const startBlock = React.useRef<number>()
+  React.useEffect(() => {
+    if (!enabled) return
+    if (blockNumber === startBlock.current) return
+    if (!startBlock.current) {
+      startBlock.current = blockNumber
+      return
+    }
+
+    queryClient.invalidateQueries(queryKey)
+  }, [blockNumber, enabled, queryClient, queryKey])
+}

packages/react/src/types/index.ts

@@ -12,6 +12,7 @@ export type QueryConfig<Data, Error> = Pick<
   UseQueryOptions<Data, Error>,
   | 'cacheTime'
   | 'enabled'
+  | 'isDataEqual'
   | 'keepPreviousData'
   | 'staleTime'
   | 'select'
@@ -26,6 +27,7 @@ export type InfiniteQueryConfig<Data, Error> = Pick<
   | 'cacheTime'
   | 'enabled'
   | 'getNextPageParam'
+  | 'isDataEqual'
   | 'keepPreviousData'
   | 'select'
   | 'staleTime'