Итак, я использую Apollo для состояния своего приложения, и пока я немного озадачен, что нет эквивалента mapStateToProps или чего-то в этом роде.
Насколько я понимаю, для того, чтобы какие-либо данные были доступны в моем магазине в глобальном масштабе, как только я получаю данные, мне нужен запрос для записи данных в хранилище, а затем другой запрос в другом моем компоненте, чтобы пойти и получить его.
К этому моменту другой компонент уже в значительной степени смонтирован и визуализирован, поэтому контент просто как бы мерцает и исчезает.
В Redux я могу просто добавлять новые данные в хранилище в моих редукторах, и тогда все, что связано с mapStateToProps, имеет к ним доступ.
Есть аналог? Или все должно проходить асинхронные запросы? Кто-нибудь еще находит это огромной болью?
Например, в одном компоненте я получаю данные приглашения:
this.props.client.query({
query: REQUEST_ACTION_DATA,
variables: {
id: actionData.id,
type: actionData.type
}
}).then(data => {
this.props.client.writeQuery({query: GET_ACTION_DATA, data: {
action: {
type: data.data.actionData.type,
object: data.data.actionData.invitation,
__typename: 'ActionDataPayload'
}
}})
this.props.history.push('/auth/register')
})
... тогда в другом моем компоненте у меня есть это:
componentWillMount() {
const authToken = localStorage.getItem(AUTH_TOKEN);
if (authToken) {
this.props.history.push('/')
}else{
this.props.client.query({
query: GET_ACTION_DATA
}).then(data => {
if (data.data && data.data.action && data.data.action.type == 'invite'){
this.setState({
invitation: data.data.action.object
})
}
console.info(data)
})
}
}
игнорируя тот факт, что писать все это для чего-то настолько простого, очень громоздко, есть ли просто способ получить доступ к данным хранилища, не дожидаясь ожидания?
Привет, @Herku, большое спасибо за ответ. На самом деле я не делаю ничего особенного. Просто передайте состояние клиента. Я использую compose с graphql HOC в нескольких компонентах, но это только кажется более подробным использованием withApollo. Если у вас есть секунда, было бы действительно полезно немного рассказать, в чем разница!





Компонент graphql более высокого порядка от React-Apollo - это connect с наддувом от redux. Он будет делать следующее:
Когда компонент монтируется, он попытается выполнить запрос к кешу Apollo. Вы можете думать о запросе как о DSL для выбора данных не только с сервера, но и из магазина! Если это работает, компонент почти мгновенно заполняется data из магазина, и никакие удаленные запросы не выполняются. Если данные недоступны в магазине, запускается удаленный запрос на получение данных. Затем это установит для свойства loading значение true.
Кэш Apollo - это нормализованное хранилище, очень похожее на ваше хранилище redux. Но благодаря хорошо продуманным ограничениям GraphQL нормализация может происходить автоматически, и вам не нужно беспокоиться о структуре хранилища. Это позволяет программисту полностью забыть о хранилищах, селекторах и запросах (если только вы не сильно оптимизируете свой код для повышения производительности). Добро пожаловать в декларативную красоту интерфейсных фреймворков GraphQL! Вы объявлять данные, которые вы хотите, и то, как они туда попадают, полностью прозрачно.
export default graphql(gql`{ helloWorld }`)(function HelloWorld({ data }) {
if (data.loading) {
return <div>Loading the simple query, please stand by</div>;
}
return <div>Result is: {data.helloWorld}</div>;
});
componentWillMount не проверяет наличие данных и не запускает действия запроса. Apollo будет производить проверки и инициировать запросы.Если вы сделаете что-либо из вышеперечисленного, вы, вероятно, неправильно используете Apollo Client. Если вы хотите оптимизировать свои запросы Начни здесь.
Это был фантастический ответ, Херку. Я считаю, что это принесет пользу многим. Огромное спасибо!
Что ж, использование компонента высшего порядка
withApollo- это не то, как вы бы использовали Apollo. Вы хотите использовать компонентgraphqlHOC (с наддувом reduxconnect) илиQuery, если только вы не делаете что-то действительно особенное (у нас есть большое производственное приложение, и мы никогда не используемwithApollo, это антипаттерн). Это вопрос о том, как что-то сделать действительно действительно особенный, или я должен попытаться объяснить, как работает кеш Apollo (и как выбирать из него данные)?