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

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

0 голосов
/ 12 сентября 2018

У меня есть High Order Component , в который я могу передать массив определений запросов graphql.Этот HOC также включает renderComponent от Reaction-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.

...