GATSBY GRAPHQL仅用于当前目录

Question

我遵循了盖茨比教程，最终得到了一个GraphQl，例如：

  query {
    allMdx(sort: {fields: frontmatter___date, order: DESC}) {
      nodes {
        frontmatter {
          date(formatString: "MMMM D, YYYY")
          title
        }
        id
        slug
      }
    }
  }

这给了我预期的结果：

{
  "data": {
    "allMdx": {
      "nodes": [
        {
          "frontmatter": {
            "date": "January 25, 2022",
            "title": "Image Blog"
          },
          "id": "cc11f4c4-43a5-573a-9ea6-3806f7e2fc64",
          "slug": "image-blog/"
        },
        {
          "frontmatter": {
            "date": "July 24, 2021",
            "title": "Page B"
          },
          "id": "1fb36e34-d1f4-5ac2-8c18-1030733cfce1",
          "slug": "b"
        },
        {
          "frontmatter": {
            "date": "July 24, 2021",
            "title": "Page C"
          },
          "id": "2f0ed709-c7ab-5a3f-9846-1340699b4bd1",
          "slug": "c"
        },
        {
          "frontmatter": {
            "date": "July 24, 2021",
            "title": "Sub Page D"
          },
          "id": "d9cc842d-dc45-508a-8d5d-8dc1f2b0b232",
          "slug": "sub/d"
        },
        {
          "frontmatter": {
            "date": "July 24, 2021",
            "title": "Sub Sub Page E"
          },
          "id": "2005bd62-37a7-580b-9950-e1b7c3688c0b",
          "slug": "sub/subsub/e"
        },
        {
          "frontmatter": {
            "date": "July 23, 2021",
            "title": "Page A"
          },
          "id": "58dd9cf4-8e20-5602-87ef-5eb18cd74636",
          "slug": "a"
        }
      ]
    }
  },
  "extensions": {}
}

如您所见，结果包含所有页面。

我想实现的是拥有一个“索引”页面，该页面仅显示“索引”页面同一目录中页面的链接。

如何修改查询以仅返回当前目录的页面？

---

编辑：

我通过将查询更改为：

  query{
      allMdx(
        sort: {fields: frontmatter___date, order: DESC}
        filter: {slug: {regex: "/^sub/[^/]+$/"}}
      ) {
        nodes {
          frontmatter {
            date(formatString: "D MMMM YYYY")
            title
          }
          id
          slug
        }
      }
  }

给出：

{
  "data": {
    "allMdx": {
      "nodes": [
        {
          "frontmatter": {
            "date": "24 July 2021",
            "title": "Sub Page D"
          },
          "id": "4de57b7f-5e87-520f-ab06-940fb6f91340",
          "slug": "sub/d"
        }
      ]
    }
  },
  "extensions": {}
}

但是我的GraphQl的结果是：硬编码的结果。我仍然不明白如何动态传递变量，以便根据加载页面的哪个slug/directory给出不同的结果，例如，它具有类似的内容：

filter: {slug: {regex: $expression}}

这是我到目前为止拥有的完整页面代码：

import * as React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../../components/layout'

const BlogPage = ({ data, location }) => {
    //const slug = location.pathname;
    return (
        <Layout pageTitle="My Blog Posts">
            {
                data.allMdx.nodes.map(node => (
                    <article key={node.id}>
                        <h2>
                            <Link to={`/blog/${node.slug}`}>
                                {node.frontmatter.title}
                            </Link>
                        </h2>
                        <p>Posted: {node.frontmatter.date}</p>
                    </article>
                ))
            }
        </Layout>
    )
}

export const query = graphql`
  query{
      allMdx(
        sort: {fields: frontmatter___date, order: DESC}
        filter: {slug: {regex: "/^sub/[^/]+$/"}}
      ) {
        nodes {
          frontmatter {
            date(formatString: "D MMMM YYYY")
            title
          }
          id
          slug
        }
      }
  }
`

export default BlogPage

Answer 1

您的查询是从MDX获取所有数据（因此allmdx节点），在gatsby-source-filesystem中设置，因此它可以获得所有title 日期来自frontMatter，而无需过滤。

在这种情况下，要过滤所需的页面的一种简单的解决方法是在MDX文件中添加键字段，因此您可以使用该字段过滤查询：

  query {
    allMdx(
    filter: {frontmatter: { key: { eq: "index-page"}}}
    sort: {fields: frontmatter___date, order: DESC}) {
      nodes {
        frontmatter {
          date(formatString: "MMMM D, YYYY")
          title
        }
        id
        slug
      }
    }
  }

因此，您只会拿出一页数据。