"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", p: "p", pre: "pre", ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["For a long, content-heavy page you might want to source multiple\nMDX documents to populate the content and render it to a Gatsby\npage entrypoint. You can do this by using a ", _jsx(_components.code, { children: "pageQuery" }), " and the\nMDXRenderer."] }), "\n", _jsxs(_components.p, { children: ["Consider a glossary where you want to group each letter as its\nown file (", _jsx(_components.code, { children: "glossary/a.mdx" }), ", ", _jsx(_components.code, { children: "glossary/b.mdx" }), ", etc.) you can run\nthe following query:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-graphql", children: "{\n sections: allFile(\n filter: { sourceInstanceName: { eq: \"glossary\" } }\n sort: { fields: absolutePath }\n ) {\n nodes {\n name\n childMdx {\n body\n headings(depth: h1) {\n value\n }\n }\n }\n }\n}\n" }) }), "\n", _jsx(_components.p, { children: "And then render the data individually:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React from 'react'\nimport MDXRenderer from 'gatsby-plugin-mdx/renderer'\n\nexport default ({ data: { sections: { nodes: letters } } }) => (\n <>\n {letters.map(letter => (\n <>\n

{letter.childMdx.headings[0].value]}

\n {letters.childMdx.body}\n \n )}\n \n)\n" }) }), "\n", _jsx(_components.p, { children: "This same approach can be used to render different parts of a page:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import React from 'react'\nimport MDXRenderer from 'gatsby-plugin-mdx/renderer'\nimport { Hero, Features, Faq, Other, Components } from '../components/ui'\n\nexport default ({ data: { hero, features, faq } } }) => (\n <>\n \n {hero.body}\n \n \n \n {features.body}\n \n \n \n {faq.body}\n \n \n)\n" }) }), "\n", _jsxs(_components.p, { children: ["You can use ", _jsx(_components.a, { href: "https://mdxjs.com/getting-started#documents", children: "transclusion" }), "\nin MDX files already, however, in some cases it might make more sense to\ncreate standalone documents that serve as content partials or are used\nto provide content to a more complex page."] }), "\n", _jsx(_components.p, { children: "This allows you to keep content files simpler (as MDX) and source those\ndocuments from somewhere else, even a CMS." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Composing multiple MDX documents with Gatsby