如何将数据从GraphQL查询传递到以编程方式生成的页面上？

Question

我是GraphQL的初学者，无法从GraphQL查询访问数据。我已经能够控制台记录数据，这表明查询正在运行，但是当我尝试访问它时，出现错误消息“无法读取未定义的属性'page_name'”

查看我尝试过的变化图片：

https://i.ibb.co/6JS20K5/Graph-QL-1.png
https://i.ibb.co/wMq1V6g/Graph-QL-2.png
https://i.ibb.co/MN5g5Pk/Graph-QL-3.png

使用以下命令时，我可以在控制台中查看数据：     console.log（data.allPagesJson.edges）

我的理解是，为了访问我需要的确切数据，我应该使用：

console.log(data.allPagesJson.edges.node.page_name)

但是，这现在给我错误消息“无法读取未定义的属性'page_name'”。造成这种情况的原因似乎是“节点”未定义，但我不确定为什么...

这是我的页面模板：

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


export default ({ data }) => {
  console.log(data.allPagesJson.edges.node.page_name)
  return (

      <div>
        <h1>Test</h1>
      </div>

  )
}

export const query = graphql`
query($page_url: String!) {
  allPagesJson(filter: { page_url: { eq: $page_url } }) {
    edges{
      node{
        page_url
        page_name
      }
    }
  }
}

`

这是我的页面gatsby-node.js文件：

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
    const { createPage } = actions
    return graphql(`
    {
        allPagesJson {
          edges {
            node {   
             page_url
            }
          }
        } 

      }
    `
  ).then(result => {    
      result.data.allPagesJson.edges.forEach(({ node }) => {
        createPage({
            path: node.page_url,
            component: path.resolve(`./src/templates/product-pages.js`),
            context: {

                page_url: node.page_url,
      },
    })
  })
    })
  }

Answer 1

我设法解决了。我可以使用以下方式访问数据：

<div>
        {data.allPagesJson.edges.map(({ node }) => (
            <div key={node.id}>

                <h1>{node.page_name}</h1>


            </div>
          ))}


      </div>