Javascript 如何使用props字符串将值传递给StaticQuery？

我在Gatsby.js中开发了一个网站，里面有一个博客，我正在用一个背景图片对这个标题进行编码，由文章作者设置。我仍然在设计阶段，放置元素，空白文本等

我已经用BackgroundImage、graphQL和StaticQuery制作了这个组件，在它的代码中，如果我用“post_8.jpg”文本缩小对来自gatsby源文件系统的图像的搜索范围，它会正常工作

从“React”导入React
从“gatsby”导入{graphql，StaticQuery}
从“盖茨比背景图像”导入背景图像
从“./TextScramble”导入TextScramble
const BackgroundDiv=（{className，children}）=>(
{
const imageData=data.file.childImageSharp.fluid
返回(
{儿童}
)}
}
/>
)
导出默认背景div

但是，我想知道如何将frontmatter的值从包含帖子的页面传递到这个组件

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

postName

。例如：

constbackgrounddiv=（{className，children，postName}）=>(

然后，它将在查询中以字符串形式获取该值

query={graphql`
查询（$post:String！）{
文件（相对路径：{eq:${postName}}）{
childImageSharp{
流质{
…盖茨比磁流体
}
}
}
}
`
}

我在上面做了一个简单的加法，但没有成功。编译告诉我它失败了

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

我在google上搜索过字符串插值问题，甚至到此为止，但我无法将这些内容与我的问题联系起来。我不是一个有经验的开发人员，所以我相信我遗漏了一些东西。如果您对这件事有任何想法，我将不胜感激，就像我可以发布代码来帮助理解这个问题一样

---

提前感谢您！

我遇到了类似的问题。幸运的是，我发现这一点适用于字符串插值：

//选项1
$postName
常量query1=`file（relativePath:{eq:$postName}）{…}`
//选择2
${（{postName}）
const query2=`file（relativePath:{eq:${（{postName}）}{…}`

请看一段我在我的一个项目中使用的代码：

简短回答：你不能。 按照上的讨论进行操作。如果一直向下滚动，它看起来将在接下来的几个版本中提供

变通办法

• 查询所有数据
• 筛选所需的特定数据。可以在数组函数中使用变量

这里是我在项目中使用的带有

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`
// ...

---

编辑 在您的评论中，您的箭头函数的参数出错。这是您修改的代码：

const BackgroundDiv=（道具）=>{
//分解所有道具，让它清晰可见
const postName=props.postName//要筛选的变量
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；

谢谢你的anwser，@EliteRaceElephant。我知道现在不可能这样。我已经尝试了你的建议。但我想我不能真正理解它。当我保存.js文件时，代码编译成功，但我在浏览器错误上得到了“props undefined”。下面是我对你的建议所做的插入：

const BackgroundDiv=({className，children，props}）=>{const{data:{allFile:{edges}}}=props；const-oneImage=edges.filter（edge=>edge.node.childImageSharp.fluid.originalName==props.postName）[0].node.childImageSharp.fluid；

我是否遗漏了什么？删除了以前的评论，因为我粘贴了错误的链接。我想粘贴这一条：如果你愿意，请帮我提一个问题。我有一个包含1000篇博文的REST API。我现在开始使用GraphQL，不再使用REST。问题：从所有1000篇文章中，我需要3篇用于主页。你愿意吗通过REST查询3会更快，或者只使用GraphQL查询所有内容并过滤它们会更快？非常感谢你，Juan，但我相信这在我的情况下不起作用。尝试了两个选项都没有成功。：（字符串插值无法解决Gatsby中GraphQL的当前限制。请按照github讨论（）详细回答原因。