Gatsby: How do I create and query collections of mdx content?

[rchrdnsh]

I have content in a folder structure like so:

content
  articles
    first-article
      index.mdx
      images
    second-article
      index.mdx
      images
  music
    first-song
      index.mdx
      first-song-artwork.jpg
      first-song-track.mp3
    second-song
      index.mdx
      second-song-artwork.jpg
      second-song-track.mp3

...where the articles and music folders are two different content categories, or collections, but both are using mdx as their main file type and delivery mechanism.

So, I did this in the gatsby-config file:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `articles`,
    path: `${__dirname}/src/content/articles`
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `music`,
    path: `${__dirname}/src/content/music`
  },
},

...to give each collection a name.

But now I am unsure as to how to proceed in generating nodes, pages, and querying them as two different content types, but both using mdx under the hood.

I want to be able to query both content types (and more in the future) on the index page, where they can be combined, sorted, filtered, etc..and then be able to query only one content type on a dedicated page, like an articles page, or music page, and then have the mdx files generate pages based on templates for each type, or with templates that share some common components, etc. And the most important part is that I am also trying to query my music folder inside a react context file so they can piped into a persistent music player, which I asked about in this issue as well:

https://github.com/gatsbyjs/gatsby/issues/18404

...so I'm not sure what the best way to approach this might be.

@ChristopherBiscardi suggested on twitter that something like this might work:

allFile(filter: { sourceInstanceName: { eq: "the-relevant-name" }) {
  childMdx {
    body
  }
}

...but I'm not exactly sure how to make this work in the explorer...or at all...or if there are any other things that i should be considering in regards to what I am trying to accomplish.

For reference, this is the entirety of my gatsby-node file, which is as basic as mdx requires, I believe:

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {

  const { createNodeField } = actions

  if (node.internal.type === `Mdx`) {

    const slug = createFilePath({ node, getNode })

    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }

}

exports.createPages = async ({ graphql, actions }) => {

  const { createPage } = actions

  const result = await graphql(`
    {
      posts: allMdx {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `).then(res => res.data )

  result.posts.edges.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/templates/article.js`),
      context: {
        slug: node.fields.slug,
        id: node.id
      },
    })
  })
}

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },
  })
}

Any thoughts on the matter would be much appreciated :-)

Thank you XD

[universse]

Can you try this?

query MyQuery {
  allMdx(filter: {fileAbsolutePath: {regex: "/content/articles/"}}) {
    edges {
      node {
        fileAbsolutePath
      }
    }
  }
}

[rchrdnsh]

ok, that worked like a charm, thank you very much! XD