盖茨比和图形QL-如何过滤所有标记按文件夹重新标记 [英] Gatsby and Graphql - How to filter allMarkdownRemark by folder

问题描述

我正在使用Gatsby和MarkdownRemark。

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

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

到目前为止，我可以查询目录中的所有减价页面，但是我在尝试过滤下行路径时遇到了问题。必须有一种使用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插件或通过过滤发送查询以包含文件夹中的项目的方法？

推荐答案

查看gatsby graphql reference for filter，并确保使用Graphiql浏览架构中可用的内容。

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

这篇关于盖茨比和图形QL-如何过滤所有标记按文件夹重新标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！