Description

Add a gatsby-source-filesystem source name to Mdx nodes for enhanced querying in GraphQL.

How to install

Install with npm:

1npm install gatsby-plugin-mdx-source-name

or with yarn:

1yarn add gatsby-plugin-mdx-source-name

When do I use this plugin?

This plugin is very useful if you are using multiple instances of gatsby-source-filesystem as it will allow you to query the name field from the source plugin on your Mdx nodes.

Examples of usage

Add this plugin to you gatsby-config.js file. Be sure to also include the gatsby-source-filesystem plugin, and add a name for the mdx files in the source plugin.

1plugins: [
2    `gatsby-plugin-mdx-source-name` ,
3    {
4        resolve: `gatsby-source-filesystem` ,
5        options: {
6            path: `${__dirname}/src/blog` ,
7            name: `blog` // this name will be added to the Mdx nodes
8        }
9    }
10]

The source name will now be available to query via GraphQL:

1const query = graphql`
2query {
3    allMdx(){
4        nodes {
5           id
6           fields {
7               source
8           }
9        }
10    }
11}`

For example, if you wanted to filter by this new source field on page creation, you could do the following:

1// gatsby-node.js
2
3exports.createPages = ({actions, graphql}) => {
4    const {createPage} = actions
5    
6    // query for all Mdx pages
7    const query = graphql(`
8        query {
9            allMdx(){
10                nodes {
11                    fields {
12                        source
13                    }
14                    frontmatter {
15                        slug
16                    }
17                }
18            }
19        }
20    `)
21
22    return query.then(result => {
23        // filter by source name "blog"
24        const posts = result.data.allMdx.nodes.filter(node => node.fields.source === 'blog')
25
26        posts.forEach(node => {
27            createPage({
28                path: `/blog/${node.frontmatter.slug}`,
29                component: path.resolve('src/templates/blog-post.js'),
30                context: {
31                    slug: node.frontmatter.slug
32                }
33            })
34        })
35    })
36}