T
TanStack•3y ago
correct-apricot

Reusing queries and queryKey variable evaluation

If I include a variable in a query (like the column id for a table) and the components are generated dynamically like so 
  const checkNumber = useQuery({
        queryKey: ['column', { type: 'exists' }, columnId],
        queryFn: checkColumn()
    });
  const checkNumber = useQuery({
        queryKey: ['column', { type: 'exists' }, columnId],
        queryFn: checkColumn()
    });
if I elsewhere try to retrieve the value of the query using a value that I know was passed into the query as a key, like this: 
  const checkNumber = useQuery({
        queryKey: ['column', { type: 'exists' }, "ab3452c"],
        queryFn: checkColumn()
    });
  const checkNumber = useQuery({
        queryKey: ['column', { type: 'exists' }, "ab3452c"],
        queryFn: checkColumn()
    });
will the dynamically generated query and the manually invoked query match?
1 Reply
correct-apricot
correct-apricotOP•3y ago
or for a better example, will these two match assuming they are both supplied "proxyStatus" as the last key? 
  const clipSize = useQueries({
    queries: !clipProps.some(queriesFinished)
    ? clipProps.map((clip) => {
      return {
        queryKey: ['clips', { type: 'size' }, clip.data.nodeId, columnKey],
        queryFn: async () => {
          if (columnKey === "origStatus") {
            let clipObj = clip.data;
            clipObj.size = await getPinSize(clip.data.unencoded);
            clipObj.sizeLabel = sizeAdjust(clipObj.origSize, "include")
            //console.log("reached getClipProps");
            return clipObj;
          } else {
            let clipObj = clip.data;
            clipObj.size = clipObj.hasProxy ? await getPinSize(clip.data.unencoded) : 0
            clipObj.sizeLabel = sizeAdjust(clipObj.proxySize, "include")
            //console.log("reached getClipProps")
            return clipObj; 
          }
        },
        //staleTime: 10000
      }
    })
    : [],
  })
  const clipSize = useQueries({
    queries: !clipProps.some(queriesFinished)
    ? clipProps.map((clip) => {
      return {
        queryKey: ['clips', { type: 'size' }, clip.data.nodeId, columnKey],
        queryFn: async () => {
          if (columnKey === "origStatus") {
            let clipObj = clip.data;
            clipObj.size = await getPinSize(clip.data.unencoded);
            clipObj.sizeLabel = sizeAdjust(clipObj.origSize, "include")
            //console.log("reached getClipProps");
            return clipObj;
          } else {
            let clipObj = clip.data;
            clipObj.size = clipObj.hasProxy ? await getPinSize(clip.data.unencoded) : 0
            clipObj.sizeLabel = sizeAdjust(clipObj.proxySize, "include")
            //console.log("reached getClipProps")
            return clipObj; 
          }
        },
        //staleTime: 10000
      }
    })
    : [],
  })
and 
  const origClipSize = useQueries({
    queries: !origClipProps.some(queriesFinished)
    ? origClipProps.map((clip) => {
      return {
        queryKey: ['clips', { type: 'size' }, clip.data.nodeId, "origStatus"],
        queryFn: async () => {
          let clipObj = clip.data;
          clipObj.size = await getPinSize(clip.data.unencoded);
          clipObj.sizeLabel = sizeAdjust(clipObj.origSize, "include")
          //console.log("reached getClipProps");
          return clipObj;
        },
        //staleTime: 10000
      }
    })
    : [],
  })

  const proxyClipSize = useQueries({
    queries: !proxyClipProps.some(queriesFinished)
    ? proxyClipProps.map((clip) => {
      return {
        queryKey: ['clips', { type: 'size' }, clip.data.nodeId, "proxyStatus"],
        queryFn: async () => {
          let clipObj = clip.data;
          clipObj.size = clipObj.hasProxy ? await getPinSize(clip.data.unencoded) : 0
          clipObj.sizeLabel = sizeAdjust(clipObj.proxySize, "include")
          //console.log("reached getClipProps")
          return clipObj; 
        },
        //staleTime: 10000
      }
    })
    : [],
  })
  const origClipSize = useQueries({
    queries: !origClipProps.some(queriesFinished)
    ? origClipProps.map((clip) => {
      return {
        queryKey: ['clips', { type: 'size' }, clip.data.nodeId, "origStatus"],
        queryFn: async () => {
          let clipObj = clip.data;
          clipObj.size = await getPinSize(clip.data.unencoded);
          clipObj.sizeLabel = sizeAdjust(clipObj.origSize, "include")
          //console.log("reached getClipProps");
          return clipObj;
        },
        //staleTime: 10000
      }
    })
    : [],
  })

  const proxyClipSize = useQueries({
    queries: !proxyClipProps.some(queriesFinished)
    ? proxyClipProps.map((clip) => {
      return {
        queryKey: ['clips', { type: 'size' }, clip.data.nodeId, "proxyStatus"],
        queryFn: async () => {
          let clipObj = clip.data;
          clipObj.size = clipObj.hasProxy ? await getPinSize(clip.data.unencoded) : 0
          clipObj.sizeLabel = sizeAdjust(clipObj.proxySize, "include")
          //console.log("reached getClipProps")
          return clipObj; 
        },
        //staleTime: 10000
      }
    })
    : [],
  })
It feels like they should, but it seems clear the two are interfering with each other because when I try to use this method the components don't all render and some produce errors. I don't have all the information I need in the component or a way to get it there in the way I need it, so is this maybe a case for queryClient.getCacheData? Can I have useQueries map over an array and have it generate a query per element, then elsewhere address that element with a single useQuery if I know what the variable is going to be? I guess it does work like I expect, the issue was an incorrect variable declaration

Did you find this page helpful?