I created a set of pages using {mdx.slug} under src\pages\mountains and they work fine. If I duplicate the same .mdx file in the path src\pages\cycling I notice the new pages will be under mountains and not under the other (in the browser).
In fact, under cyclyng I will the 404 page.
Do you have any idea about the issue?
I think the point is in my graphql query:
export const query = graphql`
query($slug: String) {
mdx(slug: {eq: $slug}) {
body
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
hero_image_alt
hero_image_credit_link
hero_image_credit_text
hero_image {
childImageSharp {
gatsbyImageData
}
}
}
}
}
`
Using $slug I can read the whole list of pages, not only the ones under a single path (eg. src\pages\mountains)
gatsby cleanGatsby.js development 404 page: Imgurhow to use GraphiQL to query only a set of pages, and not all
You need to add some identifier to the MDX to apply a GraphQL filter. In your case I'd do something like:
---
title: "Cap Corse"
date: "2018-08-05"
type: "cycling_ascent"
hero_image: "./golfu-alisu.jpg"
hero_image_alt: "Golfu di Alisu"
hero_image_credit_text: "AV - 2019"
---
Then in your query:
export const query = graphql`
query($slug: String) {
mdx(slug: {eq: $slug}, type: {eq: "cycling_ascent" }) {
body
frontmatter {
title
date(formatString: "MMMM DD, YYYY")
hero_image_alt
hero_image_credit_link
hero_image_credit_text
hero_image {
childImageSharp {
gatsbyImageData
}
}
}
}
}
`
Check the notation in the GraphiQL playground (localhost:8000/_graphql) to check the filters available and the output.
And the opposite (type: mountains) for the mountains page.