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

【问题标题】：How can I get data from a json via GraphQL and create dynamic pages in gatsby?如何通过 GraphQL 从 json 获取数据并在 gatsby 中创建动态页面？
【发布时间】：2021-11-05 09:47:46
【问题描述】：

在此处输入代码 - 它给我错误无法读取未定义的属性（读取“边缘”）当我删除的边缘来自 const {compdata} = data.allJson.edges.node;它对节点显示相同的错误。什么是映射这个的正确方法，我必须创建使用相同 json 文件的动态页面。请帮我解决这个问题。在此处输入代码文件路径

    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>
 )
}

【问题讨论】：

标签： json graphql gatsby

【解决方案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）。在上面的 sn-p 中，我正在循环访问您的 JSON 对象以动态创建动态页面。

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

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

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