File System Route API

[blainekasten]

People experimenting with File System Route API — this is the place to ask questions, report bugs, suggest ideas and collaborate on improvements.

Quick links:

• Docs
• Example

Known issues/Feature requests:

• An API to customize pageContext and/or pass other variables to the underlying createPagecall
• Resolve field that holds an array of X and create pages for it
• Ability to use a custom field/variable for the file name, e.g. {foobar}.js and define the shape (e.g. currently {Model.id}) inside the file
  • This is quite important for theme shadowing
• Better handling of group queries

[t2ca]

I followed your example code and I'm getting the following error. However when i tried the pre release (yarn add gatsby@unifiedroutes) it was working perfectly fine.

 ERROR

Collection page builder encountered an error parsing the filepath. To use collection paths the schema to follow is {Model.field}. The problematic part is: {label}.js.
filePath: /Users/admin/Desktop/Projects/t2/t2.ca/src/pages/product/{label}.js

failed createPagesStatefully - 0.144s

EDIT: Sorry, I was using the outdated example. Once I followed the updated instructions, everything is working fine. Thanks @blainekasten for the great work!

[blainekasten]

It looks like the reason for the failure is that you are missing the graphql model in the filepath. You have {label}.js but it needs to be something like {Model.label}.js

[noskovvkirill]

Hi! I'm running into the issue. 'Gatsby develop' runs successfully, but pages are not created. When I try to open the page under the localhost, I see 404 and /users/[id] as an existing page. I've tried to clean up the cache but it didn't help. Did I miss anything?

success open and validate gatsby-configs - 0.049s
success load plugins - 2.038s
success onPreInit - 0.016s
success initialize cache - 0.011s
success copy gatsby files - 0.085s
success onPreBootstrap - 0.021s
success createSchemaCustomization - 0.059s
Starting to fetch data from Contentful
info Fetching default locale
info default locale is: ru
info contentTypes fetched 6
info Updated entries 24
info Deleted entries 0
info Updated assets 12
info Deleted assets 0
Fetch Contentful data: 7.806s
success source and transform nodes - 8.165s
success building schema - 0.869s
success createPages - 0.067s
success createPagesStatefully - 0.172s
success updating schema - 0.057s
success onPreExtractQueries - 0.003s
success extract queries from components - 0.765s
success write out redirect data - 0.042s
success Build manifest and related icons - 0.215s
success onPostBootstrap - 0.245s
info bootstrap finished - 18.423s
success run static queries - 1.297s - 12/12 9.25/s
success run page queries - 0.227s - 21/21 92.69/s
success write out requires - 0.025s
success Generating image thumbnails - 15.239s - 78/78 5.12/s```

[blainekasten]

@noskovvkirill I'm expecting to see some specific logs if you are using collection routes and I'm not seeing them. What is the file system path of the collection or client route you expected to see? You mentioned /users/[id] I'm assuming you have a file that is src/pages/users/[id].js ? If so, what happens when you visit localhost:8000/users/123

[czabaj]

Hi there,

Found 1 bug in the documentation.

The Routing and linking section contains an example with a colon products/{Product:name}, a dot must be there (there are two occurrences of this bug).

Also, the example query could probably reflect better Relay convention -- nesting data in { edges { node { ... } } }.

I'm very happy with GQL errors, which provides useful hints for filePath argument 👍

Encountered one caveat with gatsbyPath field

I have a problem with gatsby-plugin-page-creator. If some page needs specific components, utilities, or other files, we colocate all its auxiliaries in its directory. E.g. page /shop lives in shop/index.js and its specific React components lies in shop/components/. This is the so-called Deletable React application design. Obviously, we want these auxiliary files to be ignored by gatsby-plugin-page-creator but current default ignore pattern are insufficient and built-in configuration of gatsby-plugin-page-creator cannot be overridden, so I configured new instance of gatsby-plugin-page-creator plugin, which sources src/web/ instead of src/pages/ and I configured the ignore pattern to match also all directories which starts with an underscore (by default, only files with a leading underscore are ignored).

The filePath argument of gatsbyPath field counts with sourcing the files from src/pages/, you must enter an absolute path, which is relative to src/pages/. I could hack this with absolute route containing a double dot, e.g. /../web/shop/{Product.name}, but it is not obvious, nor readable.

I would prefer to use Gatsbys default pages/ directory, I will look into ways how to override/enhance default ignore pattern, but still sourcing different path than src/pages/ is currently hacky 😕

EDIT: hacky double-dot path breaks function -- it generates relative URL with leading /../web/ path segments.

EEDIT: config override for gatsby-plugin-page-creator is possible.

[noskovvkirill]

@noskovvkirill I'm expecting to see some specific logs if you are using collection routes and I'm not seeing them. What is the file system path of the collection or client route you expected to see? You mentioned /users/[id] I'm assuming you have a file that is src/pages/users/[id].js ? If so, what happens when you visit localhost:8000/users/123

Excuse me, I simply didn't have the last version of Gatsby. It works now. Thank you!

[blainekasten]

Thanks for all the great feedback @czabaj!

I've fixed the documentation and i'll look into the problem you mentioned with gatsbyPath. Now that I'm thinking about it I definitely did not think about adding support for the ignore option

[czabaj]

Is it possible to use FS routes to generate collection pages from nested data?

For example, consider nested collection (simplified):

Products = [
    { category: 'shirts', items: ['blue', 'white', 'yellow'] },
    { category: 'pants', items: ['blue', 'lime', 'dodgerblue'] }
]

I want to translate such data into routes:

/product/shirts
/product/pants
/product/shirts/blue
/product/shirts/white
/product/shirts/yellow
/product/pants/blue
/product/pants/lime
/product/pants/dodgerblue

Creating category pages is simple, just create file /product/{Product.category}.

But how create nested collection routes?

EDIT: The main hurdle here is to dynamically create the penultimate path segment in URI, item Products[0][0] should use URI Product[0].category/Product[0].items[0], it is hard to encode such relation in file name.

[czabaj]

Found another minor issue with the sitemap plugin - currently, it exposes dynamic routes.

E.g. /src/pages/users/[id].js creates record in sitemap.xml

<url>
   <loc>https://example.com/users/[id]/</loc>
</url>

In my case, I don't want to expose dynamic pages in Sitemap at all and I think this is the common goal.

This config handles it

{
	resolve: `gatsby-plugin-sitemap`,
	options: {
		serialize: ({
			site: {
				siteMetadata: { siteUrl },
			},
			allSitePage,
	}) => {
			const reDynamicPage = /\[[\w.]+\]\/$/
			return allSitePage.edges
				.filter(
					(edge) =>
						// remove empty nodes
						edge &&
						// filter out all dynamic pages created with FS API
						!reDynamicPage.test(edge.node.path)
				)
				.map(({ node: { path } }) => {
					return {
						url: siteUrl + path,
						changefreq: `weekly`, // adjust to your preferences
						priority: 1, // adjust to your preferences
					};
				});
		},
	},
},

[czabaj]

Regarding nested collections, how about support also dynamic directories? Given example above, one could accomplish the desired URIs with file structure /src/pages/product/{Product.category}/{Product.items.name}.js, where {Product.items.name}.js would implicitly filter for Product with category of currently generated {Product.category}?

[andreme]

@blainekasten I'm trying to create my pages from a gatsby-source-graphql data source and have run into the problem that my schema does not have a nodes list, which is forced on me by the CollectionPagesQueryFragment.
Why can't I write my query without it?
The file name also still requires the Model name? I would have thought using collectionQuery would remove that requirement.

[ynnoj]

I was checking out the new file system routing APIs and ran into some trouble when trying to use the gatsbyPath field on types from gatsby-source-graphcms. The source plugin uses the new gatsby-grpahql-toolkit.

export const pageQuery = graphql`
  query IndexPageQuery {
    products: allGraphCmsProduct {
      nodes {
        name
        gatsbyPath(filePath: "./{GraphCmsProduct.slug}")
      }
    }
  }
`;

As I understand from your docs, the gatsbyPath field is generated on models used by the routing API (in this case GraphCMS_Product). However the query above errors:

error Cannot query field "gatsbyPath" on type "GraphCMS_Product"

There's a full reproduction available here. Thanks!

[LekoArts]

To all previous comments: I'm taking over this feature and slowly getting up to speed. Eventually I'll get back to you and look into the issue :)

---

@ynnoj Thanks for the report! Just a quick check: Does it change anything when you remove the . in the path?
The gatsbyPath field gets added here so e.g. the problem could be that the type isn't there yet when it tries to add it.

[ynnoj]

@ynnoj Thanks for the report! Just a quick check: Does it change anything when you remove the . in the path?
The gatsbyPath field gets added here so e.g. the problem could be that the type isn't there yet when it tries to add it.

Same issue unfortunately. Is the path relative or absolute?

[LekoArts]

Current requirement is to start it with a / so that's why I asked :)

[angeloashmore]

Hi, I'm encountering an error where if the value in the curly braces is "/", the resulting page URL is "/.js/".

Failing example:
File path: src/pages/{PrismicPage.url}.js
Value of PrismicPage.url: /
Resulting URL: /.js/

Working example:
File path: src/pages/{PrismicPage.url}.js
Value of PrismicPage.url: /about/
Resulting URL: /about/

Working example:
File path: src/pages/{PrismicPage.url}.js
Value of PrismicPage.url: /about/child/
Resulting URL: /about/child/

It seems like there's an issue in the way the filename is parsed/split after being populated.

How would someone create a root index page using the file system route API when using user-generated content from a CMS?

Thanks @LekoArts 🙏

[angeloashmore]

Thanks @kimbaudi!

Unfortunately, this field is also used throughout the app for links. Changing this value from / to /index would break links.

Of course, I could add an extra field via createSchemaCustomization like routeUrl that makes that change, but that seems unnecessary. Could the file system routing API convert / to /index automatically since that is the only value it could represent?

[kimbaudi]

Could the file system routing API convert / to /index automatically since that is the only value it could represent?

I don't think it is possible. If you wanted to create a page at the root directory of your website using Gatsby, you would normally have to put an index.js file under src/pages. That is how gatsby-plugin-page-creator automatically creates the root page. The file system route api is also expecting /index to create a page. I don't think there is any way around that. What you can do is just create some utility methods that help you convert from / to /index and vice-versa.

Personally, I think this pattern is pretty cool and useful. In fact, I have a pages.json with an array of objects defining my pages:

pages.json:

[
  {
    "name": "home",
    "title": "Home",
    "route": "/index",
    "layout": "blank"
  },
  {
    "name": "404",
    "title": "Not Found",
    "route": "/404"
  },
  {
    "name": "about",
    "title": "About",
    "route": "/about"
  }
]

and under my src/pages folder, I have a file called {Page.route}.jsx that will create pages based off the route field provided in pages.json.

and I have a utility method to handle / and /index:

const routeToPath = (route) => (route === '/index' ? '/' : route)

const pathToRoute = (path) => (path === '/' ? '/index' : path)

Also, you should be able to reference location.pathname from the page context so even if you use /index, you can still get / value using location.pathname

[angeloashmore]

PR to implement root index route: #31339

[kimbaudi]

I hope your pr gets accepted

[LekoArts]

Thanks for the PR, I'll review it shortly

[motleydev]

I had an issue arise, similar to the one being solved by this recomendation

I have two content directories with mdx files, let's call them /content/presenters and /content/presentations

/content/presenters has a front-matter schema of:

• name
• slug
• title
• company

/content/presentations has a front-matter schema of:

• title
• slug
• length
• presenters

When we source those in gatsby-config we end up with a merged schema for content in both subdirectories, also when sourcing them in two different instances with unique sourceInstanceName declarations.

An ideal scenario would be where we could declare what the Root Type would be for that sourcing, so we could say this content is, such as Presentations or Presenters.

An additional problem arises when trying to create an @link between these two types as well, given their front-matter is merged. But that's a bit out of scope of this problem.

As of know, it's not really possible to use the {} notation under something like pages/speakers{speaker.slug}, which is a really clean mechanism that I'd like to use.

Obviously we can create the same effect with createPages but I feel like there should be a way to identify the sourced folder of files similar to how an authors.yaml becomes Authors when sourced.

[kimbaudi]

I think your issue can be solved with createSchemaCustomization and createResolvers by creating custom PresentationsMdx and PresentersMdx types along with custom PresentationsMdxFrontMatter and PresentersMdxFrontMatter types and creating resolvers for those types:

gatsby-node.js

exports.createSchemaCustomization = ({
  actions: { createTypes },
  schema,
}) => {
  const typeDefs = `
  type PresentationsMdxFrontMatter {
    title: String
    slug: String
    length: Number
    presenters: [String]
  }
  type PresentationsMdx implements Node {
    frontmatter: PresentersMdxFields
  }
  type PresentersMdxFrontMatter {
    name: String
    slug: String
    title: String
    company: String
  }
  type PresentersMdx implements Node {
    frontmatter: PresentersMdxFields
  }
  `
  createTypes(typeDefs)
}

exports.createResolvers = ({ createResolvers }) => {
  createResolvers({
    Query: {
      presentations: {
        type: `[PresentationsMdx!]!`,
        resolve(source, args, context, info) {
          return context.nodeModel.runQuery({
            query: {
              filter: { fields: { sourceInstanceName: { eq: `presentations` } } },
            },
            type: `PresentationsMdx`,
            firstOnly: false,
          })
        },
      },
      presenters: {
        type: `[PresentersMdx!]!`,
        resolve(source, args, context, info) {
          return context.nodeModel.runQuery({
            query: {
              filter: { fields: { sourceInstanceName: { eq: `presenters` } } },
            },
            type: `PresentersMdx`,
            firstOnly: false,
          })
        },
      },
    },
  })
}

gatsby-config.js

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `presentations`,
        path: path.resolve(__dirname, `content/presentations`),
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `presenters`,
        path: path.resolve(__dirname, `content/presenters`),
      },
    },

I'm making some assumptions about your frontmatter types

[motleydev]

Thanks @kimbaudi - this is an approach I was looking into - I think it is quite a bit of "extra" effort there on top, but might be the best way to get the best of both. I'll have a look into it again. I was having some opaque errors yesterday when I was trying this.

[AnilSonix]

Hello,
I need some help regarding file-based routing.

I tried to create pages using File-based routing.
The nodes (coming from Strapi) have a slug.
The file path is: pages/outfitters/{strapiOutfitters.slug}.tsx.

All the pages get generated successfully.
But the params generated by Gatsby are in lowercase and have some dashes, which is different from the slug field coming from Strapi.
I used slugify to generate slugs in Strapi

 pageContext: {
    id: 'Outfitters_6098dcff49a2cc38c828e077',
    slug: 'Dave-McMillan9ZWbDa1e',
    __params: { slug: 'dave-mc-millan9-z-wb-da1e' }
  },
  params: { slug: 'dave-mc-millan9-z-wb-da1e' }

Dave-McMillan9ZWbDa1e is from Strapi.
dave-mc-millan9-z-wb-da1e is being generated.

I can't navigate to these pages.

[schickm]

As a beginner to using Gatsbyjs, one thing that caught me off guard was that the File System API doesn't seem to be able to use graphql relationships as parts of the filename. It seems that you can only use what's available as data in the actual Redux node object. For Example:

Given the standard relationship that MarkdownRemark has to a File:

/src/pages/{MarkdownRemark.file__name}/{MarkdownRemark.frontmatter__slug}.js

This wasn't working for me when I would try and Generate a gatsbyPath() for it. I'd end up seeing the warning in the console that Gatsby couldn't derive the path. It was only after tracing my way into the code did I realize that the plugin was only capable of pulling information off the Node object itself, and not actually traversing graphql relationships.

I'm sure there's a perfectly good technical reason why this is either really hard to pull off, or not possible at all given Gatsby's architecture. I just think it might deserve being called out front and center in the documentation, as it is easily over looked (and you only see that console error if you're running in gatsby develop --verbose.

If you all would entertain a docs PR, I'd be happy to submit one that clarifies that. The existing 1 liner on "Creating and Modifying Pages" introduces the File System Route API as:

By using the File System Route API to programmatically create pages from GraphQL and to create client-only routes.

To me that sounds like if I can query it in GraphQL then I can reference it in the API, but by experience with gatsbyPath seems to say otherwise. Unless I'm totally off base and am doing something wrong!

[LekoArts]

You can access parent nodes (e.g. File nodes): https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/#parentheses-notation

[herecydev]

@LekoArts It's been a while and there's still no support for "An API to customize pageContext and/or pass other variables to the underlying createPagecall".

How do we get that effort moving? Did you have a design in mind that you would accept a PR for?

[LekoArts]

Our priorities are currently on a different big project so yeah, it's still a TODO. Not too many people (publicly) asked for this so it's been lower in priority.

We don't have a final design for it so that would need to be done first (e.g. as an RFC)

[ehowey]

Just jumping in to say that I ran into this today and had to back out to createPages...not a huge deal but would have been nice to stick with the File System Route API because it is so nice.

[angeloashmore]

I'm curious what kind of API would make sense for passing context via the File System Route API. It seems to me that createPages is the ideal API when more granular control is needed.

Perhaps by allowing a special getPageContext function within the page file, similar to Gatsby 4's getServerData function?

[MattHughson]

Hi all,

I have a small syntax issue trying to load pages dynamically.

in the gatsby graphql data I successfully linked my hasura DB but in order to query it I have a nested model in the query

I named my page file like this:

{Hasura__Requests.shorturl}.js

which returns an error:

Cannot query field "allHasuraRequests" on type "Query". Did you mean "allHasuras"?

I also tried naming the file like this:

{Hasura__Requests_aggregate.shorturl}.js

which return this error:
Cannot query field "allHasuraRequestsAggregate" on type "Query".

and I also tried this:

File name:
{Hasura.Requests_aggregate.shorturl}.js

Which returned this:

PageCreator: Collection page builder encountered an error parsing the filepath. To use
collection paths the schema to follow is {Model.field__subfield}. The problematic part is:
{Hasura.Requests_aggregate.shorturl}.js.

Is there away to get access to my nodes?

[angeloashmore]

I think you are using the wrong type name in your filename. It looks like it should be {Hasuras__Requests.shorturl}.js (note "Hasuras" with an "s").

[lewiscarvillesputnik]

Hi @LekoArts,

Is there a way to conditionally create pages by querying a fields value?

/src/pages/{data.tier==="Elite"&&data.slug}.tsx

[renrizzolo]

I'm not sure if this fits your use case (it's not conditional per se; non data.tier==="Elite" pages will still be created under their own sub-route) but you should be able to do something like this:

src/pages/{data.tier}/{data.slug}.tsx

This would create pages with urls like /elite/slug, /another-tier/slug

[lezan]

* An API to customize `pageContext` and/or pass other variables to the underlying `createPage`call

Sorry to ask, but I am still not sure if I unstertand all. Is it still a feature request, right?
I need to fetch just one time data at runtime and then fed each single client-route routes with data. At the moment this is not possible?

Thanks!

[bitensam]

Hi,

I have a problem with creating dynamically pages with this API. I keep receiving an error:

PageCreator: Could not find a value in the node for projects/{StrapiProject.data__attributes__Title}.js. Please make
sure that the syntax is correct and supported.

In graphQL the value is showing

After server restart it creates new page: http://localhost:8000/projects/%7BStrapiProject.data__attributes__Title%7D/ but it should be something like this: http://localhost:8000/projects/whisperer-chat-app

Looking for help, cheers :)

[rolandsaven]

I wonder if there is any plan to tackle the following (known) issue that was mentioned by the original author?
Resolve field that holds an array of X and create pages for it

[davidkartuzinski]

This is exactly why I am here as well. Nested strings, such as Tags listed in the Frontmatter don't seem to be able to dynamically create pages. Using, for example, {mdx.frontmatter__tags}.js does not work. This is due to me not knowing how to handle the array. Others in this thread have mentioned this is an issue.

@KyleAMathews, in this thread, mentioned something like {mdx.frontmatter__tagsArray}.js but that doesn't work.

I have also tried to do something like this:

For this query:

{
  allMdx {
    group(field: frontmatter___tags) {
      fieldValue
    }
  }
}

I tried this (and a bunch of variations) of {allMdx.group__(frontmatter__tags}__fieldvalue}.js but I could not get it to work and just got errors.

@LekoArts do we just need to continue to use gatsby-node.js for this scenario?

[cpboyd]

@davidkartuzinski I ended creating a YAML listing of all tags like: https://github.com/LekoArts/portfolio-v2/blob/main/www/src/data/category.yaml

The primary downside is that it's not automated from the Gatsby rendering side, so you have to maintain your own listing of tags. (Further, if you attempt to use a tag not specified, it results in that tag being parsed as null which could lead to unexpected results.)

One upside is that you can specify your own Tag GraphQL type:

    type Tag implements Node {
      name: String!
      slug: String! @slugify(fallback: "tags")
      posts: [Post] @link(by: "tags.elemMatch.name", from: "name")
      postCount: Int @array(count: true, on: "[Post]", by: "tags.elemMatch.name", from: "name")
    }

It might be nice to have some kind of automated aggregation for tags (probably via some sort of built-in field extension script), but that's probably beyond the scope for this API.

[davidkartuzinski]

@cpboyd Thanks Chris. I will look into this. The "old-school" way of using gatsby-node.js works, but I am really excited to implement the new features and APIs! Thank you and I will check this out.

[Lightwight]

Working on a Windows 10 System using your mentioned example i encountered the following problems:

Problem 1: Error on start by running the shell command gatsby develop:

Error in "[...]\examples\route-api\node_modules\gatsby-plugin-page-creator\gatsby-node.js": Invalid regular expression: /parks\(.+)/: Unmatched ')'

  SyntaxError: Invalid regular expression: /parks\(.+)/: Unmatched ')'

  - String.match

  - get-collection-route-params.js:32
    [gatsby-route-api]/[gatsby-plugin-page-creator]/get-collection-route-params.js:32:105

  - Array.forEach

  - get-collection-route-params.js:25 getCollectionRouteParams
    [gatsby-route-api]/[gatsby-plugin-page-creator]/get-collection-route-params.js:25:20

  - get-collection-route-params.js:47 Object.<anonymous>
    [gatsby-route-api]/[gatsby-plugin-page-creator]/get-collection-route-params.js:47:1

  - loader:1105 Module._compile
    node:internal/modules/cjs/loader:1105:14

  - loader:1159 Object.Module._extensions..js
    node:internal/modules/cjs/loader:1159:10

  - loader:981 Module.load
    node:internal/modules/cjs/loader:981:32

  - loader:822 Function.Module._load
    node:internal/modules/cjs/loader:822:12

  - loader:1005 Module.require
    node:internal/modules/cjs/loader:1005:19

  - helpers:102 require
    node:internal/modules/cjs/helpers:102:18

  - gatsby-node.js:38 Object.<anonymous>
    [gatsby-route-api]/[gatsby-plugin-page-creator]/gatsby-node.js:38:33

  - loader:1105 Module._compile
    node:internal/modules/cjs/loader:1105:14

  - loader:1159 Object.Module._extensions..js
    node:internal/modules/cjs/loader:1159:10

  - loader:981 Module.load
    node:internal/modules/cjs/loader:981:32

  - loader:822 Function.Module._load
    node:internal/modules/cjs/loader:822:12


not finished load plugins - 0.463s

Explanation:

The value of the parameter urlTemplate was /parks\{park.meta__location__type}/[name]/
which causes a wrong regex because of the backslash.

After hacking the file node_modules/gatsby-plugin-page-creator/get-collection-route-params.js:[Line 18]

from const templateRegex = cleanedUrlTemplate.replace(/\./g, \.).replace(/(\{.*?\})/g, (.+)).split(/);
to const templateRegex = cleanedUrlTemplate.replace(/\\/g, /).replace(/\./g, \.).replace(/(\{.*?\})/g, (.+)).split(/);

On basis of lack of time i couldn't determine why the value of the parameter was wrong. But now running gatsby develop works with the temporarily hack.

Problem 2:

After resolving Problem 1 i can't open any link to a Park-Page on the served page _(i.e http://localhost:8000/parks/resort/romanworld/; Romanworld).

According the [gatsby documentation] the nested route parks/{park.meta__location__type}/{park.name} should work.

If i query the data via graphiQL

query MyQuery {
  parks: allPark {
      group(field: meta___location___type) {
        fieldValue
        nodes {
          name
          gatsbyPath(filePath: "/parks/{park.meta__location__type}/{park.name}")
        }
      }
    }
}

I get a valid result:

{
  "data": {
    "parks": {
      "group": [
        {
          "fieldValue": "Resort",
          "nodes": [
            {
              "name": "Medievalworld",
              "gatsbyPath": "/parks/resort/medievalworld/"
            },
            {
              "name": "Romanworld",
              "gatsbyPath": "/parks/resort/romanworld/"
            }
          ]
        },
        {
          "fieldValue": "Theme Park",
          "nodes": [
            {
              "name": "Fantasyworld",
              "gatsbyPath": "/parks/theme-park/fantasyworld/"
            },
            {
              "name": "Park Five",
              "gatsbyPath": "/parks/theme-park/park-five/"
            },
            {
              "name": "The Raj",
              "gatsbyPath": "/parks/theme-park/the-raj/"
            },
            {
              "name": "Shōgunworld",
              "gatsbyPath": "/parks/theme-park/shogunworld/"
            },
            {
              "name": "Westworld",
              "gatsbyPath": "/parks/theme-park/westworld/"
            }
          ]
        }
      ]
    }
  },
  "extensions": {}
}

The product-page works well.

Hint:
If i move the files [name].js and {park.name}.js from src/pages/parks/{park.meta__location__type}/ to /src/pages/parks with following adjustments:

1. file /src/pages/parks/{park.name}.js : import ParkView from "../../../views/park-view" to import ParkView from "../../views/park-view"
2. file /src/pages/index.js (adjustment graphQL-query for parks) :

parks: allPark {
      group(field: meta___location___type) {
        fieldValue
        nodes {
          name
          gatsbyPath(filePath: "/parks/{park.name}")
        }
      }
    }

What did i miss to get this running with nested routes?
Thx for your reply.

[shrop]

I am pretty excited about migrating to File System Route API fully for a large-scale decoupled Drupal with Gatsby project as it will dramatically improve performance. Noting that one thing that we don't need in most decoupled projects is the dependency on https://www.npmjs.com/package/@sindresorhus/slugify. Drupal generates its path patterns, so we want to use those.

Related to this API, how are things progressing on the next steps such as passing context? I haven't heard much news on this as of late.

[laradevitt]

I'm getting a route "/null/" generated when the field returns null value. Is this as designed? I'm having to abandon this method in favour of createPages() just so I can add this check.

[fmacedoo]

Hi guys,

Recentely I've started creating a website with gatsby and for the pages based on collection I would like to use the File System Route API.

Basically I have a Hasura instance that is configured as below:

{
	resolve: 'gatsby-source-graphql',
	options: {
		typeName: 'Hasura',
		fieldName: 'hasura',
		url: process.env.HASURA_GRAPHQL_ENDPOINT,
		headers: {
			'Content-Type': 'application/json',
			'x-hasura-admin-secret': process.env.HASURA_GRAPHQL_ADMIN_SECRET,
		},
	},
}

The issue here is I am not able to create a file on the pattern describe here because it is always trying to do a query on a specific pattern as we may see on the file:
https://github.com/gatsbyjs/gatsby/blob/fd8de341684df7aa5fcd911a25786beac471925c/packages/gatsby-plugin-page-creator/src/extract-query.ts#L24C2-L24C2

So that I have the error:
pagecreator Cannot query field "allHasura" on type "Query". Did you mean "hasura"?

The structure I have on the added source named hasura is like below:

[skand888]

Is there a way to allow dots in automatically generated slugs? We need it for backward compatibility, and some things like version numbers look better with dots.

I can change slugify options for gatsby-plugin-page-creator, but it uses @sindresorhus/slugify version 1.1.2 which does not have preserveCharacters option yet.

This code does not result in any changes:

    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/pages-dynamic/`,
        slugify: {
          preserveCharacters: ['.'],
        },
      },
    },