Wagmi: refetch data on connected wallet change

Question

  const {address} = useAccount({
      onConnect() {
        setUserAddress(address)
      }
  })

  const {data: req, refetch} = useContractReads({
  watch: true,
  contracts: [
    {
      ...myContract,
      functionName: 'myValue1',
    },
    {
      ...myContract,
      functionName: 'myValue2',
    },
    {
      ...anotherContract,
      functionName: "allowance",
      args: [userAddress, myContractAddress],
    }
  ],
  onSuccess(req){
    setMyValue1(req[0].result),
    setMyValue2(req[1].result),
    setAllowanceMyContract(req[2].result)
  }
});

I need to re-trigger the above useContractReads() whenever connected wallet changes, in order to refetch allowance, needed to execute contract function without triggering blockcain-level errors. If the page has the previous allowance cached, the dApp thinks it has allowance. But when I call contract functions from the frontend, I get an allowance error from the blockchain and Metamask doesn't pop-up to proceed with approval.

I found a nice snippet to detect account change, but still no solution to refetch the data. Detect account change snippet:

const { connector: activeConnector } = useAccount();
useEffect(() => {
    const handleConnectorUpdate = ({ account, chain }: ConnectorData) => {
        if (account) {
            console.log("new account", account);
        } else if (chain) {
            console.log("new chain", chain);
        }
    };

    if (activeConnector) {
        activeConnector.on("change", handleConnectorUpdate);
    }

    return () => activeConnector?.off("change", handleConnectorUpdate) as any;
}, [activeConnector]);

About the refetch, a user from this site suggests this solution, but in my case it throws an exception error. How to refech queries in wagmi

Error:

Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter

Answer 1

How about useEffect? You can track for address.

const { address, isConnected } = useAccount();
useEffect(() => {
    //do something
}, [address])