如何使用道具字符串将值传递给静态查询？

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

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

我一直在考虑使用传递给组件的值，例如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

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

提前谢谢你！

Answer 1

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

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

// Option 2
${({postName})

const query2 = `file(relativePath: {eq: ${({postName})}) { ... }`

看看我在一个项目中使用的一段 sn-p 代码： https://github.com/timrodz/.com/blob/master/src/components/common/Button/index.js#L33

Answer 2

简答：你不能。

关注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;