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

Question

我在 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

Answer 1

how to use GraphiQL to query only a set of pages, and not all

您需要向 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 playground (localhost:8000/_graphql) 中的符号以检查可用的过滤器和输出。

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

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

Duplicated pages using Gatsby {mdx.slug}

javascript

reactjs

graphql

gatsby