File System Route API #26375
Replies: 61 comments 52 replies
-
|
I followed your example code and I'm getting the following error. However when i tried the pre release ( EDIT: Sorry, I was using the outdated example. Once I followed the updated instructions, everything is working fine. Thanks @blainekasten for the great work! |
Beta Was this translation helpful? Give feedback.
-
|
It looks like the reason for the failure is that you are missing the graphql model in the filepath. You have |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
@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 |
Beta Was this translation helpful? Give feedback.
-
|
Hi there, Found 1 bug in the documentation.The Routing and linking section contains an example with a colon Also, the example query could probably reflect better Relay convention -- nesting data in I'm very happy with GQL errors, which provides useful hints for Encountered one caveat with
|
Beta Was this translation helpful? Give feedback.
-
Excuse me, I simply didn't have the last version of Gatsby. It works now. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for all the great feedback @czabaj! I've fixed the documentation and i'll look into the problem you mentioned with |
Beta Was this translation helpful? Give feedback.
-
|
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: Creating category pages is simple, just create file But how create nested collection routes? EDIT: The main hurdle here is to dynamically create the penultimate path segment in URI, item |
Beta Was this translation helpful? Give feedback.
-
|
Found another minor issue with the sitemap plugin - currently, it exposes dynamic routes. E.g. 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 |
Beta Was this translation helpful? Give feedback.
-
|
Regarding nested collections, how about support also dynamic directories? Given example above, one could accomplish the desired URIs with file structure |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
I was checking out the new file system routing APIs and ran into some trouble when trying to use the export const pageQuery = graphql`
query IndexPageQuery {
products: allGraphCmsProduct {
nodes {
name
gatsbyPath(filePath: "./{GraphCmsProduct.slug}")
}
}
}
`;As I understand from your docs, the
There's a full reproduction available here. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
Same issue unfortunately. Is the path relative or absolute? |
Beta Was this translation helpful? Give feedback.
-
|
Current requirement is to start it with a |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I'm encountering an error where if the value in the curly braces is "/", the resulting page URL is "/.js/". Failing example: Working example: Working example: 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 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @kimbaudi! Unfortunately, this field is also used throughout the app for links. Changing this value from Of course, I could add an extra field via |
Beta Was this translation helpful? Give feedback.
-
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 Personally, I think this pattern is pretty cool and useful. In fact, I have a
[
{
"name": "home",
"title": "Home",
"route": "/index",
"layout": "blank"
},
{
"name": "404",
"title": "Not Found",
"route": "/404"
},
{
"name": "about",
"title": "About",
"route": "/about"
}
]and under my and I have a utility method to handle
Also, you should be able to reference |
Beta Was this translation helpful? Give feedback.
-
|
PR to implement root index route: #31339 |
Beta Was this translation helpful? Give feedback.
-
|
I hope your pr gets accepted |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the PR, I'll review it shortly |
Beta Was this translation helpful? Give feedback.
-
|
I had an issue arise, similar to the one being solved by this recomendation I have two content directories with
When we source those in 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 An additional problem arises when trying to create an As of know, it's not really possible to use the Obviously we can create the same effect with |
Beta Was this translation helpful? Give feedback.
-
|
I think your issue can be solved with 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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I tried to create pages using File-based routing. All the pages get generated successfully.
I can't navigate to these pages. |
Beta Was this translation helpful? Give feedback.
-
|
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: This wasn't working for me when I would try and Generate a 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 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:
To me that sounds like if I can query it in GraphQL then I can reference it in the API, but by experience with |
Beta Was this translation helpful? Give feedback.
-
|
You can access parent nodes (e.g. File nodes): https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/#parentheses-notation |
Beta Was this translation helpful? Give feedback.
-
|
@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? |
Beta Was this translation helpful? Give feedback.
-
|
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) |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
I'm curious what kind of API would make sense for passing context via the File System Route API. It seems to me that Perhaps by allowing a special |
Beta Was this translation helpful? Give feedback.
-
|
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: and I also tried this: File name: Which returned this: PageCreator: Collection page builder encountered an error parsing the filepath. To use Is there away to get access to my nodes? |
Beta Was this translation helpful? Give feedback.
-
|
I think you are using the wrong type name in your filename. It looks like it should be |
Beta Was this translation helpful? Give feedback.
-
|
Hi @LekoArts, Is there a way to conditionally create pages by querying a fields value?
|
Beta Was this translation helpful? Give feedback.
-
|
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: This would create pages with urls like |
Beta Was this translation helpful? Give feedback.
-
Sorry to ask, but I am still not sure if I unstertand all. Is it still a feature request, right? Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
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 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 :) |
Beta Was this translation helpful? Give feedback.
-
|
I wonder if there is any plan to tackle the following (known) issue that was mentioned by the original author? |
Beta Was this translation helpful? Give feedback.
-
|
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, @KyleAMathews, in this thread, mentioned something like I have also tried to do something like this: For this query: I tried this (and a bunch of variations) of @LekoArts do we just need to continue to use gatsby-node.js for this scenario? |
Beta Was this translation helpful? Give feedback.
-
|
@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 One upside is that you can specify your own 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. |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
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 Explanation: The value of the parameter After hacking the file from On basis of lack of time i couldn't determine why the value of the parameter was wrong. But now running 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 If i query the data via graphiQL I get a valid result: The product-page works well. Hint:
What did i miss to get this running with nested routes? |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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: 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: So that I have the error: The structure I have on the added source named hasura is like below: |
Beta Was this translation helpful? Give feedback.
-
|
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 This code does not result in any changes: |
Beta Was this translation helpful? Give feedback.
and others
-
People experimenting with File System Route API — this is the place to ask questions, report bugs, suggest ideas and collaborate on improvements.
Quick links:
Known issues/Feature requests:
pageContextand/or pass other variables to the underlyingcreatePagecall{foobar}.jsand define the shape (e.g. currently{Model.id}) inside the filegroupqueriesBeta Was this translation helpful? Give feedback.
All reactions