useStarknetCall always returns undefined

[clacladev]

Hello team! I have a local web app I am developing, pointing to Goerli with the latest starknet-react package (as of this morning) and the latest ArgentX setup.

In a page I am able to successfully invoke the mint on this NFT contract I deployed. But on another page I am failing to call a function, the totalSupply or name for example.

export default function ChannelList() {
  const { account } = useStarknet()
  const { data: channelsCount, loading, error, refresh } = useStarknetCall({ contract: useChannelContract(), method: 'totalSupply' })
  const [shouldRefresh, setShouldRefresh] = useState(true)

  console.log(`channelsCount: ${channelsCount}, loading: ${loading}, error: ${error}`)

  useEffect(() => {
    if (!account || !shouldRefresh) return
    setShouldRefresh(false)
    refresh()
    console.log('>>> refresh')
  }, [account, shouldRefresh, refresh])

  return (... )
}

In the console logs I see that the hook is loading then stops, but the data returned is always undefined.

channelsCount: undefined, loading: true, error: undefined
>>> refresh
channelsCount: undefined, loading: false, error: undefined
channelsCount: undefined, loading: false, error: undefined

I even open another page, reload, connect the wallet, then navigate to this one, so I am sure that when this component loads the first time the account is connected correctly.

Any idea why this issue?

[fracek]

useStarknetCall requires args: [] if the function does not take any arguments. It's implemented this way so that you can force the hook not to fetch data if you know you don't have all the required arguments.

Also I recommend changing useChannelContract to its own variable const { contract } = useChannelContract().

[clacladev]

Thanks a lot for the advices. It would be useful in the docs to have two simple components that use the call and invoke hooks, so it's more immediate. And I could have avoided wasting your time :D

Thanks a lot for the help!