React & apollo: элемент не возвращается

Почему-то при использовании:

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, зачем он это делает? Как я могу это исправить?

Что такое функция рендеринга для тега контейнера? Похоже, в его рендере может не быть this.props.children?

johnny peter 19.06.2018 05:16

тег контейнера - это просто styled.div, функции рендеринга нет ...

Ty Yiu 20.06.2018 10:59

Ах, я нашел вашу ошибку.

johnny peter 20.06.2018 11:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
46
1

Ответы 1

Вам нужно удалить второй параметр в вызове graphql HoC.

Должен быть graphql(...)(ExpandedCard)

graphql - это HoC (компонент более высокого порядка). Его можно рассматривать как компонент, который принимает компонент в качестве входных данных и возвращает расширенный компонент. HoC используются для разделения сквозных проблем между компонентами.

Итак, graphql будет выглядеть следующим образом

const graphql = (wrappedComponent, someData) => () => <WrappedComponent {...graphql props based on someData} />

Обернутый компонент - это компонент, который вы хотите улучшить с помощью функций graphql.

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