reactjs - 在 Gatsby 上，如何使用 prop 进行 GraphQL 查询？

Question

我正在将一个 prop 传递给一个新组件并尝试使用它来执行 graphql 查询。看起来像这样。

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import Img from "gatsby-image"

const ComponentName = props => {
  const getImage = graphql`
{
  image: file(relativePath: { eq: ${props.img} }) {
    childImageSharp {
      fluid {
        ...GatsbyImageSharpFluid
      }
    }
  }
}
`
  const data = useStaticQuery(getImage)
  return (
    <li>
      <Img
        fluid={data.image.childImageSharp.fluid}
      />
    </li>
  )
}

export default ComponentName

但我收到此错误 BabelPluginRemoveGraphQLQueries:graphql 片段中不允许进行字符串插值。包含的片段应引用为...MyModule_foo。

我尝试了各种不同的技巧来消除“字符串插值”错误。但是它们都不起作用(每次都显示不同的错误)。

我假设您不能使用 props 进行 graphql 查询？还是有另一种方法可以做到这一点？

Answer 1

来自 StaticQuery docs :

StaticQuery does not accept variables (hence the name “static”), but can be used in any component, including pages.

hook version useStaticQuery 也一样:

useStaticQuery does not accept variables (hence the name “static”), but can be used in any component, including pages.

您可以在 gatsby 的 GitHub 中进一步阅读 here .