Как отфильтровать представления формы staticman на соответствующую страницу в Gatsby

Question

Я создаю обзорный сайт в Гэтсби. Мои страницы создаются во время сборки из удаленного источника API.

Я интегрировал Staticman со своей сборкой Gatsby. Я могу успешно отправить форму, которая затем сохраняется в / src / data / review / property- [перечисление_id ] / review- [list_id] - [timestamp] .yml

Представления формы - yaml, и я использую gatsby-transformer-yaml с gatsby-source-filesystem для доступа к данным через graphql.

Я могу достаточно легко запросить данные, используя staticquery, но это возвращает все представленные материалы.

Я борюсь с тем, чтобы отфильтровать представленные материалы на соответствующей странице ie странице, на которой они находились. представленный.

Используя graphiql с этим запросом, я получаю именно те данные, которые мне нужны, но не могу отобразить их. Я получаю 'Не удается прочитать свойства' ребер неопределенных '.

query($slug: String!) {
    property(listing_id: { eq: $slug }) {
      description
      listing_id
    }
    allReviewsYaml(
      filter: { fields: { slug: { eq: $slug } } }
      sort: { fields: date, order: DESC }
    ) {
      edges {
        node {
          name
          review
          listing_id
        }
      }
    }
  }

Возможно, я подхожу к этому неправильно?

Answer 1

Я заглянул в ваш репозиторий , позвольте мне попытаться обобщить то, что вы пробовали до сих пор:

1. Вы создаете страницы свойств, используя в gatsby-node.js, передавая propertyId через контекст к вашему property.js шаблону страницы
2. В шаблоне property.js вы запрашиваете данные о недвижимости и их обзоры, используя запрос страницы Гэтсби
3. В компоненте reviews.js вы отображаете отзывы на основе propertyId, используя Gatsby useStaticQuery hook

Исправление Cannot read property 'edges' of undefined

Назад на ваш вопрос:

Возможно, я подхожу к этому неправильно?

Хорошая новость: ваш подход в порядке!

Использование graphiql с этим запросом я получаю именно те данные, которые мне нужны, но не могу отобразить их. Я получаю «Не удается прочитать свойства» ребер неопределенного значения.

После просмотра вашего кода я предполагаю, что вы говорим о этих строках . Вот упрощенное воспроизведение:

export const query = graphql`
  yourQuery {}
`

const Property = (props) => {
  query.allReviewsYaml.edges.map(edge => (
    <p>{edge.node.name}</p>
  ))
}

Вы пытаетесь получить доступ к результатам запроса страницы Гэтсби (см. Шаг 2 выше), но allReviewsYaml равно undefined.

. решение: Вы можете получить доступ к результатам запроса страницы Gatsby через реквизиты :

export const query = graphql`
  yourQuery {}
`

const Property = (props) => {
  // results of an exported GraphQL page query are exposed in `props.data`
  props.data.allReviewsYaml.edges.map(edge => (
    <p>{edge.node.name}</p>
  ))
}

Из документов Gatsby на Запрос данных на страницах с GraphQL :

Подставка данных содержит результаты запроса GraphQL и соответствует ожидаемой форме.

Примечание. Я отправил PR в ваш репозиторий для тестирования решения. Вы можете увидеть результаты запроса от property.js, отображаемого в http://localhost: 8000 / property / 52882945 , например.

Предупреждение о переменных в useStaticQuery

Следующий логический шаг отсюда - визуализация обзоров в отдельном компоненте Reviews (см. Шаг 3 выше).

Использование хука useStaticQuery хорошо, но не будет работа в вашем случае: useStaticQuery не может принимать переменную ( пока ).

Это означает, что вы не сможете передать свой компонент reviews.js a propertyId реквизит для запроса и рендеринга всех обзоров свойств.

Вместо этого вам следует запросить все необходимые данные в запросе страницы (т. Е. В property.js) и передать данные без сохранения состояния. Review (не Reviews) компонент.

Это будет выглядеть примерно так (это ваш property.js):

export const query = graphql`
  yourQuery {
    // here, query all property AND review data
  }
`

const Property = ({ data }) => {
  // render the property page
  // ...

  // render the reviews
  data.allReviewsYaml.edges.map({ node } => {
    // TODO build the `Review` component
    return (
      <Review review={node} />
    )
  )
}

Надеюсь, мой ответ принес некоторый полезный контекст и решения для запроса данных с GraphQL в Гэтсби! Не стесняйтесь комментировать или публиковать новый вопрос, если у вас возникнут новые проблемы.

Получайте удовольствие от строительства вместе с Гэтсби!