EthersJS: How to get the result of a view function

Question

I really don't get it how to view the result of a simple view function. I have the following function that needs to query the token URI for an ERC-721 contract:

export const getTokenURI = async (tokenContract, tokenId) => {
  try {
    const contractABI = [
      "function tokenURI(uint256 _tokenId) returns (string memory)",
    ];
    const contractObject = new ethers.Contract(
      tokenContract,
      contractABI,
      signer
    );

    const result = await contractObject.tokenURI(tokenId);
    console.log(result);
    return result;
  } catch (err) {
    throw err;
  }
};

This logs the payload on the screenshot below:

Now, the tokenURI function returns a string of the URI, but I can't see it in the payload above. I suspect it is in the data field, but then how to decode it?

Am I missing something fundamental here?

Answer 1

You need to mark the function view in the Human Readable ABI. :)

const contractABI = [
  "function tokenURI(uint256 _tokenId) external view returns (string memory)",
];

If you don't do that, ethers.js thinks that it's a state changing method and hence builds a transaction for that, instead of a simple eth_call.

Answer 2

For anybody working out similar problem or with token 1155. You can go to remix and compile the ABIs for 721 and 1155 Metadata smart contracts. From then on just copy and export them into your code.

(Note, the 1155's function is called just uri())