Improve useReadContract example or TanStack Query docs

[brianonchain]

What is the type of issue?

Documentation is missing

What is the issue?

The most basic example of useReadContract is to read a ERC20 token balance. Required args include the account address and, as most protocols are multichain, the chain.id or chain.name. Both variables are fetched using another hook (useAccount). Therefore, useReadContract is a "dependent query" (https://tanstack.com/query/latest/docs/framework/react/guides/dependent-queries) and should use the "enabled" key: query: {enabled: address && chain? true : false}.

Most Wagmi developers may not be super experienced with React Query, so this is essential in my opinion. Or, at the very least, include it in the "Tanstack Query Guide" in the docs.

So, the updated example can be something like:

export default function Vaults() {
  const { chain, address } = useAccount();

  const { data: balance } = useReadContract({
    address: usdcAddress[chain?.name!]  // usdcAddress is a dictionary of chain names to addresses
    abi: abi,
    functionName: "balanceOf",
    args: [address!],
    query: {enabled: address && chain?.name ? true : false}
  })
}

Where did you find it?

https://wagmi.sh/react/guides/read-from-contract
or
https://wagmi.sh/react/guides/tanstack-query