React-Apollo Compose - ожидание завершения всех связанных запросов graphql

У меня есть Компонент высокого порядка, в котором я могу передать массив определений запросов graphql. Этот HOC также включает renderComponent из React-Apollo перекомпоновать, чтобы гарантировать, что компонент не будет отображаться, если запрос graphql все еще выполняется. Проблема, с которой я сталкиваюсь, заключается в том, что когда я связываю запросы graphql, он отображает компонент до завершения второго запроса. Итак, я предполагаю, что первый запрос завершается, а затем для переменной props.data.loading устанавливается значение false, поэтому компонент отрисовывается. Но второй запрос никогда не заканчивается. Вот мой компонент высокого порядка:

const ErrorComponent = ({ error }) => (
    <span>
        Something went wrong: {JSON.stringify(error)}
    </span>
);

export function asContainer(Component, mapStateToProps, mapDispatchToProps, graphqlQueries = [], lifecycleSpec = {}) {
    const renderWhileLoading = () =>
        branch(
            props => props['data'] && props['data'].loading,
            renderComponent(Loader),
        );

    const renderForError = () =>
        branch(
            props => props['data'] && props['data'].error,
            renderComponent(ErrorComponent),
        );

    let parts = [connect(mapStateToProps, mapDispatchToProps)];

    if (graphqlQueries.length > 0) {
        for (let i = 0; i < graphqlQueries.length; i++) {
            let g = graphqlQueries[i];
            parts.push(graphql(g.query, g.opts))
        }
    }

    parts.push(
        lifecycle(lifecycleSpec),
        renderWhileLoading(),
        renderForError(),
        pure
    );

    return compose(parts)(Component);
}

И, используя шаблон контейнера, это компонент, который вызывает этот HOC:

export const AuthedRouterContainer = asContainer(
    AuthedRouter,
    mapStateToProps,
    mapDispatchToProps,
    [{
        name: "user",
        query: LoggedInUserQuery,
        opts: {
            options: (props) => ({
                variables: {
                    id: props.currentUser.id
                }
            }),
        }
    }, {
        query: GetEntityProcessesQuery,
        opts: {
            name: "processes",
            options: (props) => ({
                variables: {
                    entityId: props.currentEntity.id
                }
            }),
            skip: (props) => !props.currentEntity
        }
    }]
);

Мне нужна помощь в выяснении, почему это не дожидается завершения второго запроса перед рендерингом компонента, передаваемого в HOC.

Разве это не должно быть renderWhileLoading(LoadingComponent)? (то же самое для renderForError). Может быть, не связано, но пробовали ли вы без усилителя pure?

Clément Prévost 12.09.2018 18:10

У меня это было импортировано выше, так как я буду использовать везде один и тот же компонент LoadingComponent. Но удаление усилителя pure сделало это.

jrkt 12.09.2018 18:34

Рад, что помог :)

Clément Prévost 12.09.2018 18:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
3
592
0

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