Bagaimana cara menggunakan bidang sebagai filter dari satu kueri graphql untuk mendapatkan gambar cairan yang ada dalam kueri terpisah?
Saya memiliki dua sumber graphql, satu untuk gambar yang mengalir dan satu untuk karakter dalam database mongo. Saya memetakan karakter ke halaman dan saya perlu menggunakan nama karakter (kolom nama di "allMongodbMobileLegendsdevChamps") sebagai filter (mungkin menggunakan filter originalName) untuk menemukan img cairan. Jadi saya punya sesuatu seperti ini
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>
)
}
Jika saya tidak menggunakan graphql, saya hanya akan mengatur src pada gambar menjadi "champ.name" seperti ini:
<Image src = `/path/to/img/${champ.name}.jpg` />
Bagaimana cara memfilter kueri gambar saya dengan nama juara? Haruskah saya menggunakan Apollo untuk hal seperti ini?
Jawaban
Ini adalah Gatsby dan saat ini tidak mungkin karena Anda tidak dapat meneruskan variabel ke kueri yang mengikuti masalah GH ini https://github.com/gatsbyjs/gatsby/issues/10482
Andaikan variabel yang lewat dimungkinkan, saya akan menjadikan semua karakter sebagai kueri halaman yang akan memungkinkan saya untuk merestrukturisasi nama dari props dan kemudian kueri statis yang akan saya berikan dalam nama sebagai filter.
Saya menggunakan solusi ini dan sedikit menyesuaikannya untuk kebutuhan saya: Variabel dalam kueri graphQL
Dalam komponen induk, saya memetakan semua juara dan membuat komponen anak untuk masing-masing juara, dan memberikannya nama juara.
Di komponen anak, saya memiliki variabel, name, yang menyimpan node yang benar untuk gambar yang ingin saya tampilkan dengan menggunakan metode find untuk mencocokkan nama champion dengan gambar relativePath (gambar memiliki nama yang sama persis dengan champion) . Saya kemudian memanggil fungsi renderImage yang menggunakan variabel "nama" dan menemukan gambar fluida di node.childImageSharp.fluid, dan membuat komponen gambar saya dengan lokasi gambar fluida yang benar.
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