reactjs - Gatsby 和 Graphql - 如何按文件夹过滤 allMarkdownRemark

Question

我正在使用 Gatsby 和 MarkdownRemark。

我想查询降价文件，然后将它们过滤到子目录中包含的文件。我的文件夹结构如下所示：

- src
 - pages
   -index.md
   -about.md
   - team
    - team_member_1.md
    - team_member_2.md
    - team_member_3.md

到目前为止，我可以查询目录中的所有降价页面，但我在尝试过滤路径时遇到了麻烦。必须有一种方法可以使用 graphQL 查询来做到这一点。

相反，我所做的是映射所有结果，然后检查 slug 字符串是否包含“团队”，这告诉我它在“团队”文件夹中。然后它制作组件。

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import TeamMember from '../components/TeamMember.js'
const Team = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields{
              slug
            }
            frontmatter {
              name
              position
              image
            }
          }
        }
      }
    }
  `)

  return (
    <div>
      {data.allMarkdownRemark.edges.map( (item, index) => {
        if(item.node.fields.slug.includes('team')){
          return <TeamMember key={`team_member_${index}`}{...item.node.frontmatter}/>
        }
      } )}
    </div>
  )
}
export default Team

这工作正常。但我认为 graphQl 的全部意义在于查询和过滤以返回我需要的确切数据。相反，我回到了用 javascript 编写自己的过滤器代码：

if(item.node.fields.slug.includes('team'))

是否有 Gatsby 插件或过滤查询以包含文件夹中的项目的方法？

Answer 1

查看gatsby graphql reference for filter并确保您正在使用 graphiql 来探索架构中可用的内容。

query MyQuery {
  allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(team)/"  }}) {
    nodes {
      id
    }
  }
}

Answer 2

@ksav 的答案有效，但重要的是要注意regex: "/(team)/"也匹配C:\user\gatsby\src\team2\other.md.

所以我建议allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(/team/)/" }}) {改用。