Improve query parsing to recognize GraphQL queries outside export statements

Currently, Gatsby uses a combination of AST introspection and tagged template literal extraction to find and extract all of the graphql queries that pages can use. This works well if you have something that looks like this:

export const pageQuery = graphql`
  query Think {
     siteMetadata {
       title
    }
  }
`

The problem arises if you deviate from this at all. There are no warnings or errors, just no data passed to the component. This came up when working with ReasonML and Gatsby. Bucklescript can generate es6 code (though this opens up other issues like needing to compile node_modules) but what it creates is this (totally valid)

var pageQuery = graphql`
  query Think {
     siteMetadata {
       title
    }
  }
`

export { pageQuery }

Even though this is valid ES6, Gatsby can’t find the query because the ExportNamedDeclaration isn’t where the tagged template literal actually is found.

To further the issue, Gatsby no longer works with commonjs exports (https://github.com/gatsbyjs/gatsby/commit/41c5ce67b80484bb6417788db043ce578d0d9cd3) so a much simpler solution of exports.pageQuery = graphql will not work either.

@KyleAMathews I don’t know babel transforms well enough to immediately suggest a solution, but would be happy to help with some guidance here.

For anyone who runs into this, the current work around with something like Reason, is to generate pages outside of the pages folder, them import the components using a normal .js file where you place the query. This isn’t great at all, but at least it works.

[loudmouth]

I’m a bit intimidated by making a PR on the Gatsby AST parsing, but I just wanted to Plus 1 that it would be awesome to enable Gatsby GraphQL queries in Reason files!

[ctbucha]

From @jbaxleyiii 's advice, my current workaround is to use a regular ReactJS component and then just immediately pass the data down to the ReasonReact component.

import React from 'react'
import { graphql } from 'gatsby'
import MarkdownContent from './MarkdownContent.bs'

export default ({ data }) => { 
  console.log(data)
  const title = data.markdownRemark.frontmatter.title
  const content = data.markdownRemark.html
  return <MarkdownContent title={title} content={content} />
}

export const query = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        author
      }
    }
  }
`