Lesson 15 NFT are loading and are not displayed

[NeoRusi]

Hi I have finished lesson 15 and for a certain reason I ran into an error
The NFTs are only loading and not showing

Here is the link to the backend : https://github.com/NeoRusi/hardhat-nft-marketplace
Here is the link to the front-end: https://github.com/NeoRusi/nextjs-nft-marketplace-the-graph-io

[FrankYChills]

Hey @NeoRusi i forked your repo and the images are being displayed.

[NeoRusi]

So everything works as it should ?

[NeoRusi]

@FrankYChills You copied my repo and everything worked as it should ?

[NeoRusi]

Because as you see I have the NFT's in the console.log but they are endlessly loading (

[NeoRusi]

Maybe the problem is in the warning that the console outputs?

[FrankYChills]

@NeoRusi yes that was working previously.I think now you changed something within the graph.Can you provide the latest DEVELOPMENT QUERY URL of your subgraph.

[ccdagreat]

I'm assuming you are currently getting the correct query in thegraph playground.

Also, check if you are using the goerli testnet in your MetaMask wallet.

[alymurtazamemon]

@NeoRusi print out these variables on console and see what they are printing

(
loading || !listedNfts ? (
    <div>Loading...</div>
) 

loading and listedNfts

[alymurtazamemon]

@NeoRusi I think you are seeing the wrong console.

[NeoRusi]

@alymurtazamemon I have refreshed actually this but still no tokenURI

[alymurtazamemon]

@NeoRusi Sorry man, I could not help from here!

[NeoRusi]

@alymurtazamemon ok just the last question what are your node.js--version and git--version

[alymurtazamemon]

@NeoRusi v16.18.0 and git version 2.38.0. But you should not worry about these the issue is not related to these. Just close the computer/labtop whatever and come back tomorrow. Sometimes things don't work as expected.

[FrankYChills]

Hey @NeoRusi i don't know why its not working on your device but it is working on mine -

[FrankYChills]

@NeoRusi This might help.Try this.. Go to your graph folder => then go to => schema.graphql and change @entity(immutable: true) { to @entity { Change all 4 of them.then do yarn deploy to redeploy the updated schema (new version) .Then check if it worked!

[NeoRusi]

@FrankYChills , @alymurtazamemon I have done the steps that you asked for now as you see the graph is deployed correctly

But the NFT are still not displayed :(
Maybe the problem is in the code ?

import styles from "../styles/Home.module.css"
import { useMoralisQuery, useMoralis } from "react-moralis"
import NFTBox from "../components/NFTBox"
import networkMapping from "../constants/networkMapping.json"
import GET_ACTIVE_ITEMS from "../constants/subgraphQueries"
import { useQuery } from "@apollo/client"

export default function Home() {
    const { isWeb3Enabled, chainId } = useMoralis()
    const chainString = chainId ? parseInt(chainId).toString() : "31337"
    const marketplaceAddress = networkMapping[chainString].NFTMarketplace[0]

    const { loading, error, data: listedNfts } = useQuery(GET_ACTIVE_ITEMS)

    return (
        <div className="container mx-auto">
            <h1 className="py-4 px-4 font-bold text-2xl">Recently Listed</h1>
            <div className="flex flex-wrap">
                {isWeb3Enabled ? (
                    loading || !listedNfts ? (
                        <div>Loading...</div>
                    ) : (
                        listedNfts.activeItems.map((nft) => {
                            console.log(nft)
                            const { price, nftAddress, tokenId, seller } = nft
                            return (
                                <NFTBox
                                    price={price}
                                    nftAddress={nftAddress}
                                    tokenId={tokenId}
                                    marketplaceAddress={marketplaceAddress}
                                    seller={seller}
                                    key={`${nftAddress}${tokenId}`}
                                />
                            )
                        })
                    )
                ) : (
                    <div>Web3 Currently Not Enabled</div>
                )}
            </div>
        </div>
    )
}

[NeoRusi]

@alymurtazamemon , @FrankYChills or maybe the problem is in the sell-nft

import Head from "next/head"
import Image from "next/image"
import styles from "../styles/Home.module.css"
import { Form, useNotification } from "web3uikit"
import { ethers } from "ethers"
import nftAbi from "../constants/ BasicNft.json"
import { useMoralis, useWeb3Contract } from "react-moralis"
import nftMarketplaceAbi from "../constants/ NftMarketplace.json"
import networkMapping from "../constants/networkMapping.json"

export default function Home() {
    const { chainId } = useMoralis()
    const chainString = chainId ? parseInt(chainId).toString() : "31337"
    const marketplaceAddress = "0x1797679aF31A350302683904f5D7E00BCE4dd44f"
    const { runContractFunction } = useWeb3Contract()
    const dispatch = useNotification()
    async function approveAndlist(data) {
        console.log("Approving.....")
        const nftAddress = data.data[0].inputResult
        const tokenId = data.data[1].inputResult
        const price = ethers.utils.parseUnits(data.data[2].inputResult, "ether").toString()
        const approveOptions = {
            abi: nftAbi,
            contractAddress: nftAddress,
            functionName: "approve",
            params: {
                to: marketplaceAddress,
                tokenId: tokenId,
            },
        }
        await runContractFunction({
            params: approveOptions,
            onSuccess: () => handleApproveSuccess(nftAddress, tokenId, price),
            onError: (error) => {
                console.log(error)
            },
        })
    }
    async function handleApproveSuccess(nftAddress, tokenId, price) {
        console.log("Ok! Now time to list")
        const listOptions = {
            abi: nftMarketplaceAbi,
            contractAddress: marketplaceAddress,
            functionName: "listItem",
            params: {
                nftAddress: nftAddress,
                tokenId: tokenId,
                price: price,
            },
        }
        await runContractFunction({
            params: listOptions,
            onSuccess: handleListSuccess,
            onError: (error) => console.log(error),
        })
    }
    async function handleListSuccess() {
        dispatch({
            type: "success",
            message: "NFT Listing",
            title: "NFT Listed",
            position: "topR",
        })
    }
    return (
        <div className={styles.container}>
            <Form
                onSubmit={approveAndlist}
                data={[
                    {
                        name: "NFT Address",
                        type: "text",
                        inputwidth: "50%",
                        value: "",
                        key: "nftAddress",
                    },
                    {
                        name: "Token ID",
                        type: "number",
                        value: "",
                        key: "tokenId",
                    },
                    { name: "Price (in ETH)", type: "number", value: "", key: "price" },
                ]}
                title="Sell your NFT"
                id="Main Form"
            />
        </div>
    )
}

[NeoRusi]

Because even with a correct graph indexer I don't see the NFT's and I am on the goerli testate and metamask is enabled

[NeoRusi]

@FrankYChills , @alymurtazamemon I still see this

So you see that the NFT's are defined the graph works correctly but something probably goes wrong what I don't understand

[NeoRusi]

@alymurtazamemon , @FrankYChills I have tinkered with this problem and understood that the problem is in this error

Which my console outputs so as I understand if I solve this problem the NFT's should be displayed

[FrankYChills]

@NeoRusi i have no idea what error is this.What's your npx and node version.Try to update them. Try to reset the account and add some goerli eth to that.Hope this works.

[NeoRusi]

@FrankYChills Thank for your impact I have also tried this but it still didn't work

[FrankYChills]

@NeoRusi try to change the browser.If that doesn't work try to fork my my repo (nextjs marketplace) and run it on your system and check that if my project works on yours.

[NeoRusi]

@FrankYChills Thanks for your impact no need to try something else because I see the only solution in this situation

[NeoRusi]

Hi @PatrickAlphaC I was following the course and I have finished hardhat-nft-marketplace but for a certain reason I ran into an error
the images are not being displayed, as you see we have tried different solutions here , unfortunately they had no result , so I decided to ask you to have a view on this situation :)
here is the contracts repo :https://github.com/NeoRusi/hardhat-nft-marketplace
here is the graph : https://github.com/NeoRusi/graph-nft-marketplace-io
here is the front-end: https://github.com/NeoRusi/nextjs-nft-marketplace-the-graph-io

[Evanatie]

@NeoRusi I face the same issue,Do you remember the solution?

[wolf3i]

Hi @NeoRusi @Evanatie,
I am also facing this issue, but even when I switched PCs it still happens... Would you please let me know what your solution was?

[wolf3i]

alright, to anyone also facing the issue:
the useWeb3Contract getTokenURI didnt work for me:

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

instead i put this at the start of the updateUI() function:

    const provider = new ethers.providers.Web3Provider(window.ethereum)
    const basicNft = new ethers.Contract(nftAddress, nftAbi, provider)
    const tokenURI = await basicNft.tokenURI(tokenId)

My Repo:
https://github.com/WolfgangNI/nextjs-nft-marketplace-fcc/blob/4c25b2b9103e23ab566ed733e4a4eefea10282e8/pages/index.js

what do you guys think of this solution? I feel like is it not the correct way... I would like to use useWeb3Contract but for some reason it just doesnt get me the tokenURI. @alymurtazamemon what do you think?

[alymurtazamemon]

@WolfgangNI Make sure your function name matches with the one in the contract ABI and make sure your function is external or public, or you should check whether it is exist in a ABI or not. Sometimes people face this issue due to type in the useWeb3Contract params. You should also check all of the variables which you pass to useWeb3Contract, they should not be undefined.

[wolf3i]

thanks Aly!
Ok the problem was that I used params in the useWeb3Contract runContractFunction: tokenURI, where my tokenURI function of BasicNft doesn't take params 🤦

 params: {
            tokenId: tokenId,
        },

function tokenURI(uint256 /* tokenId */) public view override returns (string memory) {
        // require (exists(tokenId))
        return TOKEN_URI;
    }

just deleting the params from the useWeb3Contract runContractFunction: tokenURI fixed the issue!

[npa528]

I am having the same problem.
My repo is: https://github.com/npa528/nextjs-nft-marketplace-thegraph

I sort of bypass this problem by getting the public string TOKEN_URI from my contract. Public method 'tokenURI()' does not return the string.

    const { runContractFunction: getTokenURI } = useWeb3Contract({
        abi: nftAbi,
        contractAddress: nftAddress,
        functionName: "TOKEN_URI",
    })

I cannot figure out why

[RohitAggarwal04]

hi I am facing the same problem and I think the problem lies in the code you sent above. did you get any solution ?

[npa528]

No I didn't find anything better than this.

[RohitAggarwal04]

I am having error for re-rendering too many times in react.
Please suggest me what I should do

[palmcivet7]

I had the same problem and solved it by changing the following in my BasicNft.sol contract.

I uncommented a line in this function:

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

to

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

and I added this line at the top of the contract:

event DogMinted(uint256 indexed tokenId);

There may be other reasons the tokenURI is undefined, but hopefully this helps someone.

[RohitAggarwal04]

I used this method to obtain tokenUri const{ runContractFunction: getTokenURI } = useWeb3Contract({ abi: nftAbi, contractAddress: nftAddress, functionName: "TOKEN_URI", }) and it was all going fine but getting re-render error what should i do?