T
TanStack•3y ago
other-emerald

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

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;
          }
        }
      }
    })
    : [],
  })
  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;
          }
        }
      }
    })
    : [],
  })
Dependent Queries | TanStack Query Docs
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:
2 Replies
other-emerald
other-emeraldOP•3y ago
clips in the dependent query is always treated as undefined
other-emerald
other-emerald•3y ago
should work; show a reproduction please

Did you find this page helpful?