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

Posted 2023-03-08

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

【英文标题】：How can I use a field as a filter from one graphql query to get a fluid image thats in a separate query?

【发布时间】：2020-12-05 15:02:47

【问题描述】：

我有两个 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 用于这样的事情吗？

【参考方案1】：

这是 Gatsby，目前不可能，因为您无法将变量传递给查询遵循这个 GH 问题https://github.com/gatsbyjs/gatsby/issues/10482

假设可以传递变量，我会将所有字符作为一个页面查询，这将允许我从 props 重构名称，然后是一个静态查询，我会将名称作为过滤器传递给该查询。

【讨论】：

感谢您的回复。有没有其他方法可以在不使用查询变量的情况下实现这一点？

我也在尝试解决similar issue (Show title of next page)，但还没有运气

您可以尝试一种笨拙的方式。将您的图像组件作为您传递名称的子组件并手动插入查询字符串，然后尝试将其传递。不确定它是否会起作用。

是我发布的答案，您插入字符串是什么意思？

不，我的建议与github.com/gatsbyjs/gatsby/issues/2293#issue-261880533 类似（这不起作用），但实际上你的方式被认为更好github.com/gatsbyjs/gatsby/issues/10482#issuecomment-494589454

【参考方案2】：

我使用了这个解决方案，并根据我的需要稍微调整了一下：Variables in graphQL queries

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

在子组件中，我有一个变量 name，它存储我想要显示的图像的正确节点，方法是使用 find 方法将冠军名称与图像 relativePath 匹配（图像具有与冠军）。然后我调用函数 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

【讨论】：

为了提高性能，你可以记住这个类似于github.com/gatsbyjs/gatsby/issues/10482#issuecomment-485349612