GraphQL query prevents compile

[JamesIves]

I followed the instructions in the README but I'm running into an issue when I compile my template. No matter how simple the template is, I end up getting the following error:

error UNHANDLED REJECTION

TypeError: expected a string

The template exports this:

/** Renders a template for a blog post. */
const BlogPostAmpTemplate = props => {
  const post = props.data.markdownRemark
  const siteTitle = props.data.site.siteMetadata.title
  const { previous, next } = props.pageContext

  return (
    <div> 
      Hello
     </div>
  )
}

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

export default BlogPostAmpTemplate

Removing the pageQuery const fixes the compile issue, but my template depends on the data it provides.

Am I missing something?

[jafaircl]

I'm not sure what could be throwing that error. Could you provide a minimal repo that reproduces the issue so I can take a look?

[JamesIves]

Sure thing! Here's the branch of the site I'm having the issue on; https://github.com/JamesIves/portfolio/tree/amp

The template and the config can be found here; https://github.com/JamesIves/portfolio/blob/amp/gatsby-node.js#L9 and here https://github.com/JamesIves/portfolio/blob/amp/src/templates/BlogPostTemplate/BlogPostTemplate.amp.js

Appreciate the help.

[jafaircl]

Sorry it's taken a couple of days to get back to you. I was having some trouble finding where the error was. It's a feature of Gatsby that isn't very well documented and was tough to discern even though I've actually run into it before.

This particularly unhelpful error message is because Gatsby doesn't like having multiple GraphQL queries with the same name. So, in your BlogPostTemplate.amp.js you need to change this:

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
  ...

to this (or anything else really):

export const pageQuery = graphql`
  query AmpBlogPostBySlug($slug: String!) {
  ...

That should fix your error and let you build your amp pages. The site looks great! Let me know if you run into any other issues.

edit: In your gatsby-config.js file you'll need to change the line pathIdentifier: '/amp/', to pathIdentifier: '/amp', to get the amp conversion to recognize the page.

[JamesIves]

Thank you so much! I really appreciate the assistance.

[kalwalt]

@JamesIves @jafaircl I had a similar issue; my pages wasn't transformed to AMP because the wrong pathIdentifier, as i changed:

- pathIdentifier: '/amp/'
+ pathIdentifier: '/amp'

Suddenly solved my issue!