[SOLVED] How to use fetch() to get relevant information and then pass it to front end?

Moralis General
#1

Hey guys,

I’m trying to allow users to type an address in the search bar and then allow my front end to show them information respective to the address they entered (all from the Moralis database).

This is what I have done so far:

    const [address, setAddress] = useState("");
    

    const { data: ownerWhoopys, isFetching: fetchingListedWhoopys, fetch } =
    useMoralisQuery("CreatedWhoopys", (query) =>
    query.equalTo("creatorAddress", address).limit(100).ascending("whoopyName"),
    )

In my html, I have done:

<input onChange={(e) => setAddress(e.target.value)}/>
<button onClick={() => fetch}>Click</button>

How do I now get this fetched value and display it on my front end?

Currently (on another part of my website), I map through the data to get info regarding all addresses in the database. Is there a way for me to map through this fetched data? Currently when I click the button on the website nothing shows up.

How can I allow users to search my database and get relevant info?
Thanks!

#2

You can render ownerWhoopys in your return.

return (

...

{ownerWhoopys.map ... }
#3

This is my current code:

fetchingListedWhoopys ? (<div>Loading...</div>) : ownerWhoopys.map((owner) => {
                            console.log(owner.attributes)
                            const { whoopyName, color, power  } =
                            owner.attributes
                            return (
                                <WhoopyCard
                                    whoopyName={whoopyName}
                                    color={color}
                                    power={power}

When I click the button which calls fetch, I see the ‘Loading…’ on my website for about half a second, but then nothing changes. It’s like it’s getting stuck or reversed for some reason.

#4

hey @alex

Any idea what I can do?

#5

Is ownerWhoopys returning any data (console.log it in a useEffect)? Or does console.log(owner.attributes) work?

If it is, test first by just rendering anything from the map (and not passing it to WhoopyCard). Start simpler first to make sure the map works.

#6

Nope, no logging. It does work with account though. It’s not even working if I pass in an address as a string. It’s just working with account surprisingly. Could it have anything to do with the queries already set up on other pages?

#7

Then you need to check the query - what value do you use which should return a result from querying the CreatedWhoopys table? Doublecheck this.

Could it have anything to do with the queries already set up on other pages?

No, this is a separate query.

It does work with account though. It’s not even working if I pass in an address as a string.

const { data: ownerWhoopys, isFetching: fetchingListedWhoopys, fetch } =
    useMoralisQuery("CreatedWhoopys", (query) =>
    query.equalTo("creatorAddress", address).limit(100).ascending("whoopyName"),
    )

I’m not sure what you mean - there’s no use of account here? If you mean you tried swapping the input address with account (which works), then it’s an issue with the specific address you’re entering.

The values need to match exactly for equalTo.

#8

Yep, I swapped the input address with account and this works. It doesn’t work with address though, even though it’s the exact same address. Could it be the way I am using input and button?

<input onChange={(e) => setAddress(e.target.value)}>
<button onClick={() => {fetch}}>Click</button>

(I also tried using <button onClick={async function getWhoopy() {fetch}}> Click </Button> but didn’t work.

#9

Test first with hardcoding the same address you put into the input directly into the query:

query.equalTo("creatorAddress", "")

If that works, then check the value of address by the time you click fetch.

useEffect(() => {
  console.log("input address", address);
}, [address]);

This should be:

<button onClick={fetch}>Click</button>

// or

<button onClick={() => fetch()}>Click</button>
#10

Okay I got it. It was something silly but easy to miss. When I copied the address from metamask it’s in all caps, but in the database it’s in small letters. That was the issue.

Thank you so much for bearing with me!