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?
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}.jsgenerates 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