使用 Gatsby {mdx.slug} 的重复页面答案

【问题标题】：Duplicated pages using Gatsby {mdx.slug}使用 Gatsby {mdx.slug} 的重复页面
【发布时间】：2021-11-22 15:01:40
【问题描述】：

我在src\pages\mountains 下使用{mdx.slug} 创建了一组页面，它们运行良好。如果我在路径 src\pages\cycling 中复制相同的 .mdx 文件，我注意到新页面将在 mountains 下，而不是在另一个（在浏览器中）下。其实cyclyng下我会404页面。你对这个问题有什么想法吗？

我认为重点在于我的 graphql 查询：

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
          }
        }
      }
    }
  }
`

使用 $slug 我可以读取整个页面列表，而不仅仅是单个路径下的页面（例如src\pages\mountains）

我刚刚表演了gatsby clean
Gatsby.js development 404 page: Imgur

【问题讨论】：

你能分享一下你的项目结构吗？这很奇怪...您是否尝试过运行gatsby clean？ 404 中列出了哪些页面？
在 GitHub 中是github.com/gtsolid/la-corse-toujours
谢谢，你能回答剩下的问题吗？你跑gatsby clean了吗？ 404 页面中列出的页面是什么（这些是 Gatsby 迄今为止生成的页面，因此这是一个很好的调试点，可以查看问题出在哪里）
gatsby clean 是；我如何分享Gatsby.js development 404 page 的屏幕？
上传图片到您编辑的问题

标签： javascript reactjs graphql gatsby

【解决方案1】：

如何使用 GraphiQL 只查询一组页面，而不是全部

您需要向 MDX 添加一些标识符以应用 GraphQL 过滤器。在你的情况下，我会做类似的事情：

---
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
          }
        }
      }
    }
  }
`

检查 GraphiQL 游乐场 (localhost:8000/_graphql) 中的符号以检查可用的过滤器和输出。

山脉页面则相反 (type: mountains)。

【讨论】：