У меня есть Компонент высокого порядка, в котором я могу передать массив определений запросов 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.
У меня это было импортировано выше, так как я буду использовать везде один и тот же компонент LoadingComponent. Но удаление усилителя pure сделало это.
Рад, что помог :)





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