Gatsby File System Route API: unique page for every array item

Question

In Gatsby I have nodes with values that contain arrays (from Airtable):

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

When I use Gatsby's File System Route API to create dynamic pages (eg {airtable.data__Projects}.js), then pages are created for each array used in each node, eg /projects/mainsite-backend/.

How do I get each item in each array in each node to have its own page, eg /projects/mainsite and /projects/backend?

[According to the maintainer](https://github.com/gatsbyjs/gatsby/discussions/26375#discussioncomment-722996), it is a limitation that you can't generate dynamic routes on non-top-level data (i.e. you have to be able to query it via the 'all' prefix, like 'allMdx' or 'allSite'). — Daryl Wright, Feb 05 '22 at 05:53

score 0 · Answer 1 · answered Aug 12 '21 at 16:42

The double underscore (__) notation that you are using in {airtable.data__Projects}.js I think it's creating a undesired route. According to the docs:

Using __ (double underscore) you signify that you want to access a nested field on a node. You can nest as deep as necessary, e.g. src/pages/products/{Product.fields__date__createdAt}.js generates the following query:
allProduct {
  nodes {
    id # Gatsby always queries for id
    fields {
      date {
        createdAt
      }
    }
  }
}

In your case, I think you are trying to do /projects/{airtable.data.Projects}.js.

Alternatively (and depending on your specifications) you can create a nested JSON structure inside Projects using a name field (what will hold your Mainsite and Backend values) and suit like like src/pages/projects/{Project.name}.js

Gatsby File System Route API: unique page for every array item

1 Answers1