Best way to combine loading status of multiple queries?

[cmacdonnacha]

I have a loading page which I want to display while I wait for 2 query to complete. I have both of these queries in their own custom hooks.

So far I'm doing something like this:

const { status, contacts } = useContacts();
const { status: carsStatus, cars } = useCars();

if (status === 'loading' || carsStatus === 'loading') {
  return <Loader />
}

The custom hook looks like this:

export const useContacts = () => {
  const { status, data } = useQuery('contactsData', () =>
    FetchAPI.get('http://localhost:8080/v1/contacts'),
  );

  return { status, contacts: data};
};

This works but it feels a bit clunky so I was wondering if there was a more elegant way? I was looking at using useQueries but that requires multiple queries to be passed in, which would be awkward for me to do as I have all of my queries in custom hooks. Any ideas?

[TkDodo]

I don't think there is a general solution, as it highly depends on the use case. With concurrently running queries, it is sometimes correct to wait for all of the queries to succeed before showing data (like in your example), but sometimes, it is also correct to show any data as soon as you have it, and only show the big loading spinner while all queries are loading. This is conceptually the same when using useQueries or separate useQuery calls.

combining the requests in one fetching function with Promise.all can also work but of course has other drawbacks, like coupling them together into one query.

[cmacdonnacha]

Thanks @TkDodo