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

【问题标题】：Gatsby and Graphql - How to filter allMarkdownRemark by folderGatsby 和 Graphql - 如何按文件夹过滤 allMarkdownRemark
【发布时间】：2020-01-20 19:43:55
【问题描述】：

我正在使用 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 插件或过滤查询以包含文件夹中的项目的方法？

【问题讨论】：

标签： reactjs regex graphql gatsby remarkjs

【解决方案1】：

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

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

【讨论】：

谢谢 ksav，这正是我想要的。我知道必须有办法做到这一点。我将通读您链接的过滤器文档。我很难阐明我的搜索以找到这个。谢谢。

【解决方案2】：

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

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

【讨论】：