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

Question

Я создаю сайт, используя 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: Невозможно прочитать свойство 'data' из неопределенного

Answer 1

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

render({ data })

Это похоже на следующее:

render(props) {
  data = props.data
}

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

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

Answer 2

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
          }
        }
      }
    }
  }
`