Gatsby:在JavaScript中定义静态查询?

Question

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

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

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

例如：

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

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

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>
)
}`