GraphQL: Предупреждение: сбойный тип проп: неверный запрос `запрос` типа` объект`, переданный в `StaticQuery`, ожидаемый` строка`

Question

Я работаю над своим сайтом Гэтсби. Но я сталкиваюсь со странной проблемой, когда при посещении одного поста в блоге я получаю следующую ошибку для моего запроса:

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

Почему я получаю это ошибка :)? Я пытаюсь это исправить, но без удачи. Надеюсь, кто-нибудь может мне помочь.

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