GraphQL：警告：道具类型失败：提供给`StaticQuery`的`object`类型的无效道具`query`，预期`string`

Question

我正在开发我的 Gatsby 网站。但是我遇到了一个奇怪的问题，在访问单个博客文章时，我的查询出现以下错误：

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)

我的 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

为什么我会收到此错误:)？我正在尝试解决此问题，但没有运气。希望有人可以帮助我。

Answer 1

可能是由于 StaticQuery 中的错误。 a similar issue here 中有一个潜在的解决方法。

尝试将查询拉出，将其包装在模板字符串中，然后将其传递给StaticQuery 的查询参数。

    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