javascript - 如何使用字段作为来自一个 graphql 查询的过滤器来获取位于单独查询中的流体图像？

Question

我有两个 graphql 源，一个用于流体图像，一个用于 mongo 数据库中的字符。我将字符映射到页面，我需要使用字符名称(“allMongodbMobileLegendsdevChamps”中的名称字段)作为过滤器(可能使用 originalName 过滤器)来查找流体 img。所以我有这样的东西

query MyQuery {
  allMongodbMobileLegendsdevChamps {
    nodes {
      name
    }
  }
  allImageSharp(filter: {fluid: {originalName: {eq: "characterName.jpg"}}}) {
    nodes {
      fluid {
        ...allImageSharpFluid
      }
    }
  }
}

const Index = ({ data }) => {
  const {
    allMongodbMobileLegendsdevChamps: { nodes: champs },
    allImageSharp: { nodes: fluid },
  } = data
  return (
    <section className={grid}>
      {champs.map(champ => {
        return (
          <Link to={`/champ/${champ.name}`}>
            <Image fluid={fluid.fluid} />
            <h3>{champ.name}</h3>
          </Link>
        )
      })}
    </section>
  )
}

如果我没有使用 graphql，我只需将图像中的 src 设置为“champ.name”，如下所示:

<Image src = `/path/to/img/${champ.name}.jpg` />

如何使用 champ.name 过滤我的图像查询？我应该使用 Apollo 来做这样的事情吗？

Answer 1

这是 Gatsby ，目前不可能，因为您无法将变量传递给查询遵循此 GH 问题 https://github.com/gatsbyjs/gatsby/issues/10482
假设可以传递变量，我会将所有字符作为页面查询，这将允许我从 props 重构名称，然后是静态查询，我会将名称作为过滤器传递给该查询。