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

Question

我是 GraphQL 的初学者，我无法从我的 GraphQL 查询访问数据。我已经能够控制台记录数据，这表明查询正在运行，但是当我尝试访问它时，我收到错误消息 "Cannot read property 'page_name' of undefined"

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

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)

但是，这现在给我错误消息 "Cannot read property 'page_name' of undefined"。原因似乎是 "node" 未定义，但我不确定为什么...

这是我的页面模板：

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>

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

How to pass data from a GraphQL query onto a programmatically generated page?

graphql

gatsby

这是我的页面模板：

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