하나의 graphql 쿼리에서 필드를 필터로 사용하여 별도의 쿼리에있는 유동 이미지를 얻으려면 어떻게해야합니까?
두 개의 graphql 소스, 하나는 유동적 이미지 용이고 다른 하나는 몽고 데이터베이스의 문자 용입니다. 문자를 페이지에 매핑하고 있으며, 유동 이미지를 찾기 위해 문자 이름 ( "allMongodbMobileLegendsdevChamps"의 이름 필드)을 필터로 사용해야합니다 (originalName 필터 사용 가능). 그래서 이런 게 있어요
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를 사용해야합니까?
답변
이것은 Gatsby이며 현재이 GH 문제를 따르는 쿼리에 변수를 전달할 수 없기 때문에 불가능합니다. https://github.com/gatsbyjs/gatsby/issues/10482
변수 전달이 가능하다고 가정하면 모든 문자를 소품에서 이름을 재구성 할 수있는 페이지 쿼리로 만든 다음 이름을 필터로 전달할 정적 쿼리로 만들 수 있습니다.
이 솔루션을 사용하고 필요에 맞게 약간 조정했습니다. graphQL 쿼리의 변수
상위 구성 요소에서 모든 챔피언을 매핑하고 각 챔피언에 대한 하위 구성 요소를 만들고 챔피언 이름을 전달합니다.
하위 구성 요소에는 챔피언 이름을 이미지 relativePath에 일치시키기 위해 find 메서드를 사용하여 표시하려는 이미지의 올바른 노드를 저장하는 변수 이름이 있습니다 (이미지는 챔피언과 동일한 이름을 가짐). . 그런 다음 "name"변수를 사용하고 node.childImageSharp.fluid에서 유체 이미지를 찾고 올바른 유체 이미지 위치로 이미지 구성 요소를 만드는 함수 renderImage를 호출합니다.
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