Синхронно читаете из магазина?

Итак, я использую 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)
        })
    }
}

игнорируя тот факт, что писать все это для чего-то настолько простого, очень громоздко, есть ли просто способ получить доступ к данным хранилища, не дожидаясь ожидания?

Что ж, использование компонента высшего порядка withApollo - это не то, как вы бы использовали Apollo. Вы хотите использовать компонент graphql HOC (с наддувом redux connect) или Query, если только вы не делаете что-то действительно особенное (у нас есть большое производственное приложение, и мы никогда не используем withApollo, это антипаттерн). Это вопрос о том, как что-то сделать действительно действительно особенный, или я должен попытаться объяснить, как работает кеш Apollo (и как выбирать из него данные)?

Herku 23.08.2018 21:24

Привет, @Herku, большое спасибо за ответ. На самом деле я не делаю ничего особенного. Просто передайте состояние клиента. Я использую compose с graphql HOC в нескольких компонентах, но это только кажется более подробным использованием withApollo. Если у вас есть секунда, было бы действительно полезно немного рассказать, в чем разница!

MitchEff 24.08.2018 05:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
371
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Компонент 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>;
});
  • Никакого селектора, никакой денормализации. Это делает клиент Apollo! Вы получите обновленные данные, когда кеш обновится автоматически, как и Redux.
  • componentWillMount не проверяет наличие данных и не запускает действия запроса. Apollo будет производить проверки и инициировать запросы.
  • Нет нормализации данных ответа (также выполняется Apollo Client за вас)

Если вы сделаете что-либо из вышеперечисленного, вы, вероятно, неправильно используете Apollo Client. Если вы хотите оптимизировать свои запросы Начни здесь.

Это был фантастический ответ, Херку. Я считаю, что это принесет пользу многим. Огромное спасибо!

MitchEff 27.08.2018 04:36

Другие вопросы по теме