如何使用字段作为来自一个 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 重构名称，然后是 static 查询，我会将名称作为过滤器传递给该查询。

Answer 2

我使用了这个解决方案并根据我的需要稍微调整了它： graphQL 查询中的变量

在父组件中我 map 所有冠军并为每个冠军创建一个子组件，并将冠军名称传递给它。

在子组件中，我有一个变量 name，它存储我想要显示的图像的正确节点，方法是使用 find 方法将冠军名称与图像 relativePath 匹配（图像与冠军具有相同的确切名称） . 然后我调用 function renderImage 使用变量“name”并在 node.childImageSharp.fluid 中找到流体图像，并使用正确的流体图像位置创建我的图像组件。

 import React from "react" import { useStaticQuery, graphql } from "gatsby" import { displayName } from "../../utils/championName" import * as S from "../styled/ChampionGridCard" const renderImage = file => { return <S.ChampionImage fluid={file.node.childImageSharp.fluid} /> } const ChampionGridCard = props => { const data = useStaticQuery(graphql` { allFile(filter: { sourceInstanceName: { eq: "champImages" } }) { edges { node { extension relativePath childImageSharp { fluid {...GatsbyImageSharpFluid } } } } } } `) const name = data.allFile.edges.find( image => image.node.relativePath === `ssbu/${props.champName}.jpg` ) return ( <S.ChampionGridCard to={`/champ/${props.champName}`}> <S.ChampionImageWrapper>{renderImage(name)}</S.ChampionImageWrapper> </S.ChampionGridCard> ) } export default ChampionGridCard