我正在使用 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 插件或方法来过滤查询以包含文件夹中的项目?
最佳答案
看看 gatsby graphql reference for filter并确保您使用 graphiql 来探索架构中可用的内容。
query MyQuery {
allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(team)/" }}) {
nodes {
id
}
}
}
关于reactjs - Gatsby 和 Graphql - 如何按文件夹过滤 allMarkdownRemark,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58016672/