如何通过 GraphQL 从 json 获取数据并在 gatsby 中创建动态页面？

Question

在此处输入代码 - 它给我错误 Cannot read properties of undefined (reading 'edges') 当我删除边来自 const {compdata} = data.allJson.edges.node;它显示 node.What 相同的错误是映射这个的正确方法，我必须创建使用相同 json file.Please 的动态页面帮助我解决了这个问题。在此处输入代码文件路径

    src/data/data.json
    {
    "compdata": [
     {
     "id": 1,
      "title": "FlexBox",
      },
      {
       "id": 2,
     "title": "Grid layout",
      },
      ] }

graphQl query
query MyQuery {
allJson {
edges {
  node {
    compdata {
      id
      example
    }
    }
    }
     }
  }


 gatsby-config.js
 {
  resolve: `gatsby-transformer-json`,
  options: {
    typeName: `Json`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/data`,
    name: `data`
  },
},

this is my index.js
   export default function Home(data) {
  // const { compdata } = data.dataJson
  // console.log(data);
 const {compdata} = data.allJson.edges.node;
 console.log(compdata);
 return (
  <Layout>
     <h1>Home page</h1>
    <h1>{JSONData.title}</h1>
       <ul>
         {compdata.map((data1, index) => {
          return <li key={`content_item_${index}`}>{data1.example}</li>
          })}
       </ul>
 </Layout>
 )
}

Answer 1

你混淆了我在另一个答案中解释的内容 (How can I get data from a json via GraphQL?)。

直接导入JSON
使用 GraphQL（通过 gatsby-transformer-json）

要从 JSON（新信息）创建动态页面，您只需将 JSON 导入到您的 gatsby-node.js 文件中，因为动态魔术就在其中：

const path = require("path")
import JSONData from "../path/to/your/json/file.json"

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions

  const youtTemplateFile= path.resolve(`src/templates/yourTemplate.js`)

  JSONData.compdata.forEach((item) => {
    createPage({
      path: item.title,
      component: youtTemplateFile,
      context: {
         id: item.id,
       },
    })
  })
}

在这种情况下，您将创建使用模板 (youtTemplateFile) 的动态页面（通过 createPage API）。在上面的代码片段中，我正在遍历您的 JSON object 以动态创建动态页面。

自 path: item.title 以来，这些页面的 slug 将成为标题，但您可以自定义 JSON 以相应地添加新字段或将标题视为 slug（删除空格并小写） .

在这种情况下，我使用上下文 API 发送 id，这将允许您创建自定义过滤查询以从每个项目中获取数据（如果需要）。

节点将使用 gatsby-transformer-json 插件创建，因此您需要使用 GraphiQL playground (localhost:8000/___graphql) 来测试所有查询。

推荐读物：

如何通过 GraphQL 从 json 获取数据并在 gatsby 中创建动态页面？

How can I get data from a json via GraphQL and create dynamic pages in gatsby?

json

graphql

gatsby