Question

我正在尝试创建一个与Gatsby Image一起使用的自定义React组件。我的目标是拥有一个看起来像这样的组件：

<Profile image="image-name-1.jpg" />
<Profile image="image-name-2.png" />

换句话说，我希望能够在组件本身内传递图像的名称。现在是配置文件组件的简化版本：

const Profile = props => {

  const data = useStaticQuery(graphql`
    query ImageQuery {
      file(relativePath: { regex: "/${props.image}/" }) {
        childImageSharp {
          fluid(maxWidth: 360) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
      <ProfileImage fluid={data.file.childImageSharp.fluid} />
  )
}

现在，这不起作用-这是我收到的错误消息：

String interpolations are not allowed in graphql fragments. Included fragments should be referenced as `...MyModule_foo`

所以我不能在GraphQL查询中使用字符串插值-因此我无法将prop传递给查询（至少不是通过字符串插值）。

不过，我想知道-是否有其他方法可以进行设置，以便我可以将图像名称作为道具传递？

如果是这样，有什么想法要设置它吗？

谢谢。

注意：：有人建议这是与此问题重复的问题：Pass string to a GraphQL StaticQuery in Gatsby。但是，在查看了该问题的答案之后，我仍然不知道如何解决我在此问题中提到的特定问题。

在Gatsby中将Prop传递给GraphQL查询

0 个答案: