Refetch after mutation

[niera26]

Hi guys,

I'm only wondering what's the best way to refetch data after firing a mutation using useContractWrite().

I tried to put some refetch() inside the onSucess parameter of writeContract() but most of the time it fires before the data actually updated on the blockchain. Using the watch block approach to refetch data every block works but it is making way too many useless rpc calls.

How do you guys handle this problem?

[tmm]

Check out useWaitForTransaction

https://wagmi.sh/react/api/hooks/useWaitForTransactionReceipt

[niera26]

I know about it but how does it help in this context? It only has one callback onReplaced.

[tmm]

You can use useEffect to run any side effects when the status changes. Could also set up a listener with the core waitForTransaction action.

[eliobricenov]

For @niera26 and everyone wondering, as @tmm mentioned you can leverage the core waitForTransaction like this:

import { useConfig, useWriteContract } from "wagmi";
import { waitForTransactionReceipt } from "@wagmi/core";

function Component() {
  const config = useConfig();
  const { writeContract } = useWriteContract();

  const handleTransactionSubmitted = async (txHash: string) => {
    const transactionReceipt = await waitForTransactionReceipt(config, {
      hash: txHash as `0x${string}`,
    });

    // at this point the tx was mined

    if (transactionReceipt.status === "success") {
      // execute your logic here
    }
  };

  const executeChange = () => {
    writeContract(
      {
        abi,
        address: "0x6b175474e89094c44da98b954eedeac495271d0f",
        functionName: "transferFrom",
        args: [
          "0xd2135CfB216b74109775236E36d4b433F1DF507B",
          "0xA0Cf798816D4b9b9866b5330EEa46a18382f251e",
          123n,
        ],
      },
      {
        onSuccess: handleTransactionSubmitted,
      }
    );
  };

  return <button onClick={executeChange}>Execute Change</button>;
}

Happy coding!