Unable to follow docs to perform a graphql page query

[Adam Cooper]

Hi there,

I'm really interested in using MDX with Gatsby. However, at the moment I'm unable to successfully perform a page query and see its results rendered in the HTML, even after following the documentation here:

https://gatsby-mdx.netlify.com/guides/writing-pages-in-mdx

This sample code, as written, does not compile because the graphql query is missing surrounding curly braces:

./src/pages/index.mdx
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
Error: BabelPluginRemoveGraphQLQueries: GraphQL syntax error in query:


site {
  siteMetadata {
    description
  }
}


message:

Syntax Error: Unexpected Name "site"
   ...

It is easy enough to correct this and get the page to compile by wrapping the graphql query in curly braces:

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`
{
  site {
    siteMetadata {
      description
    }
  }
}
`

However, the actual HTML output does not show the site description. Instead, it treats the contents of the <p> tag as literal text, displaying "{props.data.site.siteMetadata.title}" on the page:

I've tried a variety of things to fix this, but I'm not familiar enough with either Gatsby or MDX to really understand what is wrong here.

Are Gatsby graphql page queries actually supported with MDX? How do you actually set one up?

(I have been able to get StaticQuery to work in MDX, but I need query data with variable input, so I want to see what I can get with a page query. I'm hoping this does not mean I need to give up on MDX.)

To reproduce:

1. gatsby new my-site https://github.com/ChristopherBiscardi/gatsby-starter-mdx-basic (as described in the starter repo README)
2. cd my-site and yarn
3. Change the contents of src/pages/index.mdx to the example code on this documentation page: https://gatsby-mdx.netlify.com/guides/writing-pages-in-mdx
4. Observe the page does not compile due to the graphql query.
5. Surround the graphql query in curly braces to get the page too compile.
6. Observe the page does not actually display the site description, but instead shows the literal text "{props.data.site.siteMetadata.title}".

Thanks!

[Dan Denney]

PR'd a fix for the docs: gatsbyjs/gatsby#15863

[Dan Denney]

I wasn't able to replicate the output of plain text, unless I removed the JSX from HTML. I'm on Gatsby 2.13.15 and this is the full page structure:

import { graphql } from "gatsby"

<h1>{props.data.site.siteMetadata.title}</h1>

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

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

[Chris Biscardi]

Thanks @dandenney for the PR and the code here. Closing this