在Gatsby上,如何使用道具进行GraphQL查询?

问题描述 投票:0回答:1

我正在将道具传递给新组件,并尝试使用该道具进行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查询?还是有其他方法可以做到这一点?

reactjs graphql gatsby
1个回答
3
投票

来自StaticQuery docs

[StaticQuery不接受变量(因此名称为” static”,但是可以在包括页面的任何组件中使用。

StaticQuery相同:

[hook version useStaticQuery不接受变量(因此名称为” static”,但是可以在包括页面的任何组件中使用。

您可以在gatsby的GitHub useStaticQuery中进一步阅读。

© www.soinside.com 2019 - 2024. All rights reserved.