Question

我试图了解StaticQuery如何在Gatsby / GraphQL工作流程中工作，并且作为一个试用版，我想构建一个带有背景图片的文章标题。

图像是在我要从（frontmatter.feature）构建的降价文件的最前面定义的。

我知道StaticQuery的性质是...很好...是静态的，因此我无法将动态变量传递给查询。但这不是我在做什么-我想。

这是我的例子：

articleHeader(frontmatter) {
  if (frontmatter.feature) {
    return (
      <StaticQuery
        query={graphql`
          query($base: String!) {
            file(base: { eq: $base }) {
              publicURL
            }
          }
        `}
        render={data => (
          <ArticleHeader
            style={"background-image:url(" + data.file.publicURL + ")"}
          >
            <Heading>{frontmatter.title}</Heading>
          </ArticleHeader>
        )}
      />
    );
  } else return <Heading>{frontmatter.title}</Heading>;
}

我的问题是我想将frontmatter.feature传递给查询，以便可以查询base: { eq: $base } ...但是如何？

注意：我已经正确设置了插件，并且可以通过graphiql界面查询文件而没有问题。

Answer 1

StaticQuery当前不接受GraphQL参数。您可以将标准查询与从Gatsby页面上的上下文中获取的参数一起使用，因此，如果需要访问上下文，请使用页面查询。

StaticQuery可以执行页面查询可以执行的大多数操作，包括片段。主要区别在于：


页面查询可以接受变量（通过pageContext），但只能添加到页面组件中

StaticQuery不接受变量（因此名称为“ static”），但可以在任何组件（包括页面）中使用

StaticQuery不适用于原始React.createElement调用；请使用JSX，例如

How StaticQuery differs from page query

Answer 2

如果您修改frontmatter.feature使其成为图像的相对路径，它将变成一个File节点，这意味着您可以在查询{{ 1}}：

publicURL

然后，您的文章标题组件就可以

frontmatter

在Gatsby中将字符串传递给GraphQL StaticQuery

2 个答案: