#useQueries dependency on previous useQuery not working correctly (scoping issue)?

2 messages · Page 1 of 1 (latest)

whole quartz
#

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;
          }
        }
      }
    })
    : [],
  })

useQuery dependent Query

Dependent (or serial) queries depend on previous ones to finish before they can execute. To achieve this, it's as easy as using the enabled option to tell a query when it is ready to run:

#

clips in the dependent query is always treated as undefined