React useEffect on page load with useApiContract

Moralis General
#1

Iā€™m trying to initialise my React website with live supply data from my NFT Smart Contract. Functionality works on localhost but not on a deployed website. Any idea why that might be? This is the code that Iā€™m using:

const {
    runContractFunction,
    data,
    error,
    isLoading,
    isFetching,
  } = useApiContract({
    address: smartcontractAddress,
    functionName: "frontEndTotalSupply",
    abi: abinft,
    chain: "mumbai"
  });

  function updateData() {
setValue(data);
  }

  useEffect(() => {
    runContractFunction()
  }, [])

  useEffect(() => {
    data ? updateData() : console.log("Loading...")
  }, [data, isFetching, isLoading])
#2

You can check for errors in the console, but a little suggestion I can give here is to add isInitialized as the dependency of this hook and then run the contract function if isInitialized is true.

1 Like
#3

Thank you, the isInitialized dependency solved it!

  useEffect(() => {
    if (isInitialized) {
      runContractFunction()
    }
  }, [isInitialized])