GraphQL：警告：道具類型失敗：提供給“StaticQuery”的“對象”類型的道具“查詢”無效，預期為“字符串”

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 中的錯誤。 這里有一個類似問題的潛在解決方法。

嘗試拉出查詢，將其包裝在模板字符串中，然后再將其傳遞給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