[SOLVED] How to get NFTs creator by signed in user on front end?

Moralis General
#1

Hey guys,

I’m trying to understand how to display the tokens owned by a current user on front end . Right now, here is what I am doing:

const Profile = () => {
    const {isWeb3Enabled, account} = useMoralis()

    const { data: ownerWhoopys, isFetching: fetchingListedWhoopys } =
    useMoralisQuery("CreatedWhoopys", (query) =>
    query.equalTo("creatorAddress", account).limit(100)
    );
    console.log(ownerWhoopys);
    console.log(account)

When I call the following function on my front end, it returns blank:

            <div>
                {ownerWhoopys.map((whoopy) => {
                            console.log(whoopy.attributes)
                            const { whoopyName, whoopyColor, strength, creatorAddress  } =
                            whoopy.attributes
                            return (
                                <WhoopyCard
                                    whoopyName={whoopyName}
                                    whoopyColor={whoopyColor}
                                    strength={strength}
                                    creatorAddress={creatorAddress}
                                />
                            )
                        })
                    }
            </div>

On my main page, to display all the createdWhoopys, I use the following function which works perfectly:

  const { data: listedWhoopys, isFetching: fetchingListedWhoopys } =
  useMoralisQuery("CreatedWhoopys", (query) =>
    query.limit(100).ascending("whoopyName")
  );
  console.log(listedWhoopys);
//I then use the same html/js syntax as above to display the WhoopyCards

How can I get this to work on the profile page so as to show only the whoopys created by the current user?

Thanks!

#2

Are you getting data from ownerWhoopys or data? If you aren’t, you should use a useEffect to call fetch on useMoralisQuery when account is valid.

useEffect(() => {
  if (account) fetch();
}, [account]);

If you are getting data, you can console.log the props passed into WhoopyCard to see what is going on when you try to render it.

#3

I’ve tried a useEffect however it’s not working.

When the page loads, the data shows empty. However, when I edit my code in the editor (even if it’s just a random spacebar), the browser re-renders and then it pulls in the data and everything works perfectly.

However I don’t know why it’s not working with fetch since fetch is supposed to re-render the table. Any thoughts on what the issue is?

#4

So I got the issue. It has something to do with passing in the account parameter in query.equalTo.
If I pass in the account number as a string, then it works perfect. Is there a way I can pass in the current connected account in a different manner?

#5

I tried using {user} instead of address, and user logs relevant data in the console, however all of this is under attributes. When I try using user.attributes, it says I can’t access attributes.

#6

try .get or JSON.stringify and after that to parse the json if you don’t find a method that works

#7

If I pass in the account number as a string, then it works perfect.

account from useMoralis is a string by default. How did you test this - was it by hardcoding the address?

However, when I edit my code in the editor (even if it’s just a random spacebar), the browser re-renders and then it pulls in the data and everything works perfectly.

This would mean that your query structure is fine but you need to run it when account is valid. When you hot reload (make a change in code), it will keep existing component state. But when you reload the page, account will initially be null before it populates with a valid value.

How did you use useEffect to call fetch? You could also just add account as a dependency like this example that uses limit.

#8

Adding account as a dependency did the trick!! Thank you guys!!!

1 Like