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

Posted 2023-03-08

【中文标题】如何将 GraphQL 查询中的数据传递到以编程方式生成的页面上？

【英文标题】：How to pass data from a GraphQL query onto a programmatically generated page?

【发布时间】：2019-11-11 13:18:03

【问题描述】：

我是 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,
      ,
    )
  )
    )
  

【问题讨论】：

edges 是一个数组，因此您需要遍历数组才能访问每个数组项中的属性。

非常感谢您的提示，非常感谢！

【参考方案1】：

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

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

                <h1>node.page_name</h1>


            </div>
          ))


      </div>