Transform nodes with "text/markdown" and add a childMdx node to them

[rsaarloos]

Hi, great work on this plugin already, but I'm wondering if we can make work similar to how remote sources were processed in gatsby-plugin-mdx V3. I will do my best to explain this behaviour.

In my case I'm using 'gatsby-source-strapi' which fetches data from a remote strapi source, and creates nodes for them. Any 'rich content' that is defined in Strapi will be added as a node with internal type 'text/markdown'. You can query the raw markdown as follows:

allStrapiArticle {
  edges {
    node {
      content {          <----- this is how the field is called in strapi (can be different for other components)
        data {
          content        <----- this will return the raw markdown
          internal {
            mediaType <----- this will return the media type 'text/markdown'
          }
        }
      }
    }
  }
}

With gatsby-plugin-mdx these nodes would be processed and a 'childMdx' nodes would be added. You could query the mdx content then as follows:

allStrapiArticle {
    edges {
      node {
        content {
          data {
            content <----- this will return the raw markdown
            childMdx {
              body <----- this will return the mdx body
            }
        }
      }
    }
  }
}

The childMdx will contain then all the normal Mdx nodes, in the example above I'm only fetching the body from it.

As Strapi creates specific types for each component it is very difficult to define all node types that should be processed in the gatsby-config, therefore it would be great if the plugin would just pickup all nodes that have the type text/markdown.

The plugin gatsby-transformer-remark does something similar but then adds a 'childMarkdownRemark' node that holds Remark related nodes.

[hoijnet]

Thanks @rsaarloos , thanks a lot for the write-up. This is very close to how it works now after the update from today. Did you have a chance looking at the updated Readme to see if it matches?

You would have the data under "data" instead of content/data, but otherwise kind of the same 🚀

[hoijnet]

Sorry @rsaarloos , I saw there is one more thing I need to lift over for it to work fully. Sorry for it, it was part of my test rig so didn't see it.

Update is coming!

[hoijnet]

This is now committed and should be solved now, including examples in the readme! Let me know it works for you too and I'll close it!

[rsaarloos]

Yes with the latest version I see the childMdx node. But I have the idea that what I'm trying to achieve is not longer possible with gatsby-plugin-mdx V4 (and possible MDX V2).

Before I was pulling the body from the childMdx node, and I would pass it in the <MDXRenderer>. With V2 this concept has changed, and in the documentation the following is mentioned:

You no longer need to use as you can use {children} directly.

This works when you create full pages from MDX files (or remotely retrieved MDX nodes as per your plugin), but I don't see how this would work if only a small part of my page is built up from MDX content.

In my use case I have a page which contains many components, and some of them contain rich text. This rich text is defined in Strapi using Markdown with JSX (in some cases). With V3 I would pull the MDX body from GraphQL and put it in a component I made that made use of the <MDXRenderer>. Similar how you would pull Markdown from GraphQL and put in a <ReactMarkdown> component (but without the JSX support).

I don't see how this is possible with V4, but it could be I'm missing something here. This sounds unrelated to this issue, so feel free to close the issue itself, as the childMdx node is there, albeit you still need to strictly define your types (vs it taking it from any node that is 'text/markdown').

I will move this discussion back to the discussion on MDX v2.

[hoijnet]

This works when you create full pages from MDX files (or remotely retrieved MDX nodes as per your plugin), but I don't see how this would work if only a small part of my page is built up from MDX content.

I have not tried, but maybe you can pick out what the generated component name is from the Filenode filename and use that as a component. Some stitching to do, but might work as hackey approach perhaps?

Someone versed in the MDX plugin itself might be able to figure it out. Does not sound impossible.

For catching all MDX nodes, perhaps it could be added as a PR/issue?

[hoijnet]

Thanks for checking. Seems to work as it should then and closing. Feel free to reopen if you see it differently!