MDX content only rendered after refresh

[datawookie]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I'm considering replacing AsciiDoc with MDX in one of my production Gatsby sites. But before I commit I wanted to just figure out how it would work.

I have a small test site which works with gatsby-plugin-mdx version 3.20.0. It's using <MDXRenderer> to render the MDX. The repository for the test site is here, Make sure that you are on the 28-mdx branch.

However, I'd like to upgrade to a more recent version of the plugin. Having read the documentation I see that there is a major change at version 4.0.0. I applied the migration steps specified in the documentation. The resulting code can be found here. Make sure that you are on the 29-mdx-updated branch.

In gatsby-node.js I have the following:

  const indexPage = require.resolve("./src/pages/index.js");

  createPage({
    path: '/',
    component: `${indexPage}?__contentFilePath=/site/content/index.mdx`,
  });

The site builds fine. But when I first visit the landing page the content from the MDX file (which should have been contained in children) is absent.

However, if I make a minor edit to src/pages/index.js (which renders the landing page) then the site refreshes and the MDX content is suddenly visible.

I have fiddled around with a bunch of things, but regardless of what I do the MDX content is not present until the site refreshes.

I have tried updating to the most recent version of the plugin with the same outcome.

The refresh behaviour is only apparent with the development server. If I make a production build then the MDX content is simply not there.

Reproduction Link

https://gitlab.com/datawookie/gatsby-whimsyweb/-/tree/29-mdx-updated?ref_type=heads

Steps to Reproduce

1. Clone the repository.
2. Checkout the 29-mdx-updated branch.
3. Start the development server.

Expected Result

The landing page should include text from the MDX file: "MDX is a markup language that combines Markdown and JSX...".

Actual Result

This text is not present until I refresh the site (by simply editing a file so that the development server rebuilds).

Environment

System:
    OS: Linux 6.2 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1270P
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 21.5.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
  npmPackages:
    gatsby: 4.25.8 => 4.25.8
    gatsby-plugin-mdx: 4.0.0 => 4.0.0
    gatsby-plugin-netlify: 5.1.1 => 5.1.1
    gatsby-source-filesystem: 4.25.0 => 4.25.0
  npmGlobalPackages:
    gatsby-cli: 5.13.1

Config Flags

No response

[olehpratsko]

@datawookie you are cooking gatsby in a wrong way. First, if you want to use component as a template for rendering page with createPage, use templates folder instead of pages here:
const indexPage = require.resolve("./src/pages/index.js"); wrong
const pageTemplate = require.resolve("./src/templates/page.js");

pages folder is the default reserved folder for gatsby to render static pages, so your really braking gatsby functionality with your pattern.

Second thing, you should ask yourself why do you query allMdx on the line 6, if you never use result of the query.
You'll be surprised, but if you remove the query, you will get exactly the same result. Use the data returned from query to render pages like that:

const result = await graphql(`
    {
      mdxPages: allMdx {
        nodes {
          id
          frontmatter {
            slug
          }
          internal {
            contentFilePath
          }
        }
      }
    }
  `);

  if (result.errors) {
    console.log('MDX query failed for some reason')
    return;
  }

  const mdxPages = result.data.mdxPages.nodes;

  mdxPages.forEach(node => {
      createPage({
        path: node.frontmatter.slug, // if your frontmatter contains slug field
        component: `${pageTemplate}?__contentFilePath=${node.internal.contentFilePath}`, // yes, contentFilePath should be dynamic
        context: {
          id: node.id,
        },
      });
  });

[datawookie]

Thank you, @olehpratsko. You're quite right: I was really mangling that! Your suggestion fixed my issue.