cyotee/wagmi-react-hooks

Wagmi-React Hooks

Overview of React hooks.

Query vs Write Hooks

• Query hooks - Read data (useReadContract, useBalance, etc.)
• Write hooks - Send transactions (useWriteContract, useSendTransaction)

Common Query Hooks

// Contract reads
useReadContract({ abi, address, functionName, args })
useReadContracts({ contracts: [...] })

// Chain data
useBlockNumber({ chainId })
useBalance({ address, chainId })
useChainId()

// Transactions
useTransactionReceipt({ hash })
useWaitForTransactionReceipt({ hash })

Common Write Hooks

// Contract writes
useWriteContract()
useSimulateContract()

// Transactions
useSendTransaction()
useSignMessage()
useSignTypedData()

Watching for Changes

// Re-fetch on block changes
useReadContract({
  abi,
  address,
  functionName: 'balanceOf',
  args: [address],
  watch: true  // re-fetch when block changes
})

Query Options

useReadContract({
  abi,
  address,
  functionName: 'balanceOf',
  args: [address],
  query: {
    enabled: !!address,        // only fetch when address exists
    staleTime: 5 * 60 * 1000, // cache for 5 minutes
    refetchOnWindowFocus: false,
  }
})

Return Values

const { data, error, isError, isLoading, isPending, refetch } = useReadContract({
  abi, address, functionName, args
})

// data - the result (if successful)
// error - error object (if failed)
// isLoading / isPending - loading state
// isError - error state
// refetch - function to manually re-fetch