Нам нужно делать запрос только когда у нас есть roles. Как это реализовать?

Условие ставят внутри эффекта или механизма загрузки, а не вокруг вызова React-хука; сначала нужно определить, что значит «roles есть».

Например, внутри useEffect можно сделать if (!roles?.length) return;, если запрос требует непустого массива. Если [] означает успешно загруженные пустые права, проверяют отдельно состояние загрузки. Зависимости и отмена устаревшего запроса обязательны; наличие роли не заменяет проверку на сервере.