Gatsby: Make gatsby-plugin-mdx not automatically create pages under src/pages

[varughese]

Summary

Is there a way to stop gatsby plugin mdx from automatically creating pages in src/pages so that I can provide a custom template using createPages?

Can we update the plugin or the documentation to make it more explicit, more emphasis that it does this?

Relevant information

When creating a page with MDX and gatsby-source-filesystem, say I have this structure:

- src
    - pages
        - mdx-post.mdx
        - md-post.md
    - templates
         - regular-template.js
         - mdx-template.js

gatsby-node.js:

...
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          default: require.resolve(
            `${__dirname}/src/templates/mdx-template.js`
          ),
        },
      },
    },
...

When I use gatsby-plugin-mdx, I cannot use a graphql pageQuery in my mdx-template.s.

How can I update MDX to use this?

Related issue - #16224

The underlying thing I want to do is, I have a graphql field created on my mdx nodes that I want to access in mdx-template.js.

However, since I cannot do a page query so I cannnot access this. (I cannot do a page query since I cannot use createPages, since everything in src/pages is automatically created by the mdx plugin)

I am down to make a PR to add this change / or update documentation if needed!

Thanks!

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[pvdz]

@johno might be able to help you further. Maybe the least we can do is document this behavior?

[varughese]

@johno Any way to do this?

[laurieontech]

Thanks for opening an issue!

I think I need more information here. gatsby-plugin-mdx processes those MDX files and makes them queryable in GraphQL. You want to access that information in the page template? But the template isn't going through createPages? What is it the template being used for right now?

I believe there is a way to do what you're explaining, but I want to make sure I understand it. Any chance you have an existing repo with your set up to link/talk about?

[varughese]

Thanks for the response! The problem I am encountering is I believe gatsby mdx automatically converts all the .mdx files in my src/pages folder.

However, I would like to use createPages() to create them instead, and provide a custom page instead. I am able to query the MDX files via graphql, but I am not able to create the pages like I am with markdown files.

For example
I have this .mdx file in src/pages/

https://github.com/PittCSWiki/pittcswiki/blob/master/src/pages/guides/scheduling.mdx

I also have .md files in this folder

https://github.com/PittCSWiki/pittcswiki/blob/master/src/pages/guides/research.md

For markdown, I am able to create the pages and pass in a custom template
https://github.com/PittCSWiki/pittcswiki/blob/master/gatsby-node.js#L95

        createPage({
          path: node.fields.slug,
          component: path.resolve("src/components/templates/guide-template.js"),
          context: {
            // Data passed to context is available
            // in page queries as GraphQL variables.
            slug: node.fields.slug,
          },
        })

Where the component is guide-template.js link . I am able to use a pageQuery here.

However for mdx files, I am not able to do this. I am only able to create a page and pass in a template if I a place my mdx files outside of the src/pages folder.

Instead, for mdx files, I pass in a template in the config link as per the documenation. However, I am not to create a pageQuery and pass values in this way, like I am with markdown files and the createPage functionality.

I am wondering if there is a way to stop the plugin from automatically creating the mdx files under src/pages, so I can create them myself. I can also make a PR and add that functionality/option as well.

[laurieontech]

Thank you for the additional context.

You're correct, whether it's an mdx or js file, anything in src/pages is converted to a page.
If you'd like to use createPages you can create src/mdxPages or similar and source your files from there. Make sure that gatsby-source-filesystem can see them.

[jedevc]

Thanks for the explanation!

I get that that all mdx and js files in src/pages are converted into a page - but, this same behaviour isn't extended to just plain md files, when using remark. Because of the difference here, it can cause friction from users trying to switch from remark into mdx.

It feels like the behaviour between the plugins should be relatively consistent, at least because on the surface they seem to make an effort to do so, by supporting the same plugins, etc.

It also looks like this discussion has come up before here on an older version of the plugin.

[varughese]

Agree, is there some way we can turn this off via a configuration to the
plug-in so we can use createPages and keep MDX files in src pages?

On Tue, Jun 2, 2020 at 6:58 PM Justin Chadwell [e-mail]
wrote:

Thanks for the explanation!

I get that that all mdx and js files in src/pages are converted into a
page - but, this same behaviour isn't extended to just plain md files, when
using remark. Because of the difference here, it can cause friction from
users trying to switch from remark into mdx.

It feels like the behaviour between the plugins should be relatively
consistent, at least because on the surface they seem to make an effort to
do so, by supporting the same plugins, etc.

It also looks like this discussion has come up before here
https://github.com/ChristopherBiscardi/gatsby-mdx/issues/243 on an
older version of the plugin.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/24164#issuecomment-637850429,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ADKKYL5LD2ZYIPC74F5P4JLRUV7YTANCNFSM4NDP6ZXQ
.

[laurieontech]

I understand. That's not something that is a priority at the moment, but we'd certainly be open to a community PR.

[uhoh-itsmaciek]

@laurieontech Thanks for the info here--I have the exact same issue. Do you have any pointers for starting a PR?