Как передать данные из запроса GraphQL на программно сгенерированную страницу?

Question

Я новичок в GraphQL, и у меня возникают проблемы с доступом к данным из моего запроса GraphQL.Я смог сохранить данные в консоли, что показывает, что запрос работает, но когда я пытаюсь получить к нему доступ, я получаю сообщение об ошибке «Не удается прочитать свойство« имя_страницы »из неопределенного» * ​​1001 *

См. Изображения вариантов Iпробовал:

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)

Однако теперь это выдает мне сообщение об ошибке «Невозможно прочитать свойство« имя_страницы »из неопределенного».Кажется, причина этого в том, что «узел» не определен, но я не уверен, почему ...

Это шаблон моей страницы:

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>