MDXRenderer Replacement for Gatsby Image Optimization Following Docs? Can I pass props into the MDX in v2?

[riefer02]

Howdy MDX team and friends

I followed this gatsby doc page (https://www.gatsbyjs.com/blog/mdx-embedded-gatsby-image/) to be able to pull in remote images and process them through the gatsby image plugin.

My organization recently updated to @mdx-js/mdx at v2.3.0 The MDXRenderer is no longer required and that is how I was passing images into the mdx (you can see examples of this in the documentation link I posted above).

Since the MDXRenderer is no longer required anyway and has been replaced with children is there anyway to pass props in the markdown page?

In my .mdx file.

import { getImage, GatsbyImage } from 'gatsby-plugin-image';

<GatsbyImage
   alt="A picture of the gatsby discord community helping a person optimize their images in an mdx file."
   image={getImage(props.remoteImages[0])}
/>

I hope my explanation was clear, let me know if I can provide any more details.

TL;DR - updated mdx to v2, image optimization process with gatsby image from docs not working. What is the workaround or new approach for optimizing remote images into latest version of @mdx-js/mdx?

[ChristianMurphy]

Welcome @riefer02!

I followed this gatsby doc page (https://www.gatsbyjs.com/blog/mdx-embedded-gatsby-image/) to be able to pull in remote images and process them through the gatsby image plugin.

The post author may be able to offer more in depth commentary on how to leverage or adapt the pattern they suggest.
A lot of what they show and talk about has many layers of Gatsby specific abstractions on top of it.
All of which are created by the Gatsby community.
The blog post author and Gatsby community (https://github.com/gatsbyjs/gatsby/discussions) may be better able answer your question than the MDX community and maintainers.

is there anyway to pass props in the markdown page?

Stepping away from the Gatsby specifics.
In MDX 2, you get back a component.
For example, using MDX with a loader:

import Component from "./page/example.mdx"

That returned component can be passed props, same as any other.

<Component any="prop" can="go" here />

So wherever and however you get the MDX component back as a React component, that is where you can inject any props and components you want.

Taking a best guess at the Gatsby side, likely it is possible through their abstractions:

• If you import you components into JSX. (https://www.gatsbyjs.com/docs/how-to/routing/mdx/#importing-mdx-files-into-jsx-components). You can pass props into the page, same as you would any other component.
• If you use it as a page, you can pass props in through Graph QL https://www.gatsbyjs.com/docs/how-to/routing/mdx/#writing-pages-in-mdx
• If you have a layout wrapper, you can try to pass the props into children, or could continue to use a provider https://www.gatsbyjs.com/docs/how-to/routing/mdx/#defining-a-layout