Gatsby – GraphQL – StaticQuery tag – site fails to compile due to strange behavior with query string – SEO

I’m trying to do a simple GraphQL query of my gatsby site’s wordpress db and render the results. However, the site fails to compile with some perplexing errors.

If I have the query in a multi-line string (standard for graphql queries), the error says I left an unterminated string. If I put the query in a single-line string, I get a new error where it expects a closing curly bracket instead of the string.

My file with the multi-line query string:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import { StaticQuery, GraphQL } from "gatsby"

const IndexPage = () => (
  <Layout>
    <StaticQuery
      query={GraphQL'
        {
          allWordpressPage {
            edges {
              node {
                id
                title
                content
              }
            }
          }
        }' render={props => (
      <div>
        {props.allWordpressPage.edges.map(page => (
          <div key={page.node.id}>
            <h1>
              {page.node.title}
            </h1>
            <div dangerouslySetInnerHTML={‌{__html: page.node.content}} />
          </div>
        ))}
      </div>
    )} />
  </Layout>
)

export default IndexPage

The error that comes with it:

ERROR in ./src/pages/index.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /Users/kennansmith/Desktop/Temp_Task_Folder/gatsby-wp/src/pages/index.js: Unterminated string constant (12:20)

  10 |   <Layout>
  11 |     <StaticQuery
> 12 |       query={GraphQL'
     |                     ^
  13 |       query {
  14 |           allWordpressPage {
  15 |             edges {

My file when I work around the string issue:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
import { StaticQuery, GraphQL } from "gatsby"

const IndexPage = () => (
  <Layout>
    <StaticQuery
      query={GraphQL'{ allWordpressPage { edges { node { id title content } } } }' render={props => (
      <div>
        {props.allWordpressPage.edges.map(page => (
          <div key={page.node.id}>
            <h1>
              {page.node.title}
            </h1>
            <div dangerouslySetInnerHTML={‌{__html: page.node.content}} />
          </div>
        ))}
      </div>
    )} />
  </Layout>
)

export default IndexPage

The error that comes with it:

ERROR in ./src/pages/index.js
Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /Users/kennansmith/Desktop/Temp_Task_Folder/gatsby-wp/src/pages/index.js: Unexpected token, expected "}" (12:20)

  10 |   <Layout>
  11 |     <StaticQuery
> 12 |       query={GraphQL'{ allWordpressPage { edges { node { id title content } } } }' render={props => (
     |                     ^
  13 |       <div>
  14 |         {props.allWordpressPage.edges.map(page => (
  15 |           <div key={page.node.id}>