Dynamic dependent queries
Hi, I'm not sure what's the way to go about this situation
My idea was something like this
But I've heard it isn't recommended to call fetchQuery inside queryFn. So what's the right way to do this? Thanks!
const useOwnedTokensMetadata = (chain) => {
const {data: accounts} = useQuery({
querykey: ['accounts', chain],
queryFn: () => fetchAccounts(chain),
})
const {data: ownedTokens} = useQuery({
queryKey: ['ownedTokens', accounts, chain],
queryFn: accounts ? () => fetchOwnedTokens(accounts, chain) : skipToken,
})
const {data: ownedNfts} = useQuery({
queryKey: ['ownedNfts', accounts, chain],
queryFn: accounts && shouldFetchNfts(chain) ? () => fetchOwnedNfts(accounts, chain) : skipToken,
})
const {data: ownedTokensMetadata} = useQuery({
queryKey: ['tokensMetadata', ownedTokens, ownedNfts, chain],
queryFn: ownedTokens && (ownedNfts || !shouldFetchNfts(chain))
? () => fetchMetadataFor(ownedTokens, ownedNfts, chain),
: skipToken,
})
return {data: ownedTokensMetadata}
}
const useAllOwnedTokensMetadata = (chains) => {
return useQueries({
queries: chains.map(
// What to do? Can't map them onto hooks.
(chain) => useOwnedTokensMetadata(chain)
),
combine: useCallback(...),
})
}const useOwnedTokensMetadata = (chain) => {
const {data: accounts} = useQuery({
querykey: ['accounts', chain],
queryFn: () => fetchAccounts(chain),
})
const {data: ownedTokens} = useQuery({
queryKey: ['ownedTokens', accounts, chain],
queryFn: accounts ? () => fetchOwnedTokens(accounts, chain) : skipToken,
})
const {data: ownedNfts} = useQuery({
queryKey: ['ownedNfts', accounts, chain],
queryFn: accounts && shouldFetchNfts(chain) ? () => fetchOwnedNfts(accounts, chain) : skipToken,
})
const {data: ownedTokensMetadata} = useQuery({
queryKey: ['tokensMetadata', ownedTokens, ownedNfts, chain],
queryFn: ownedTokens && (ownedNfts || !shouldFetchNfts(chain))
? () => fetchMetadataFor(ownedTokens, ownedNfts, chain),
: skipToken,
})
return {data: ownedTokensMetadata}
}
const useAllOwnedTokensMetadata = (chains) => {
return useQueries({
queries: chains.map(
// What to do? Can't map them onto hooks.
(chain) => useOwnedTokensMetadata(chain)
),
combine: useCallback(...),
})
}My idea was something like this
const composedTokensMetadataOptions = (chain) => queryOptions({
queryKey: ['composedTokensMetadata', chain],
queryFn: async () => {
const accounts = await queryClient.fetchQuery(accountsOptions(chain))
const ownedTokens = await queryClient.fetchQuery(ownedTokensOptions(accounts, chain))
const ownedNfts = shouldFetchNfts(chain) ? await queryClient.fetchQuery(ownedNftsOptions(accounts, chain)) : []
return await fetchMetadataFor(ownedTokens, ownedNfts, chain)
}
})
const useAllOwnedTokensMetadata = (chains) => {
return useQueries({
queries: chains.map(
(chain) => composedTokensMetadataOptions(chain),
),
combine: useCallback(...),
})
}const composedTokensMetadataOptions = (chain) => queryOptions({
queryKey: ['composedTokensMetadata', chain],
queryFn: async () => {
const accounts = await queryClient.fetchQuery(accountsOptions(chain))
const ownedTokens = await queryClient.fetchQuery(ownedTokensOptions(accounts, chain))
const ownedNfts = shouldFetchNfts(chain) ? await queryClient.fetchQuery(ownedNftsOptions(accounts, chain)) : []
return await fetchMetadataFor(ownedTokens, ownedNfts, chain)
}
})
const useAllOwnedTokensMetadata = (chains) => {
return useQueries({
queries: chains.map(
(chain) => composedTokensMetadataOptions(chain),
),
combine: useCallback(...),
})
}But I've heard it isn't recommended to call fetchQuery inside queryFn. So what's the right way to do this? Thanks!
