Distinguish between no array and empty array in dependent useQueries?

[mstieranka]

Hi, I'm currently using useQueries with a query dependency but there's an issue I encountered:

I need to go through the result of a hook using useQueries and run .some() on it to verify whether the user has a certain permission or not. However, there is no way to distinguish between the dependent data not being loaded yet and the data being an empty array.

I'm also attaching the aforementioned hook (disregard querySettings, it contains my global error handler, among other configuration):

export const useRolesForUser = (userId?: number) => {
  const querySettings = useQuerySettings();
  const { data: user } = useUserById(userId);
  return useQueries(
    user?.roleIds?.map((id) => ({
      queryKey: roleKeys.byId(id),
      queryFn: (): Promise<RoleDTO | undefined> => fetchRoleById(id),
      ...querySettings,
      enabled: querySettings.enabled && user !== undefined,
    })) ?? [{ queryKey: roleKeys.byId(0), queryFn: () => undefined }]
  );
};

Here you can see me create a query that just returns undefined as the first value if there is no data so that I can somehow find out whether the dependent data (user) hasn't loaded yet or whether user.roleIds is simply empty. However, I realize that this is a really bad hack and would like to solve it in a better way, if possible.

[TkDodo]

I'm not sure why it matters that user.roleIds is empty or undefined, but in any case, you can just check for this afterwards?

const queries = useQueries(user?.roleIds?.map(...) ?? [])

if (user?.roleIds) {
  queries.some(...)
}

or am I missing something?