Gatsby and Graphql - How to filter allMarkdownRemark by folder

Question

I'm using Gatsby and MarkdownRemark.

I want to query the markdown files and then filter them down to the files contained within a sub-directory. My folder structure looks like this:

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

So far I can query all the markdown pages in the directory but I'm having trouble trying to filter down path. There must be a way to do it with a graphQL query.

Instead what I do is map all the results and then check if the slug string includes 'team' this tells me that its in the 'team' folder. And then it makes the component.

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

This works fine. But I thought the whole point of graphQl is to query and filter to return the exact data I need. Instead I'm back at writing my own filter code in javascript:

if(item.node.fields.slug.includes('team'))

Is there a Gatsby plugin or a way to filter a query to contain items in a folder?

score 26 · Accepted Answer · answered Sep 19 '19 at 22:47

26

Have a look at the gatsby graphql reference for filter and make sure you are using graphiql to explore what is available within your schema.

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

answered Sep 19 '19 at 22:47

ksav

20,015
6
46
66

2

Thank you ksav, This is exactly what I was looking for. I knew there had to be a way to do it. I'm going to read through that filter documentation that you linked. I was having trouble articulating my searches to find this. Thanks. – PAT-O-MATION Sep 20 '19 at 03:14
3

For new people, and since no one here has mentioned it: filtering with `regex` and `fileAbsolutePath` is really, really slow. So if you can help it, filter with `eq` and `frontmatter` instead. My build times went from 11–12 minutes down to 3–4 minutes after changing. Read more about it [here](https://www.gatsbyjs.com/docs/query-filters/#performance). – Magnus Kolstad Jun 02 '22 at 13:56

score 2 · Answer 2 · answered Nov 08 '21 at 21:12

2

@ksav's answer works but it is important to note that regex: "/(team)/" also matches C:\user\gatsby\src\team2\other.md.

So I recommend using allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(/team/)/" }}) { instead.

answered Nov 08 '21 at 21:12

Vyk

141
1
3

Gatsby and Graphql - How to filter allMarkdownRemark by folder

2 Answers2

Linked