vue query available keys in use query

Question

import { authApi } from '..';
import { useQuery } from '@tanstack/vue-query';

export const useGetUserInfoQuery = () => {
  return useQuery({
    queryKey: ['user'],
    queryFn: () => authApi.getUserInfo(),
    refetchOnWindowFocus: false,
    refetchOnMount: false,
  });
};

async getUserInfo(): Promise<
    | StudentCandidateType
    | EmployeeCandidateType
    | SupervisorType
    | AdminType
    | null
  > {
    const mockRole = getUserRoleFromCookies();

    if (!mockRole) return null;

    const UserMap = {
      is_student_candidate: mockUserStudentCandidate,
      is_employee_candidate: mockUserEmployeeCandidate,
      is_supervisor: mockUserSupervisor,
      is_admin: mockUserAdmin,
    };

    const userInfo = UserMap[mockRole];

    return delayRes(userInfo, 300);
  }

const { data } = useGetUserInfoQuery();

I am get user data by role in cookies. I call it, but data only allows access to the keys that are available in all roles. What can be done?