Промисы изменили цвет моих волос на седой.
А теперь подробнее.
Имеется реакт-приложение. Работать будем с компонентом
App и
сервисом. Сервис - отдельный класс, который отвечает за получение и, при необходимости, трансформацию данных.
Есть главные условия: использовать
только компоненты-классы,
запросы осуществляются с помощью Apollo(GraphQL).
В сервисе есть метод, отвечающий за получение каких-то данных. Метод - асинхронная фунция. Асинхронная функция возвращает
промис.
export default class Service {
constructor() {
this._client = new ApolloClient({
uri: 'http://localhost:4000/',
cache: new InMemoryCache()
})
}
getCategory = async (id) => {
let result = await this._client.query({
query: gql`
query GetCategories {
categories {
name
}
}`
}).then((data) => data.data.categories[id].name)
return result;
}
}
В компоненте App я импортирую сервис, создаю его экземпляр и хочу использовать значение, которое должен вернуть метод getCategory. Но все мы помним, что метод возвращет промис а не значение, поэтому на экране отображается всеми любимый [object Promise]. А хотелось бы достать значение.
export default class App extends React.Component {
render() {
const service = new Service();
return (
<Router>
<div className="app">
<div className="container">
<p>{`${service.getCategory(1)}`}</p>
</div>
</div>
</Router>
);
}
}
Прекрасно знаю, что для этих целей записывают значение в переменную используя await, но такие штуки никак не могу провернуть в классах. Как всё же поступить в такой ситуации?
Средний
