मैं एक ग्राफ़िकल क्वेरी से एक फ़िल्टर छवि के रूप में एक फ़ील्ड का उपयोग कैसे कर सकता हूं ताकि एक अलग क्वेरी में एक द्रव छवि प्राप्त हो सके?
मेरे पास दो ग्रेफ्ल स्रोत हैं, एक द्रव चित्रों के लिए और एक मोंगो डेटाबेस में पात्रों के लिए। मैं पात्रों को पृष्ठ पर मैप कर रहा हूं और मुझे तरल आईएमजी को खोजने के लिए चरित्र नाम ("allMongodbMobileLegenddevChamps" में एक फिल्टर के रूप में) का उपयोग करने की आवश्यकता है। तो मेरे पास कुछ ऐसा है
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>
)
}
अगर मैं ग्राफकल का उपयोग नहीं कर रहा था, तो मैं इस तरह से "champ.name" की छवि में src सेट करूँगा:
<Image src = `/path/to/img/${champ.name}.jpg` />
मैं अपनी छवि क्वेरी को champ.name के साथ कैसे फ़िल्टर कर सकता हूं? क्या मुझे अपोलो का उपयोग कुछ इस तरह से करना चाहिए?
जवाब
यह गैट्सबी है और वर्तमान में यह संभव नहीं है क्योंकि आप इस जीएच मुद्दे का पालन करने के लिए चर में प्रश्नों को पास नहीं कर सकते हैं https://github.com/gatsbyjs/gatsby/issues/10482
यह मानते हुए कि गुजरने वाले चर संभव थे, मैं सभी पात्रों को एक पृष्ठ क्वेरी के रूप में बनाऊंगा जो मुझे प्रॉप्स से नाम का पुनर्गठन करने की अनुमति देगा और फिर एक स्थिर क्वेरी जिस पर मैं फ़िल्टर के रूप में नाम दर्ज करूंगा।
मैंने इस समाधान का उपयोग किया और अपनी आवश्यकताओं के लिए इसे थोड़ा अनुकूलित किया: ग्राफक्यूएल प्रश्नों में चर
एक मूल घटक में, मैं सभी चैंपियनों का नक्शा बनाता हूं और प्रत्येक के लिए एक बच्चा घटक बनाता हूं, और इसे चैंपियन नाम देता हूं।
बाल घटक में, मेरे पास एक चर, नाम है, जो उस छवि के लिए सही नोड को संग्रहीत करता है जिसे मैं खोज विधि का उपयोग करके चैंपियन नाम को छवियों के सापेक्ष मिलान करने के लिए चाहता हूं (चित्र में चैंपियन के समान सटीक नाम है) । मैं तब फ़ंक्शन रेंडरइमेज को कॉल करता हूं जो चर "नाम" का उपभोग करता है और नोड में तरल छवि पाता है ।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