graphQL 查询中的字符串插值答案

【问题标题】：String interpolation in graphQL querygraphQL 查询中的字符串插值
【发布时间】：2019-09-30 18:36:50
【问题描述】：

我是 Gatsby 及其用于检索资产的 graphQL 查询系统的新手。我有一个工作组件Image 获取图像并显示它。我想自定义图像的名称，但我不知道如何编辑。

这是工作组件：

const Image = () => (
  <StaticQuery
    query={graphql`
      query {
        // fetching the image gatsby-astronaut.png
        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
);

这就是我尝试定制的图像：

const Image = ({ imgName }: { imgName: string }) => (
  <StaticQuery
    query={graphql`
      query {
        // fetching the image imgName
        placeholderImage: file(relativePath: { eq: "${imgName}.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
);

但它会引发以下查询错误：

Expected 1 arguments, but got 2.ts(2554)

我怎样才能有一个可自定义的图像名称？

【问题讨论】：

标签： javascript typescript graphql gatsby

【解决方案1】：

这是我遇到的简单方法：

const Image = props => {
  const data = useStaticQuery(graphql`
    query {
      firstImg: file(relativePath: { eq: "firstImg.png" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }

      secondImg: file(
        relativePath: { eq: "secondImg.png" }
      ) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  switch (props.name) {
    case "firstImg":
      return <Img fluid={data.firstImg.childImageSharp.fluid} />
    case "secondImg":
      return <Img fluid={data.secondImg.childImageSharp.fluid} />
    default:
      return <Img />
  }
}

并像这样使用它：

<Image name="firstImg" />

您还可以通过引入一个包含您可能想要显示的所有图像的对象来使其无错字，如下所示：

const Images = { firstImg: 'firstImg', secondImg: 'secondImg' }

然后像这样使用它：

<Image name={Images.firstImage} />

和

...
switch (props.name) {
case Images.firstImage:
...

【讨论】：

很方便

【解决方案2】：

查看the docs for static query

StaticQuery 可以做页面查询可以做的大部分事情，包括片段。主要区别在于：

页面查询可以接受变量（通过 pageContext），但只能是添加到页面组件中

StaticQuery 不接受变量（因此称为“静态”），但可用于任何组件，包括页面

因此，您可能希望在页面查询中查询图像的GatsbyImageSharpFluid，并将其作为流体道具直接传递给 gatsby 图像。

【讨论】：

我没能成功，但你的回答是相关的。谢谢！

【解决方案3】：

使用 ksav 答案，我设法通过使用 pageQuery 完成这项工作，并通过 props 接收我想在特定页面中使用的图像。

像这样：

export const pageQuery = graphql`
  coverImage: file(relativePath: { eq: "coverImage.png" }) {
    childImageSharp {
      fluid(maxWidth: 600) {
        ...GatsbyImageSharpFluid_tracedSVG
      }
    }
  }
}`

如果你将它添加到你的页面组件中，你将收到带有 coverImage.png 图像的道具 coverImage。希望这会有所帮助！

【讨论】：