静态查询“数据”未定义

Question

我是一个使用 gatsby 和strapi 的菜鸟。尝试制作一个使用 graphql 查询的简单组件。

import React from "react"
import {StaticQuery, graphql } from "gatsby"

export default ({data}) => (
    <StaticQuery
          query={graphql`
            query indQuery {
                allStrapiIndustry {
                    edges {
                      node {
                        title
                      }
                    }
                }
            }
          `}
          render={data.allStrapiIndustry.edges.map(document => (
            <header>
              <h1>{document.node.title}</h1>
            </header>
           ) )}
        />
    )
    

感谢任何帮助。

Answer 1

根据Gatsby's docs，你渲染数据的方式是错误的。您需要传递一个函数（而不是一个值），如下所示：

render={
  data => data.allStrapiIndustry.edges.map(document =>
  (
    <header>
      <h1>{document.node.title}</h1>
    </header>
  )
}