Allow useContractRead(s) with missing arguments

[joshlang]

Consider this scenario:

const userAddress = useContractRead( ...fetch user address... ).data
const userData = useContractRead({ abi, address, functionName, args: [userAddress] }).data

We're trying to 1) Load a user's address and 2) Load some data based on the user's address

But this won't work, because args is of type 0x${string} and userAddress may be undefined until it loads.

One workaround:

const userData = useContractRead({ abi, address, functionName, args: [userAddress || "0x"], enabled: !!userAddress).data

But that's wonky

Instead, what if useContractRead allowed arguments to be undefined and simply did not execute if an undefined argument was passed (similar to if address is missing)

This is an example implementation:

export type Optional<T> = { [K in keyof T]?: T[K] }

export function useReadWithOptionalArgsAndVeryLongName<TAbi extends Abi | readonly unknown[], TFunctionName extends string, TSelectData = ReadContractResult<TAbi, TFunctionName>>(
    config: UseContractReadConfig<TAbi, TFunctionName, TSelectData> & { args?: Optional<UseContractReadConfig<TAbi, TFunctionName, TSelectData>["args"]> }
) {
    if (config.enabled !== false && Array.isArray(config.args)) {
        for (let arg of config.args) {
            if (arg === undefined || arg === null) {
                config.enabled = false
                break
            }
        }
    }
    return useContractRead(config)
}

Also: I've found myself implementing convenience hooks for these other two scenarios as well:

• One abi + address + function name ... Multiple reads (passing an array of argument arrays)
• One abi + function name + argument array ... Multiple reads (passing an array of contract addresses)

^-- to work around two limitations: 1) the missing arguments, as mentioned above ... and 2) the fact that if anything is missing in useContractReads contracts array, the entire hook won't run

[tmm]

args can be undefined already

import { useContractRead, erc20ABI } from 'wagmi'

useContractRead({
  address: '0x',
  abi: erc20ABI,
  functionName: 'balanceOf',
  args: ['0x'],
  // ^? (property) args?: readonly [`0x${string}`] | undefined
}).data

[oxSaturn]

Currently it's sort of painful when trying to use the data returned by previous hook, you need to narrow down the types in both enabled and args, e.g.,

[joshlang]

The arguments array can be undefined, yes

My suggestion is to allow elements of the array be undefined - and, if undefined, don't run the hook.

[tmm]

Interesting idea. Can think about it. Adds some runtime overhead and could be confusing for folks (does it work with deeply nested array/tuple parameters, etc.).

[naps62]

I don't like this idea. undefined is already a wonky topic in javascript/typescript. having a behaviour where "anything undefined somewhere in args is essentially equivalent to enabled: false seems very hacky to me.
args itself being undefined has a concrete meaning: some functions don't have args at all, and would be clunky to require an empty array all the time. specific arguments being undefined has no equivalent meaning on EVM. would these default to 0x00 if they end up being called? that sounds like it would lead to more unexpected behaiour

I also like the explicitness of having to set enabled: !!userData

I do agree that the typings make it awkward to use, because if enabled: false, then our current args values may not be correct yet, and that shouldn't necessarily matter
could this be specified as a discriminated union?

interface Disabled {
  emabled: false;
   args?: readonly [`0x${string}` | undefined] | undefined
}
 
interface Enabled {
  enabled: true;
  args?: readonly [`0x${string}`] | undefined
}
 
type ReadCall =Enabled | Disabled;

not sure how well supported this pattern is, and how confortable it is for the language server...

[joshlang]

I don't know your codebase well enough to do a PR, but here's some code for a starting point, if it's helpful

anyMissingArgs.ts:

function checkObject(value: any, depth: number): boolean {
    if (depth > 100) { return true }
    if (value === undefined || value === null) { return true }
    if (Array.isArray(value)) {
        if (checkArray(value, depth + 1)) { return true }
    }
    else if (typeof value === "object" && value.constructor.name === "Object") {
        if (checkArray(Object.values(value), depth + 1)) { return true }
    }
    return false
}
function checkArray(values: any[], depth: number): boolean {
    return values.some(x => checkObject(x, depth + 1))
}
export default function anyMissingArgs(args: any[]): boolean {
    return checkArray(args, 0)
}

useContractRead.ts:

...
const enabled = React.useMemo(() => {
    let enabled = Boolean(enabled_ && abi && address && functionName)
    if (cacheOnBlock) enabled = Boolean(enabled && blockNumber)
    if (enabled && Array.isArray(args)) enabled = Boolean(!anyMissingArgs(args))
    return enabled
  }, [abi, address, blockNumber, cacheOnBlock, enabled_, functionName])
...