Гэтсби: Определить запрос c в JavaScript?

Question

Таким образом, на странице вы можете определить запрос как объект в javascript, и он автоматически передается компоненту как data prop.

В компонентах этого не происходит и примеры, которые я видел, показывают, что запрос определен декларативно как часть разметки, а затем передан в метод рендеринга. Мне это совсем не нравится.

Что такое способ Гэтсби, чтобы определить запрос graphql в JS компонента и затем использовать его в этом компоненте.

Например, :

  <Img fixed={data.logo.childImageSharp.fixed} />

Это изображение Гэтсби, использующее объект данных graphql. Но этот объект доступен только на странице, а не компонент. (Сейчас я передаю данные в компонент со страницы, но это не то, что я хочу)

Answer 1

Проверьте useStaticQuery в документации.

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
export default () => {
  const data = useStaticQuery(graphql`
    query HeaderQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  return (
    <header>
      <h1>{data.site.siteMetadata.title}</h1>
    </header>
  )
}`