如何在 Gatsby 中从单个 json 文件创建多个页面答案

【问题标题】：How to create multiple pages from single json files in Gatsby如何在 Gatsby 中从单个 json 文件创建多个页面
【发布时间】：2023-03-17 08:12:01
【问题描述】：

我是 node.js 的新手，但我喜欢 gatsby.js。我已经按照我能找到的所有教程进行操作，这是一个很棒的工具。

然而，我想使用它的主要原因之一是我有一个包含 1000 条不同记录的文件 json，我想为每条记录生成一个新页面。

我相信我已经得出结论，我需要了解有关 gatsby-node.js 文件的更多信息，并且了解以下资源，但是是否有任何关于此主题的教程或其他示例可能更容易理解：

https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs

【问题讨论】：

标签： json node.js reactjs graphql gatsby

【解决方案1】：

你提到的例子应该已经给了你一个好主意。基本概念是导入 JSON 文件，遍历它并为 JSON 源中的每个项目运行 createPage。所以给出一个示例源文件，如：

_pages.json

[{
  "page": "name-1"
}, {
  "page": "name-2"
}]

然后您可以使用 Node API 为每个页面创建页面：

_{gatsby-node.js}

const path = require('path');
const data = require('./pages.json');

exports.createPages = ({ boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  // Your component that should be rendered for every item in JSON.
  const template = path.resolve(`src/template.js`);

  // Create pages for each JSON entry.
  data.forEach(({ page }) => {
    const path = page;

    createPage({
      path,
      component: template,

      // Send additional data to page from JSON (or query inside template)
      context: {
        path
      }
    });
  });
};

【讨论】：

你能写下对 template.js 的 graphql 查询吗？