Duplicated pages using Gatsby {mdx.slug}

Question

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)

I just performed a gatsby clean
Gatsby.js development 404 page: Imgur

user_5585371 · Answer

how 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.

Duplicated pages using Gatsby {mdx.slug}

1 Answers