How can I use `gatsby-plugin-mdx` with Typescript?

Question

I'm making a blog page template with gatsby.js in typescript and have some questions with it.

Here is the codes.

blogMdx.tsx

import React from "react";
import { graphql } from "gatsby";
import { GatsbyImage, IGatsbyImageData, ImageDataLike, getImage } from "gatsby-plugin-image";
import Layout from "./layout";
import * as Vanilla from "../styles/article.css";

type ArticlesPageTemplateMdxProps = {
  data: Queries.BlogPostMdxQuery;
  children: any /*What is the type of "children"?*/;
};
const ArticlesPageTemplateMdx = ({ data, children }: ArticlesPageTemplateMdxProps) => {
  const article = data.allMdx.edges[0];
  const series = article.node.frontmatter?.series as string;
  const title = article.node.frontmatter?.title as string;
  const thumbnail = getImage(article.node.frontmatter?.thumbnail as ImageDataLike);

  return (
    <Layout>
      <div className={Vanilla.BlogHeader}>
        <GatsbyImage image={thumbnail as IGatsbyImageData} alt={title} />
        <div className={Vanilla.BlogHeaderOverlay}>
          <h2>{series}</h2>
          <h1>{title}</h1>
        </div>
      </div>
      <article>
        <div className={Vanilla.BlogContents}>{children}</div>
      </article>
    </Layout>
  );
};
export default ArticlesPageTemplateMdx;

export const query = graphql`
  query BlogPostMdx($id: String!) {
    allMdx(filter: { internal: { contentFilePath: { regex: "/articlesMdx/" } }, id: { eq: $id } }) {
      edges {
        node {
          frontmatter {
            date
            description
            lastUpdate
            series
            slug
            title
            thumbnail {
              childImageSharp {
                gatsbyImageData(placeholder: BLURRED)
              }
            }
          }
          body
        }
      }
    }
  }
`;

package.json

"dependencies": {
    "react": "^18.2.0",
    "gatsby": "^5.13.3",
    "gatsby-plugin-mdx": "^5.13.1",
    "@mdx-js/react": "^2.3.0",
    // the rest is omitted
  }

1. What is the type of children of gatsby-plugin-mdx? I know MDXRenderer is abolished in latest gatsby-plugin-mdx and should use {children} to import the contents of MDX files. To do this, I have to pass children as a prop to template and it should probably have a type(I'm a bit unsure about this). At least now that the type is any, nothing is shown where {children} should be appear. The inside of <div className={Vanilla.BlogContents}> is empty.

2. Why is the inside of <div className={Vanilla.BlogContents}> empty? If the cause is the invalid type of {children}, it's fine. But if not, I don't know what the cause is.

I don't really want to take a downgrade of gatsby-plugin-mdx because of the dependencies...

Answer 1

Try this:

type ArticlesPageTemplateMdxProps = {
  data: Queries.BlogPostMdxQuery;
  children: React.ReactNode;
};

Using React.ReactNode is more specific than any, but encompasses anything that can be rendered in a React component.