correct-apricot

Combining useQueries into a single result

Hi All, I'm basically trying to make a custom hook which allows multiple queries to be executed and then all of the results get merged together into a single result set. I currently have this however this doesn't work as the size of result changes between renders as rootData can start as an empty array. Inspired from: https://github.com/TanStack/query/issues/3049

  const { data: rootData } = useQuery(...query); // rootData can start as a empty array 

  const queries = useMemo(() => rootData.map(()=> (...query), [rootData]);
  const result = useQueries(queries);

  const isInitialLoading = useMemo(() => results?.some((result) => result.isInitialLoading), [...results.map((qr) => qr.isInitialLoading)]);
  const isSuccess = useMemo(() => results?.every((result) => result.isSuccess), [...results.map((qr) => qr.isSuccess)]);
  const isError = useMemo(() => results?.some((result) => result.isError), [...results.map((qr) => qr.isError)]);
  const isLoadingError = useMemo(() => results?.some((result) => result.isLoadingError), [...results.map((qr) => qr.isLoadingError)]);
  const resultData = results.map((qr) => qr.data);
  const data = useMemo(
    () => results?.reduce((acc, result) => (result?.data ? [...acc, ...result.data] : acc), []),
    [...results.map((qr) => qr.data)]
  );

  return useMemo(() => {
    return {
      isInitialLoading,
      isSuccess,
      isError,
      isLoadingError,
      data
    };
  }, [isInitialLoading, isSuccess, isError, isLoadingError, data]);

  const { data: rootData } = useQuery(...query); // rootData can start as a empty array 

  const queries = useMemo(() => rootData.map(()=> (...query), [rootData]);
  const result = useQueries(queries);

  const isInitialLoading = useMemo(() => results?.some((result) => result.isInitialLoading), [...results.map((qr) => qr.isInitialLoading)]);
  const isSuccess = useMemo(() => results?.every((result) => result.isSuccess), [...results.map((qr) => qr.isSuccess)]);
  const isError = useMemo(() => results?.some((result) => result.isError), [...results.map((qr) => qr.isError)]);
  const isLoadingError = useMemo(() => results?.some((result) => result.isLoadingError), [...results.map((qr) => qr.isLoadingError)]);
  const resultData = results.map((qr) => qr.data);
  const data = useMemo(
    () => results?.reduce((acc, result) => (result?.data ? [...acc, ...result.data] : acc), []),
    [...results.map((qr) => qr.data)]
  );

  return useMemo(() => {
    return {
      isInitialLoading,
      isSuccess,
      isError,
      isLoadingError,
      data
    };
  }, [isInitialLoading, isSuccess, isError, isLoadingError, data]);

ERROR: The final argument passed to useMemo changed size between renders. The order and size of this array must remain constant.

ERROR: The final argument passed to useMemo changed size between renders. The order and size of this array must remain constant.

Due to our unique use case the combined results from this query need to then be passed into another useQueries. So I'm trying to work out how to achieve this while also reducing the number of renders as much as possible as the renders will cascade to the next hook. Without the useMemos I currently I keep getting into a infinite render loop due to a object ref change on each render. Any suggestions how best to achieve this?

GitHub

Infinite renders when using output of useQueries in useEffect depen...

Describe the bug When using the output of useQueries in the dependency array of a useEffect, the containing component will rerender infinitely. This bug seems to have been introduced in v3.9.0 and ...

2 Replies

genetic-orange•4y ago

You can't have variadic length dependencies in useMemo Why would you memoize booleans 😅?

correct-apricotOP•4y ago

I've had success using the following:

const data = useMemo(
    () => results?.reduce((acc, result) => (result?.data ? [...acc, result.data] : acc), []),
    [results.reduce((acc, cur) => acc + cur.dataUpdatedAt, 0)]
  );

  return useMemo(() => {
    return {
      data
    };
  }, [data]);

const data = useMemo(
    () => results?.reduce((acc, result) => (result?.data ? [...acc, result.data] : acc), []),
    [results.reduce((acc, cur) => acc + cur.dataUpdatedAt, 0)]
  );

  return useMemo(() => {
    return {
      data
    };
  }, [data]);

If I try to a map on data it just results in a render loop. The boolean part is fixable but how do you deal with the merged data part to be able to deal with a dynamic queries and merging the results in a why that doesn't require crazy renders to the component using the hook?

Gaming

Programming

Combining useQueries into a single result

Did you find this page helpful?