optimistic-gold

map inside Dependent query

Hello, I'm trying to do a dependant query but mapping the const balance which is equal to [1,2], but I haven't been capable. I've tried even with the parallel query notation that looks pretty similar to what I'm looking for, but it must be a dependant query, indeed. Could you help me?

const { data: tokenId } = useQuery({
        queries: balance.map(ids => {
            return {
                queryKey: ['tokenId'],
                queryFn: () => fetchMetadata(ids),
                enabled: !!balance,
            }
})});

const { data: tokenId } = useQuery({
        queries: balance.map(ids => {
            return {
                queryKey: ['tokenId'],
                queryFn: () => fetchMetadata(ids),
                enabled: !!balance,
            }
})});

5 Replies

optimistic-goldOP•4y ago

I've tried also like this

const { data: tokenId } = useQuery({ queryKey: ['tokenId'], queryFn: () => balance.map(ids => fetchMetadata(ids)), enabled: !!balance });

const { data: tokenId } = useQuery({ queryKey: ['tokenId'], queryFn: () => balance.map(ids => fetchMetadata(ids)), enabled: !!balance });

But I got

(2) [Promise, Promise]

(2) [Promise, Promise]

wise-white•4y ago

you need to map your future calls into Promise.all like this

Promise.all(balance.map(ids=>fetchMetadata(ids)))

Promise.all(balance.map(ids=>fetchMetadata(ids)))

Not only it will return your multiple Promises into single Promise which will return the values of all your promises in an array (balance metadata in your case), it's also useful to cut the time needed to fulfill all the Promise as those Promises will be run parallelly instead of sequentially https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Promise.all() - JavaScript | MDN

The Promise.all() method takes an iterable of promises as input and returns a single Promise. This returned promise fulfills when all of the input's promises fulfill (including when an empty iterable is passed), with an array of the fulfillment values. It rejects when any of the input's promises rejects, with this first rejection reason.

optimistic-goldOP•4y ago

Thank you, I'll try in a bit Hi, now I'm getting [undefined, undefined], although I can see in the API dashboard the request was successful, also I can see the data when I console the answer of my fetch function.

const fetchMetadata = async (ids) => {
        const res = await fetch(`https://api-eu1.tatum.io/v3/multitoken/metadata/${chain}/${nftContract}/${ids}`, {
            "method": "GET",
            "headers": {
                "Content-Type": "application/json",
                "x-api-key": process.env.REACT_APP_TATUM
                }
            }
        )
        .then(res => {
            if(!res.ok) {
                throw Error("There was an error in the second call, please report it to support")
            }
            return res.json();
        })
    };

const fetchMetadata = async (ids) => {
        const res = await fetch(`https://api-eu1.tatum.io/v3/multitoken/metadata/${chain}/${nftContract}/${ids}`, {
            "method": "GET",
            "headers": {
                "Content-Type": "application/json",
                "x-api-key": process.env.REACT_APP_TATUM
                }
            }
        )
        .then(res => {
            if(!res.ok) {
                throw Error("There was an error in the second call, please report it to support")
            }
            return res.json();
        })
    };

const { data: tokenId } = useQuery({ queryKey: ['tokenId'], queryFn: () => Promise.all(balance.map(ids => fetchMetadata(ids))), enabled: !!balance });

const { data: tokenId } = useQuery({ queryKey: ['tokenId'], queryFn: () => Promise.all(balance.map(ids => fetchMetadata(ids))), enabled: !!balance });

Could I ask for help one more time, please? I started to get the data after this change:

const fetchMetadata = async (ids) => {
        const res = await fetch(`https://bookverse-proxy.herokuapp.com/https://api-eu1.tatum.io/v3/multitoken/metadata/${chain}/${nftContract}/${ids}`, {
            "method": "GET",
            "headers": {
                "Content-Type": "application/json",
                "x-api-key": process.env.REACT_APP_TATUM
                }
            }
        )
        const result = await res.json();
        return result;
    };

const fetchMetadata = async (ids) => {
        const res = await fetch(`https://bookverse-proxy.herokuapp.com/https://api-eu1.tatum.io/v3/multitoken/metadata/${chain}/${nftContract}/${ids}`, {
            "method": "GET",
            "headers": {
                "Content-Type": "application/json",
                "x-api-key": process.env.REACT_APP_TATUM
                }
            }
        )
        const result = await res.json();
        return result;
    };

wise-white•4y ago

i don't see (chain and nftContract) being passed into fetchMetadata and idk how your external API setup so can't help much further than that, sorry

optimistic-goldOP•4y ago

It's solved. Thank you.

Gaming

Programming

map inside Dependent query

Did you find this page helpful?