javascript - 如何使用 Prop 字符串将值传递给静态查询？

Question

我正在 Gatsby.js 中开发一个站点，其中包含一个博客，并且用于帖子布局，我正在使用由帖子作者设置的背景图像来编写这个标题。我仍处于设计阶段，放置元素，空白文本等。

我已经使用 BackgroundImage、graphQL 和 StaticQuery 制作了这个组件，并且在它的代码中，如果我使用“post_8.jpg”文本缩小对来自 gatsby-source-filesystem 的图像的搜索范围，它应该可以正常工作。

import React from 'react'
import { graphql, StaticQuery } from 'gatsby'
import BackgroundImage from 'gatsby-background-image'
import TextScramble from './TextScramble'


const BackgroundDiv = ({ className, children }) => (
  <StaticQuery 
    query={graphql`
      query($post: String! ) {
        file(relativePath: {eq: "post_8.jpg"}) {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        }
      `
    }
    render={data => {
      const imageData = data.file.childImageSharp.fluid
      return (
        <BackgroundImage
          Tag="div"
          className={className}
          fluid={imageData}
        >
    <h1 className="bg-white shaddow shadow-md py-1 px-4 w-auto inline-block text-4xl absolute bottom-0 mb-24"><TextScramble>{ children }</TextScramble></h1>
        </BackgroundImage>
      )}
    }
  />
)

export default BackgroundDiv

但是，我想知道如何将包含帖子的页面中来自frontmatter 的值传递给该组件。

我一直在考虑使用传递给组件的值，例如 postName .例如:

const BackgroundDiv = ({ className, children, postName }) => (

然后，它将在字符串中的查询中获取该值。

query={graphql`
      query($post: String! ) {
        file(relativePath: {eq: ${postName}}) {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        }
      `
    }

我在上面做了这个简单的添加，但没有用。编译失败告诉我

String interpolation is not allowed in graphql tag:

    9 |     query={graphql`   
   10 |       query($postName: String! ) {
 > 11 |         file(relativePath: {eq: ${postName}}) {
      |                                ^^^^^^^^^^^   
   12 |           childImageSharp {   
   13 |             fluid {   
   14 |               ...GatsbyImageSharpFluid

 File: [$pathToFolder]/gatsby-theme-cripto/src/components/backgroundDiv.js

我已经在谷歌上搜索了字符串插值问题，甚至在这里结束，但我无法将这些内容与我的问题联系起来。我不是经验丰富的开发人员，所以我相信我遗漏了一些东西。非常感谢您对此事的任何想法，就像我可以发布的任何代码请求以帮助理解此问题一样。

先感谢您!

Answer 1

简短的回答:你不能。

关注 github repo 上的讨论.如果您一直向下滚动，看起来它将在接下来的几个版本中可用。

解决方法

查询所有数据。

过滤您需要的特定数据。您可以在数组函数中使用变量。

这里是 gatsby-image 的实现我在我的项目中使用的

const Page = (props) => {
  const { data: { allFile: { edges } } } = props;
  const oneImage = edges.filter(edge => // filter with your variable
    edge.node.childImageSharp.fluid.originalName === props.yourVARIABLE)[0].node.childImageSharp.fluid;
  {/* ... */}
}
export const query = graphql`
// ...

编辑

在您的评论中，您犯了一个错误 destructuring your props在箭头函数的参数中。这是您修改后的代码:

const BackgroundDiv = (props) => { 
  // destructuring all the props to make it clear
  const postName = props.postName // the variable you want to filter for
  const className = props.className;
  const children = props.children;
  const { data: { allFile: { edges } } } = props; 

  const oneImage = edges.filter(edge =>  
    edge.node.childImageSharp.fluid.originalName === postName)[0].node.childImageSharp.fluid;