ฉันจะใช้เขตข้อมูลเป็นตัวกรองจากแบบสอบถาม graphql หนึ่งเพื่อให้ได้ภาพที่ลื่นไหลในแบบสอบถามแยกกันได้อย่างไร
ฉันมีแหล่งที่มาของ 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 สำหรับสิ่งนี้หรือไม่?
คำตอบ
นี่คือ Gatsby และในปัจจุบันเป็นไปไม่ได้เนื่องจากคุณไม่สามารถส่งผ่านตัวแปรไปยังคำค้นหาที่เป็นไปตามปัญหา GH นี้ https://github.com/gatsbyjs/gatsby/issues/10482
สมมติว่าการส่งผ่านตัวแปรเป็นไปได้ฉันจะทำให้ตัวอักษรทั้งหมดเป็นคิวรีของหน้าซึ่งจะช่วยให้ฉันสามารถปรับโครงสร้างชื่อจากอุปกรณ์ประกอบฉากจากนั้นแบบสอบถามแบบคงที่ซึ่งฉันจะส่งในชื่อเป็นตัวกรอง
ฉันใช้โซลูชันนี้และปรับให้เข้ากับความต้องการของฉันเล็กน้อย: ตัวแปรในการสืบค้น graphQL
ในองค์ประกอบหลักฉันแมปแชมป์เปี้ยนทั้งหมดและสร้างองค์ประกอบลูกสำหรับแต่ละตัวและส่งต่อชื่อแชมป์เปี้ยน
ในคอมโพเนนต์ลูกฉันมีตัวแปรชื่อที่เก็บโหนดที่ถูกต้องสำหรับรูปภาพที่ฉันต้องการแสดงโดยใช้วิธีการค้นหาเพื่อจับคู่ชื่อแชมเปี้ยนกับรูปภาพที่สัมพันธ์กับพา ธ (รูปภาพมีชื่อตรงกับแชมเปี้ยน) . จากนั้นฉันเรียกใช้ฟังก์ชัน 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