盖茨比：在 JavaScript 中定义静态查询？答案

【问题标题】：Gatsby: Define static query in JavaScript?盖茨比：在 JavaScript 中定义静态查询？
【发布时间】：2020-05-29 14:31:58
【问题描述】：

所以在页面中，您可以将查询定义为 javascript 中的对象，并自动将其作为 data 属性传递给组件。

在组件中，这不会发生，我看到的示例显示了以声明方式定义的查询作为标记的一部分，然后传递给渲染方法。我真的一点也不喜欢。

在组件的 JS 中定义 graphql 查询然后在该组件中使用它的 gatsby 方式是什么。

例如：

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

这是一个使用 graphql 数据对象的 gatsby 图像。但是该对象仅在页面上可用，而不是在组件上可用。（现在我正在将数据道具从页面传递到组件中，但这不是我想要的）

【问题讨论】：

你能说明你想在哪里使用那个查询吗？
@ZohaibIjaz 添加了

标签： javascript reactjs gatsby

【解决方案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>
  )
}`

【讨论】：