Как использовать graphql useStaticQuery в компоненте класса реакции

Question

Как мне использовать реактив useStaticQuery в классе компонента класса реактива. Я видел много примеров использования функциональных компонентов реагирования, но мне интересно знать, как это делается в компоненте класса, потому что я предпочитаю писать компоненты класса.

Я хотел бы преобразовать нечто подобное в реализованный компонент реагирования как класс.

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title}/>
      <Home/>
      <AboutMe/>

    </>
  )
}

Answer 1

Просто используйте компонент StaticQuery и оберните его вокруг частей, которые вы хотите визуализировать.

Для этого есть явная документация, проверьте: https://www.gatsbyjs.org/docs/static-query/

В вашем случае это может выглядеть примерно так:

const Layout = ({ children }) => {
  const query = graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `;

  return (
    <StaticQuery query={query}>
      {({ loading, error, data }) => {
        <>
          <Header siteTitle={data.site.siteMetadata.title} />
          <Home />
          <AboutMe />
        </>;
      }}
    </StaticQuery>
  );
};