将字符串传递给 Gatsby 中的 GraphQL StaticQuery答案

【问题标题】：Pass string to a GraphQL StaticQuery in Gatsby将字符串传递给 Gatsby 中的 GraphQL StaticQuery
【发布时间】：2019-11-04 01:00:42
【问题描述】：

我正在尝试了解 StaticQuery 在 Gatsby/GraphQL 工作流程中的工作原理，作为试验，我想构建一个带有背景图片的文章标题。

图像是在我从 (frontmatter.feature) 构建的降价文件的 frontmatter 中定义的。

我知道 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界面查询文件没有问题。

【问题讨论】：

标签： graphql gatsby

【解决方案1】：

StaticQuery 目前不接受 GraphQL 参数。您可以使用标准查询，参数取自 Gatsby 页面上的上下文，因此如果您需要访问上下文，请使用页面查询。

StaticQuery 可以做页面查询可以做的大部分事情，包括片段。主要区别在于：

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

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

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

How StaticQuery differs from page query

【讨论】：

【解决方案2】：

如果您修改frontmatter.feature 使其成为图像的相对路径，它将变成File 节点，这意味着您可以在任何查询frontmatter 的地方查询publicURL：

export const query = graphql`
  allMarkdownRemark {
    nodes {
      frontmatter {
        title
        feature {
          publicURL
        }
      }
    }
  }
`

那么，你的文章标题组件就可以很简单了

const ArticleHeader = ({ frontmatter }) => {
  const { title, feature } = frontmatter
  if (!feature) return <Heading ... />
  return (
    <div style={`background-image:url(${feature.publicURL})`}>
      <Heading ...>
    </div>
  )
}

【讨论】：