我正在将道具传递给新组件,并尝试使用该道具进行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: String interpolations are not allowed in graphql fragments. Included fragments should be referenced as...MyModule_foo.
我已经尝试了各种不同的技巧来摆脱“字符串插值”错误。但是它们都不起作用(每次都会显示不同的错误)。
我假设您无法使用道具进行graphql查询?还是有其他方法可以做到这一点?
[
StaticQuery
不接受变量(因此名称为” static”,但是可以在包括页面的任何组件中使用。
与StaticQuery
相同:
[hook version
useStaticQuery
不接受变量(因此名称为” static”,但是可以在包括页面的任何组件中使用。
您可以在gatsby的GitHub useStaticQuery
中进一步阅读。