Question

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

在组件中不会发生这种情况，我所看到的示例显示了声明式地将查询定义为标记的一部分，然后将其传递给render方法。我真的一点都不喜欢。

在组件的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>
  )
}`

Gatsby：用JavaScript定义静态查询吗？

1 个答案: