Lesson 15: TokenURI undefined.

[AtulBlockDev]

I cannot see tokenURI in my frontend console. Stuck here from a long time.

repo
https://github.com/AtulBlockDev/Hardhat-NFT-MarketPlace-FrontEnd (frontend)
https://github.com/AtulBlockDev/hardhat-nft-marketplace(backend)

[alfaqi]

Is subgraphQueries working well or not

const GET_ACTIVE_ITEMS = gql`
  {
    activeItems(
      first: 5
      where: { buyer: "0x0000000000000000000000000000000000000000" }
    ) {
      id
      buyer
      seller
      nftAddress
      tokenId
      price
    }
  }
`;

then check the output of values.

[AtulBlockDev]

i am do getting the output values because i can even show them on my frontend.

[AtulBlockDev]

@alymurtazamemon Help mate!!!!

[alfaqi]

where is the code of graph

make sure the address of Nft Marketplace is matched up with the deployed address

[AtulBlockDev]

where is the code of graph

make sure the address of Nft Marketplace is matched up with the deployed address

Hello brother. Is there any role of NFT Marketplace address here? My Token URI is coming undefined, which is present in the Basic NFT contract. Somehow, my runContractFunction isn't working and I can't be able to execute that function on the FrontEnd to extract the tokenURI. By the way, I checked it already. My both BasicNFT Address and Marketplace Address is deployed on Sepolia and there's no issue with it. Also i am able to retrieve all the information from graph too like the nftAddress and tokenId because i can console.log it on the console. I guess there's something wrong with the tokenId params, because in my basicNFT code, in tokenURI function, i have only uint256 in parameter, not uint256 tokenId. Can you confirm if this is causing the issue?

[alymurtazamemon]

@AtulBlockDev Here it is working, just correct these things;

1. update the token uri function;

function tokenURI(uint256 tokenId) public view override returns (string memory) {
    require(_exists(tokenId), "ERC721Metadata: URI query for nonexistent token");
    return TOKEN_URI;
}

2. Compile it and update the abi in the frontend.
3. Then use this token id as a parameter with this function;

const { runContractFunction: getTokenURI } = useWeb3Contract({
    abi: basicNftAbi,
    contractAddress: nftAddress,
    functionName: "tokenURI",
    params: {
        tokenId: tokenId,
    },
});

4. Now this line const tokenURI = await getTokenURI(); will get the token uri.

[AtulBlockDev]

@alymurtazamemon just one more question. I have to re deploy the NFTMarketplace Contract too, right? Because i already listed NFTs on it with faulty tokenURI. It's too confusing.

[AtulBlockDev]

@alymurtazamemon
I have to re deploy the NFTMarketplace Contract too, right? Because i already listed NFTs on it with faulty tokenURI???

[alymurtazamemon]

@AtulBlockDev You NFTMarketplace contract is deployed and graph is listening for its events with any smart contract NFT address;

function listItem(
    address nftAddress,
    uint256 tokenId,
    uint256 price
)

If you redeploy the nft contract and call this list function then graph will record the event with this nft address.

But yes it will contain the old ones as well so it is not mandatory but you can redeploy it with updated nft address.

[TheDude-dev]

@alymurtazamemon I've gone through all the steps you mentioned but still running into the same error. I'm sharing my repo in a minute.

[TheDude-dev]

@alymurtazamemon here's my repo:
https://github.com/Bobodilo/graph-nft-marketplace-fcc
https://github.com/Bobodilo/nextjs-nft-marketplace-thegraph-fcc
https://github.com/Bobodilo/Harhad-nft-market-place-fcce

Help mate!