How to make data from multiple requests available to the UI at the same time

[sbruinsje]

Does RTKQ offer any kind of mechanism for coupling the results of one query hook with another?

When you do:

const result1 = useSomeQuery({ someId });
const result2 = useSomeOtherQuery({ someId });

Whenever someId changes there will be a period where the component contains the old data from one hook and the new data from the other hook causing an inconsistent UI state.

So far I came up with this:

• Use currentData for both, but this makes the UI very jumpy. The nice thing about working with hooks is that the data remains unchanged until the query is actually finished.
• Create an endpoint that combines both. But it feels a bit redundant to create endpoints for every "view" in your app that combines data from multiple endpoints. And what if you need to fetch data from two different API's?
• Don't use hooks.
• Create a custom hook that does something like:

export function useSomethingAndSomethingElse({ someParam1, someParam2 }: { someParam1: number, someParam2: number }) {
  const {
    data: data1,
    currentData: currentData1,
    isLoading: isLoading1,
    isFetching: isFetching1,
    isError: isError1,
    isUninitialized: isUninitialized1,
  } = useSomethingQuery({ someParam1, someParam2 });
  const {
    data: data2,
    currentData: currentData2,
    isLoading: isLoading2,
    isFetching: isFetching2,
    isError: isError2,
    isUninitialized: isUninitialized2,
  } = useSomethingElseQuery({someParam1} });

  const [data, setData] = useState<[data1: typeof data1, data2: typeof data2] | undefined>();

  useEffect(() => {
    if (currentData1 && currentData2) setData([currentData1, currentData2]);
  }, [currentData1, currentData2]);

  const currentData = useMemo(() => {
    return currentData1 && currentData2 ? [currentData1, currentData2] : undefined;
  }, [currentData1, currentData2]);

  return {
    data,
    currentData,
    isLoading: isLoading1 || isLoading2,
    isFetching: isFetching1 || isFetching2,
    isError: isError1 || isError2,
    isUninitialized: Boolean(isUninitialized1 || isUninitializedRecipients),
  };
}

However this feels like such a common usecase that I feel like I might be overlooking a better way to do this.

And in the above example its just two simultaneous requests. What if you more complex requirements such as two simultaneous requests followed by another request and you want all of the data to be made available in the UI at once while still showing the old data in the meanwhile.