Gatsby 文件系统路由 API：每个数组项的唯一页面

【问题标题】：Gatsby File System Route API: unique page for every array itemGatsby 文件系统路由 API：每个数组项的唯一页面
【发布时间】：2021-10-12 04:48:09
【问题描述】：

在 Gatsby 中，我的节点的值包含数组（来自 Airtable）：

"edges": [
        {
          "node": {
            "data": {
              "Name": "Simon",
              "Projects": [
                "Mainsite", "Backend"
              ],
              "Locations": [
                "UK", "USA"
              ]
            }
          }
        },
...

当我使用 Gatsby 的 File System Route API 创建动态页面（例如 {airtable.data__Projects}.js）时，会为每个节点中使用的每个数组创建页面，例如 /projects/mainsite-backend/。

如何让每个节点的每个数组中的每个项目都有自己的页面，例如/projects/mainsite 和/projects/backend？

【问题讨论】：

According to the maintainer，这是一个限制，你不能在非顶级数据上生成动态路由（即你必须能够通过'all'前缀查询它，比如' allMdx' 或 'allSite'）。

标签： javascript arrays graphql gatsby jamstack

【解决方案1】：

您在{airtable.data__Projects}.js 中使用的双下划线 (__) 表示法我认为它创建了一条不受欢迎的路线。根据文档：

使用__（双下划线）表示您想要访问节点上的嵌套字段。您可以根据需要嵌套尽可能深，例如 src/pages/products/{Product.fields__date__createdAt}.js 生成以下查询：
allProduct {
  nodes {
    id # Gatsby always queries for id
    fields {
      date {
        createdAt
      }
    }
  }
}

在你的情况下，我认为你正在尝试做/projects/{airtable.data.Projects}.js。

或者（取决于您的规范）您可以使用name 字段（将保存您的Mainsite 和Backend 值）在Projects 内创建一个嵌套的JSON 结构，并适合src/pages/projects/{Project.name}.js

【讨论】：