如何使用 props 字符串将值传递给静态查询?

Question

我正在盖茨比开发一个网站.js里面有一个博客，并且用于帖子布局，我正在用由帖子作者设置的背景图像来编码这个标题。我仍处于设计阶段，放置元素，空白文本等。

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

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

但是，我想知道如何将包含帖子的页面中的前言的值传递给此组件。

我一直在考虑使用传递给组件的值，例如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 存储库上的讨论。如果您一直向下滚动，看起来它将在接下来的几个版本中可用。

解决方法

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

这是我在项目中使用的带有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 = (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;

Answer 2

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

// Option 1
$postName
const query1 = `file(relativePath: {eq: $postName}) { ... }`
// Option 2
${({postName})
const query2 = `file(relativePath: {eq: ${({postName})}) { ... }`

看看我用于我的一个项目的代码片段： https://github.com/timrodz/.com/blob/master/src/components/common/Button/index.js#L33