Gatsby: How to use remote MDX data from some API endpoint?

[ModPhoenix]

Summary

I am asking this question because I didn't find an example of how to work if mdx data locate on API. For example, I have a simple server like this:

var express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.setHeader("content-type", "application/json");
  res.send({
    id: "1",
    content: `
    # Title

    <button>Click</button>

    text
    `,
    createdAt: new Date(),
  });
});

app.listen(3000, function() {
  console.log("Mock server app listening on port 3000!");
});

What do I need to do to render mdx?

File contents (if changed)

gatsby-node.js:

const fetch = require(`node-fetch`)

exports.sourceNodes = async ({
  actions: { createNode },
  createContentDigest,
}) => {
  const result = await fetch(`http://localhost:3000/`)
  const resultData = await result.json()
  console.log('resultData :>> ', resultData);
  // create node for build time data example in the docs
  createNode({
    id: `${resultData.id}`,
    content: resultData.content,
    parent: null,
    children: [],
    internal: {
      type: `Example`,
      // mediaType: `text/markdown`,
      contentDigest: createContentDigest(resultData),
    },
  })
}

index.js:

import React from "react";
import { MDXRenderer } from "gatsby-plugin-mdx"
import { graphql } from "gatsby";

import Layout from "../components/layout";

const IndexPage = (props) => {
  const {
    data: {
      example: { content },
    },
  } = props;
return <Layout><MDXRenderer>{content}</MDXRenderer></Layout>;
};

export default IndexPage;

export const query = graphql`
  query {
    example {
      id
      content
    }
  }
`;

gatsby-ssr.js: N/A

[LekoArts]

Thank you for opening this!

Your issue might be the content keyword or that you didn't use createNodeId or that you didn't have the gatsby-plugin-mdx in the gatsyb-config.js or that you commented out the mediaType. Because the latter is mandatory for it to work.

Anyways, here's a codesandbox where it works:
https://codesandbox.io/s/mdx-from-remote-ydkjq?file=/gatsby-config.js

GraphQL Preview: https://ydkjq.sse.codesandbox.io/___graphql?query=query%20MyQuery%20%7B%0A%20%20example%20%7B%0A%20%20%20%20body%0A%20%20%20%20childMdx%20%7B%0A%20%20%20%20%20%20body%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D%0A

I spun up your express server in another codesandbox: https://codesandbox.io/s/express-mdx-server-t5tpz?file=/app.js

Hope that helps!

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[joonashak]

Hi all,

I am having a similar issue. After following the codesandbox example @LekoArts posted I am seeing data which, I believe, is in the correct format and there are no errors during build. However, when I add gatsby-plugin-mdx to gatsby-config.js the build hangs on schema building:

My data looks like this in GraphiQL:

Here is the gatsby-node.js in question (I think it is too long to be pasted here): https://github.com/joonashak/reclab/blob/mdx/web/gatsby-node.js

Any help would be greatly appreciated! I have been stuck with adding MDX to Gastby for good 10 hours already lol...

PS. My intuition, without using any plugins, was to just import @mdx-js/mdx in gatsby-node.js and use it to compile page.content to MDX in exports.createPages as I create the pages from allPage nodes. I managed to get a string with <MDXTag>'s and all but ultimately failed to render it on a page. Do you think there is any credit to approaching the problem like this? Is there a lot of necessary stuff that gatsby-plugin-mdx does besides the compilation?