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

GraphQL：警告：道具类型失败：提供给“ StaticQuery”的“对象”类型的无效道具“查询”，预期为“字符串”

1 个答案: