I have followed the documentation (https://tanstack.com/query/v4/docs/react/guides/dependent-queries#usequeries-dependent-query) exactly as far as I can tell and yet the dependent query never fires even after the data is available as shown by console.log. What am I missing here?
const { data: clips, isLoading: clipsLoading, isError: clipsError, error: clipErrorDetail } = useQuery({
queryKey: ['getClips', item.nodeId],
queryFn: async () => {
let clipList = await getClips(item.nodeId);
console.log("reached getClips")
return clipList;
},
});
console.log(clips)
console.log(clipsLoading)
console.log(clipsError)
console.log(clipErrorDetail)
const { data: clipProps, isLoading: clipPropsLoading } = useQueries({
queries: clips ? clips.map((clip) => {
return {
queryKey: ['getClipProps', clip.nodeId, columnKey],
queryFn: async () => {
if (columnKey === origStatus) {
const clipOrigProps = await getClipFs(clip.origPath, filespaces);
let clip = {
...clip,
...clipOrigProps
};
console.log("reached getClipProps")
return clip;
} else {
const clipProxyProps = await getClipFs(clip.proxyPath, filespaces);
let clip = {
...clip,
...clipProxyProps
};
console.log("reached getClipProps")
return clip;
}
}
}
})
: [],
})