Gatsby 和 Graphql - 如何按文件夹过滤 allMarkdownRemark
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 的全部意义在于查询和过滤 return 我需要的确切数据。相反,我回到 javascript:
中编写自己的过滤器代码
if(item.node.fields.slug.includes('team'))
是否有 Gatsby 插件或过滤查询以包含文件夹中项目的方法?
查看 gatsby graphql reference for filter 并确保您正在使用 graphiql 探索您的架构中可用的内容。
query MyQuery {
allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(team)/" }}) {
nodes {
id
}
}
}
@ksav 的答案有效,但重要的是要注意 regex: "/(team)/"
也匹配 C:\user\gatsby\src\team2\other.md
.
所以我建议改用allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(/team/)/" }}) {
。
我正在使用 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 的全部意义在于查询和过滤 return 我需要的确切数据。相反,我回到 javascript:
中编写自己的过滤器代码if(item.node.fields.slug.includes('team'))
是否有 Gatsby 插件或过滤查询以包含文件夹中项目的方法?
查看 gatsby graphql reference for filter 并确保您正在使用 graphiql 探索您的架构中可用的内容。
query MyQuery {
allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(team)/" }}) {
nodes {
id
}
}
}
@ksav 的答案有效,但重要的是要注意 regex: "/(team)/"
也匹配 C:\user\gatsby\src\team2\other.md
.
所以我建议改用allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(/team/)/" }}) {
。