Почему-то при использовании:
export const allBilderLinkses = gql`
query bild($name: String!){
allBilderLinkses(filter: {collectionName: {collectionName: $name}}) {
bildLink
}
}
`
const Images = ({ data: { loading, error, allBilderLinkses } }) => {
if (error) return <h1>Error fetching the post!</h1>;
if (!loading) {
return (
<div>
{allBilderLinkses.map(bild => (
<ImageContainer bg = {bild.bildLink}/>
))}
</div>
);
}
return <h2>Loading post...</h2>;
};
class ExpandedCard extends Component {
render() {
return (<div>
<Container>
<h1>test</h1>
</Container>
<Images />
</div>
);
}
}
export default graphql(allBilderLinkses, {
options:({match}) => ({ variables: {
name: match.params.id
},
notifyOnNetworkStatusChange: true,
}),
}) (Images, ExpandedCard);
Рендерится только <Images />. <h1>test</h1> не рендерится, на самом деле с помощью инструментов chrome dev тег h1 даже не является элементом.
Обычно в моих сборках запрос gql не мешает остальной части компонента. Единственные различия, которые я вижу в этом фрагменте кода, - это добавленная переменная в запросе gql и параметры переменных в операторе экспорта graphql.
Вроде ни с того ни с сего не загружать h1-tag, зачем он это делает? Как я могу это исправить?
тег контейнера - это просто styled.div, функции рендеринга нет ...
Ах, я нашел вашу ошибку.





Вам нужно удалить второй параметр в вызове graphql HoC.
Должен быть graphql(...)(ExpandedCard)
graphql - это HoC (компонент более высокого порядка). Его можно рассматривать как компонент, который принимает компонент в качестве входных данных и возвращает расширенный компонент. HoC используются для разделения сквозных проблем между компонентами.
Итак, graphql будет выглядеть следующим образом
const graphql = (wrappedComponent, someData) => () => <WrappedComponent {...graphql props based on someData} />
Обернутый компонент - это компонент, который вы хотите улучшить с помощью функций graphql.
Что такое функция рендеринга для тега контейнера? Похоже, в его рендере может не быть this.props.children?