Gatsby GraphQL for only current directory - graphql

Question

I followed the Gatsby tutorial and ended up with a GraphQL like:
query {
allMdx(sort: {fields: frontmatter___date, order: DESC}) {
nodes {
frontmatter {
date(formatString: "MMMM D, YYYY")
title
}
id
slug
}
}
}
This gives me the expected result of:
{
"data": {
"allMdx": {
"nodes": [
{
"frontmatter": {
"date": "January 25, 2022",
"title": "Image Blog"
},
"id": "cc11f4c4-43a5-573a-9ea6-3806f7e2fc64",
"slug": "image-blog/"
},
{
"frontmatter": {
"date": "July 24, 2021",
"title": "Page B"
},
"id": "1fb36e34-d1f4-5ac2-8c18-1030733cfce1",
"slug": "b"
},
{
"frontmatter": {
"date": "July 24, 2021",
"title": "Page C"
},
"id": "2f0ed709-c7ab-5a3f-9846-1340699b4bd1",
"slug": "c"
},
{
"frontmatter": {
"date": "July 24, 2021",
"title": "Sub Page D"
},
"id": "d9cc842d-dc45-508a-8d5d-8dc1f2b0b232",
"slug": "sub/d"
},
{
"frontmatter": {
"date": "July 24, 2021",
"title": "Sub Sub Page E"
},
"id": "2005bd62-37a7-580b-9950-e1b7c3688c0b",
"slug": "sub/subsub/e"
},
{
"frontmatter": {
"date": "July 23, 2021",
"title": "Page A"
},
"id": "58dd9cf4-8e20-5602-87ef-5eb18cd74636",
"slug": "a"
}
]
}
},
"extensions": {}
}
As you can see the result contains all pages.
What I would like to achieve is to have an "index" page that only show links to the pages within the same directory of the "index" page.
How can I modify the query to return only the current directory's pages?
EDIT:
I made some progress by changing the query to:
query{
allMdx(
sort: {fields: frontmatter___date, order: DESC}
filter: {slug: {regex: "/^sub/[^/]+$/"}}
) {
nodes {
frontmatter {
date(formatString: "D MMMM YYYY")
title
}
id
slug
}
}
}
which gives the result of:
{
"data": {
"allMdx": {
"nodes": [
{
"frontmatter": {
"date": "24 July 2021",
"title": "Sub Page D"
},
"id": "4de57b7f-5e87-520f-ab06-940fb6f91340",
"slug": "sub/d"
}
]
}
},
"extensions": {}
}
But my graphQL is hard-coded. I still do not understand how to pass in a variable dynamically so that it would give different results depending on which slug/directory the page was loaded, for example to have something like:
filter: {slug: {regex: $expression}}
This is the full page code I have so far:
import * as React from 'react'
import { Link, graphql } from 'gatsby'
import Layout from '../../components/layout'
const BlogPage = ({ data, location }) => {
//const slug = location.pathname;
return (
<Layout pageTitle="My Blog Posts">
{
data.allMdx.nodes.map(node => (
<article key={node.id}>
<h2>
<Link to={`/blog/${node.slug}`}>
{node.frontmatter.title}
</Link>
</h2>
<p>Posted: {node.frontmatter.date}</p>
</article>
))
}
</Layout>
)
}
export const query = graphql`
query{
allMdx(
sort: {fields: frontmatter___date, order: DESC}
filter: {slug: {regex: "/^sub/[^/]+$/"}}
) {
nodes {
frontmatter {
date(formatString: "D MMMM YYYY")
title
}
id
slug
}
}
}
`
export default BlogPage

Answer 1

Your query is fetching all data from the MDX (hence the allMdx node), set in the gatsby-source-filesystem so it's getting all title and date from frontmatter, without filtering.
One easy thing that is the straightforward workaround in this scenarios of filtering desired pages is adding a key field in your MDX files so you can filter your query using that field:
query {
allMdx(
filter: {frontmatter: { key: { eq: "index-page"}}}
sort: {fields: frontmatter___date, order: DESC}) {
nodes {
frontmatter {
date(formatString: "MMMM D, YYYY")
title
}
id
slug
}
}
}
So you will be only fetching one-page data.