I'm trying to render a loading component while my queries are being executed in parallel in react-query.
I'm looping through an array of ids and making the same request.
const useGetUsersQueries = (
users
) => {
const queries = useQueries({
queries: users?.map((user) => ({
queryKey: ['get-users-query', user.id],
queryFn: async (): Promise<RoutineData> => {
const response = await getUsers(
user.id,
);
return response.data;
},
enabled: !!user
}))
});
const isLoading = queries.some((query) => query.isLoading);
const isSuccess = queries.every((query) => query.isSuccess);
const isError = queries.some((query) => query.isError);
const data = queries.filter((query) => query.data)
return [data, { isLoading, isSuccess, isError }];
};
In my component I'm trying to render a loading component while the query is being fetched, but for each user.
const [usersData, {isLoading}] = useGetUsersQueries(users);
{usersData.map((query, index) => {
return (
<>
{query.isLoading && (<Loading />)} // this loading is always false
{query.isSuccess && (<Component />)} // this success is always true
</>
);
})}
Is it possible to get the loading state for each user that is being fetched? Or its only possible to get a loading state for all the queries at once?