MDX export graphql queries from programmatic pages

[janosh]

Summary

I'd like to revisit gatsby-mdx issue 187. Would be extremely useful, if an MDX file used for programmatic page creation could export a GraphQL query.

Basic example

Just as in the docs, but with an MDX file used in gatsby-node.js and outside src/pages.

import { graphql } from "gatsby"

# My Awesome Page

Here's a paragraph, followed by a paragraph with data!

<p>{props.data.site.siteMetadata.description}</p>

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        description
        title
      }
    }
  }
`

Motivation

As @Ehesp explained in the gatsby-mdx issue:

My use-case: I'm generating a website where the mdx files from an external source. Each file creates a new page on the website (using createPage), however every single page goes through the same component (since the layout is exactly the same).

In some of those pages however, I'd like to perform a custom query to extract various bits of data which are specific to that page. I can't perform the query inside of the page template since I don't know what it's going to be, and it's up the mdx file to do what it wants with the data.