Dependent queries with useQueries

[sidv93]

Hi,
I have a component which has a dependent and/or parallel query. Initially, I fetch the user data, and this user data contains an ids array, and these ids have to be used in a parallel query.
Following the docs for Dynamic parallel queries and Dependent queries, this is what I have now.

const {data: user} = useQuery('user', fetchUser);
const siteIds = user?.siteIds;
const sites = useQueries(
    siteIds.map((id) => {
       return {
           queryKey: ['sites',id],
           queryFn: () => fetchSite(id)
       })
);

I want useQueries to run only when user data is resolved. But I'm getting an error in siteIds.map when siteIds is undefined. This is understandable as siteIds will be undefined in the initial render. I tried using enabled: !!siteIds but to no effect.

Any help appreciated, thanks.

[TkDodo]

sine siteIds comes from user?.siteIds, it is potentially undefined, so you cannot call .map on it without optional chaining. This should work:

const sites = useQueries(
    siteIds?.map((id) => {
       return {
           queryKey: ['sites',id],
           queryFn: () => fetchSite(id)
       }
    }) ?? []
);

[sidv93]

Yes, passing an empty array as default would solve the error, but I was wondering if there was a way to use the enabled flag for useQueries.
Thank you for your help @TkDodo

[TkDodo]

yes, you can of course pass an enabled flag to each one of the returned objects inside the map. But you cannot call undefined.map, that's just a javascript thing :)