GraphQL: Warning: Failed prop type: Invalid prop `query` of type `object` supplied to `StaticQuery`, expected `string`

227

Galanthus

I am working on my Gatsby website. But I am facing a weird problem where when visiting a single blog post I get the following error for my Query:

index.js:2177 Warning: Failed prop type: Invalid prop `query` of type `object` supplied to `StaticQuery`, expected `string`.
    in StaticQuery (at Layout.jsx:35)
    in Layout (at post.jsx:136)
    in Post (at post.jsx:164)
    in _default (created by HotExported_default)
    in AppContainer (created by HotExported_default)
    in HotExported_default (created by PageRenderer)
    in WrapPage (created by PageRenderer)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:56)
    in RouteHandler (at root.js:78)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:69)
    in RouteUpdates (at root.js:68)
    in EnsureResources (at root.js:66)
    in LocationHandler (at root.js:124)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:123)
    in Root (at root.js:132)
    in StaticQueryStore (at root.js:138)
    in _default (at app.js:67)

My Layout.jsx:

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <LayoutContainer className="div">
        <Global styles={[globalStyles, typeStyles]} />
        <div className="Layout">
          <Header />
          <main className="Layout__content">{children}</main>
          <Footer />
        </div>
      </LayoutContainer>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Why am I getting this error :)? I am trying to fix this but without luck. Hopefully, someone can help me out.

ksav

Possibly due to a bug in StaticQuery. There is a potential workaround in a similar issue here.

Try to pull the query out, wrap it in a template string before passing it to StaticQuery's query param.

    const myStaticQuery = graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `

    const Layout = ({ children }) => (
      <StaticQuery
        query={`${myStaticQuery}`}
        render={data => (
          <LayoutContainer className="div">
            <Global styles={[globalStyles, typeStyles]} />
            <div className="Layout">
              <Header />
              <main className="Layout__content">{children}</main>
              <Footer />
            </div>
          </LayoutContainer>
        )}
      />
    )

    Layout.propTypes = {
      children: PropTypes.node.isRequired,
    }

    export default Layout

Collected from the Internet

Please contact [email protected] to delete if infringement.