Combine/Transform result of multiple queries

I’m trying to create a hook that combines the data from 2 endpoints. I was able to transform the incoming data of a single query using

select

select

. What I really need is the data of 2 parallal queries combined tho. I was trying to use the select function for this purpose like below, but i'm not sure this is the best way of going about it. Also, this way hook

useC

useC

only returns the data, without any of the query information like loading or errors.

const useC = () => {
  const [c, setC] = useState();

  const {data: dataA} = useQuery({
    queryKey: [...],
    queryFn: fetchA,
    select: data => {
      if (dataB) {
        setC(combineIntoC({a: data, b: dataB))
      }
    }
  });

  const {data: dataB} = useQuery({
    queryKey: [...],
    queryFn: fetchB,
    select: data => {
      if (dataA) {
        setC(combineIntoC({a: dataA, b: data))
      }
    }
  });

  return c
}

const useC = () => {
  const [c, setC] = useState();

  const {data: dataA} = useQuery({
    queryKey: [...],
    queryFn: fetchA,
    select: data => {
      if (dataB) {
        setC(combineIntoC({a: data, b: dataB))
      }
    }
  });

  const {data: dataB} = useQuery({
    queryKey: [...],
    queryFn: fetchB,
    select: data => {
      if (dataA) {
        setC(combineIntoC({a: dataA, b: data))
      }
    }
  });

  return c
}

I hope this example makes it clear what the goal is.
(Note, if there is a better way to merge the result of 2 parallel queries, please let me know

I might not be looking in the right direction for my problem.)

Thanks in advance

Combine/Transform result of multiple queries

Similar Threads