Update useReadContract Example To Show Tanstack Params

[codingwithmanny]

What is the type of issue?

Something else

What is the issue?

Context

This may be opinionated, but I believe that this will help new devs understand tanstack a bit better, and avoid multiple triggered RPC requests sent and prevent being rate limited, and ultimately create a slightly better development process.

The initial example for useReadContract shows how a hook that fires the request right away. The dilemma is when a developer has multiple useReadContracts in the same file and aren't seeing how to avoid triggering a request right away.

This can then lead to developers handling the hook with another hook (aka useEffect) or placing each of these useReadContract hooks in their own components and not showing it until it's absolutely needed, which leads to excessive React components.

Example

  {anotherContractResult?.data
     ? <DependentComponentThatMakesAnotherContractRead}
     : null
  }

From an RPC perspective, if the app is reliant on the injected provider, and has multiple requests, there is a good chance that they will start to get rate limited because of mishandling of requests.

Proposed Solution

Show in the usage section, another example with "controlled requests" / "alternative approach" (open to suggestions on the name) to show that new devs don't have to overcome this with additional hooks, or multiple components.

import { useReadContract } from 'wagmi'
import { abi } from './abi'

function App() {
  const result = useReadContract({
    abi,
    address: '0x6b175474e89094c44da98b954eedeac495271d0f',
    functionName: 'totalSupply',
  },
  {
    enabled: false // Tanstack config to prevent the request from being triggered onload
  });

  const onClickButton = () => {
    result.refetch();
  };

  return <>
    <button onClick={onClickButton}>Fetch</button>
  </>; 
}

Where did you find it?

• https://wagmi.sh/react/api/hooks/useReadContract
• https://wagmi.sh/react/api/hooks/useReadContracts
• https://wagmi.sh/react/api/hooks/usePrepareTransactionRequest
• https://wagmi.sh/react/api/hooks/useBalance
• etc

[tmm]

Seems like the thing that trips folks up (or at least what we see a lot) is setting args dynamically, e.g. with useState. Think it makes the most sense to add a section with this to the TanStack Query section of the docs.

[Yuripetusko]

Despite docs mentioning tanStack react-query on getting started / wagmi provider docs, I've seen a lot of people still not understanding that all hooks are wrapped with react-query and response fields mimic that of react query as well as that query options. So IMO it's a good idea to remind people about it somewhere and link to react-query docs perhaps

[tmm]

Yeah down for linking to it somewhere. Also, not all hooks use TanStack Query, e.g. useAccount, useConfig, useClient, but point taken!

[codingwithmanny]

Definitely open to having anything mentioned or emphasized, to get devs just use the idea that they can control hooks/requests better.

[tmm]

We mention TanStack Query in a bunch of places already and it's the first guide in the guides section so closing this for now. Feel free to open a PR with something more actionable. Incomplete list of places it's mentioned:

• Why Wagmi
• Installation
• Getting Started > Installation
• Getting Started > Setup
• TanStack Query guide
• FAQ > How does Wagmi work?
• query property on individual hooks
• TanStack Query exports for individual hooks

[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.