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

Question

我正在使用 Gatsby 和 MarkdownRemark。

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

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

到目前为止，我可以查询目录中的所有 Markdown 页面，但在尝试过滤路径时遇到问题。必须有一种方法可以使用 graphQL 查询来完成此操作。

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

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