MDX content only rendered after refresh

[datawookie]

MDX content only rendered after refresh

[datawookie]

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

[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,
        },
      });
  });