Получение данных из Netlify CMS в Gatsby JS

Я создаю сайт с помощью Netlify CMS + Gatsby. У меня уже есть структура сайта и некоторые данные в Netlify, но у меня возникают проблемы с получением данных в Gatsby. Это то, что у меня есть

import React from 'react'

export default class IndexPage extends React.Component {
  render({data}) {
    const { edges: posts } = data.allMarkdownRemark

    return (
      <section className="section">
        <div className="container">
          <div className="content">
            <h1 className="has-text-weight-bold is-size-2"></h1>
          </div>
        </div>
      </section>
    )
  }
}

export const pageQuery = graphql`
  query IndexQuery {
    allMarkdownRemark(filter: {frontmatter: {templateKey: {regex: "/home-page|media-page/"}}}) {
      edges {
        node {
          excerpt(pruneLength: 400)
          id
          fields {
            slug
          }
          frontmatter {
            title
            templateKey
          }
        }
      }
    }
  }
`

И я получаю TypeError: Cannot read property 'data' of undefined


reactjs gatsby
person Federico Resnizky    schedule 17.05.2018    source источник
comment
Вам все еще нужна помощь? Вы не приняли ответ, поэтому вопрос остается открытым.   -  person coreyward    schedule 14.01.2020

Ответы (2)


arrow_upward
2
arrow_downward

props не передаются в рендеринг в качестве аргументов.

Попробуйте:

import React from 'react'

export default class IndexPage extends React.Component {
  render() {
    const { edges: posts } = this.props.data.allMarkdownRemark

    return (
      <section className="section">
        <div className="container">
          <div className="content">
            <h1 className="has-text-weight-bold is-size-2"></h1>
          </div>
        </div>
      </section>
    )
  }
}

export const pageQuery = graphql`
  query IndexQuery {
    allMarkdownRemark(filter: {frontmatter: {templateKey: {regex: "/home-page|media-page/"}}}) {
      edges {
        node {
          excerpt(pruneLength: 400)
          id
          fields {
            slug
          }
          frontmatter {
            title
            templateKey
          }
        }
      }
    }
  }
`
person talves    schedule 18.05.2018

arrow_upward
0
arrow_downward

Этот синтаксис деструктурирует:

render({ data })

Это похоже на это:

render(props) {
  data = props.data
}

Проблема, с которой вы столкнулись, заключается в том, что render не получает никаких аргументов / свойств.

Решение состоит в том, чтобы использовать this.props, как рекомендовано ответом @talves.

person coreyward    schedule 18.05.2018