MDX GraphiQL error with html field

[zslabs]

Describe the bug
Cloning down https://github.com/ChristopherBiscardi/gatsby-starter-mdx-basic running the following on GraphiQL:

query MyQuery {
  allMdx {
    edges {
      node {
        excerpt
        html
      }
    }
  }
}

Returns this:

{
  "errors": [
    {
      "message": "String cannot represent value: { context: { sourceMessage: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\" }, text: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\", level: \"ERROR\", stack: [], docsUrl: \"https://gatsby.dev/issue-how-to\" }",
      "locations": [
        {
          "line": 5,
          "column": 9
        }
      ],
      "path": [
        "allMdx",
        "edges",
        0,
        "node",
        "html"
      ],
      "stack": [
        "TypeError: String cannot represent value: { context: { sourceMessage: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\" }, text: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\", level: \"ERROR\", stack: [], docsUrl: \"https://gatsby.dev/issue-how-to\" }",
        "    at GraphQLScalarType.serializeString [as serialize] (/Users/zach/Sites/my-mdx-starter2/node_modules/graphql/type/scalars.js:159:9)",
        "    at completeLeafValue (/Users/zach/Sites/my-mdx-starter2/node_modules/graphql/execution/execute.js:641:37)",
        "    at completeValue (/Users/zach/Sites/my-mdx-starter2/node_modules/graphql/execution/execute.js:587:12)",
        "    at /Users/zach/Sites/my-mdx-starter2/node_modules/graphql/execution/execute.js:500:16",
        "    at process._tickCallback (internal/process/next_tick.js:68:7)"
      ]
    },
    {
      "message": "String cannot represent value: { context: { sourceMessage: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\" }, text: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\", level: \"ERROR\", stack: [], docsUrl: \"https://gatsby.dev/issue-how-to\" }",
      "locations": [
        {
          "line": 5,
          "column": 9
        }
      ],
      "path": [
        "allMdx",
        "edges",
        1,
        "node",
        "html"
      ],
      "stack": [
        "TypeError: String cannot represent value: { context: { sourceMessage: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\" }, text: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\", level: \"ERROR\", stack: [], docsUrl: \"https://gatsby.dev/issue-how-to\" }",
        "    at GraphQLScalarType.serializeString [as serialize] (/Users/zach/Sites/my-mdx-starter2/node_modules/graphql/type/scalars.js:159:9)",
        "    at completeLeafValue (/Users/zach/Sites/my-mdx-starter2/node_modules/graphql/execution/execute.js:641:37)",
        "    at completeValue (/Users/zach/Sites/my-mdx-starter2/node_modules/graphql/execution/execute.js:587:12)",
        "    at /Users/zach/Sites/my-mdx-starter2/node_modules/graphql/execution/execute.js:500:16",
        "    at process._tickCallback (internal/process/next_tick.js:68:7)"
      ]
    }
  ],
  "data": {
    "allMdx": {
      "edges": [
        {
          "node": {
            "html": null
          }
        },
        {
          "node": {
            "html": null
          }
        }
      ]
    }
  }
}

It looks like this was originally added in ChristopherBiscardi/gatsby-mdx#164 but maybe there's a regression?

Expected behavior
Returns rendered HTML.

Thanks for any help!

[lannonbr]

So MDX has a body field that returns JSX which you can use in a template or otherwise.

This is a good document for seeing such: https://www.gatsbyjs.org/docs/mdx/programmatically-creating-pages#make-a-template-for-your-posts

[zslabs]

So MDX has a body field that returns JSX which you can use in a template or otherwise.

This is a good document for seeing such: gatsbyjs.org/docs/mdx/programmatically-creating-pages#make-a-template-for-your-posts

Thanks for the reply! I took a look at the field and am getting back this (using the demo):

"body": "function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(SEO, {\n    title: \"Home\",\n    keywords: ['gatsby', 'application', 'react'],\n    mdxType: \"SEO\"\n  }), mdx(\"h1\", null, \"Hi people\"), mdx(\"p\", null, \"Welcome to your new Gatsby site.\"), mdx(\"p\", null, \"Now go build something great.\"), mdx(\"div\", {\n    style: {\n      maxWidth: '300px',\n      marginBottom: '1.45rem'\n    }\n  }, mdx(Image, {\n    mdxType: \"Image\"\n  })), mdx(Link, {\n    to: \"/page-2/\",\n    mdxType: \"Link\"\n  }, \"Go to page 2\"));\n}\n;\nMDXContent.isMDXComponent = true;"

I don't think that's what I'd want when attempting to use a plugin like gatsby-plugin-feed or when attempting to "chunk" the HTML of the post to send off to a search provider, like Algolia. Is there potentially a parser I'd run that through within GraphiQL to actually return normal HTML?

[LekoArts]

Hi, thanks for the issue and sorry for apparently some misleading docs/poor DX. You can only use the html field on build, and not in development/GraphiQL.
Issue to track this: #17210

Please use body in all other instances :)