Ayrı bir sorguda akıcı bir görüntü elde etmek için bir graphql sorgusundan bir filtre olarak bir alanı nasıl kullanabilirim?
İki graphql kaynağım var, biri akışkan görüntüler için ve biri de mongo veritabanındaki karakterler için. Karakterleri sayfaya eşleştiriyorum ve sıvı img'yi bulmak için karakter adlarını ("allMongodbMobileLegendsdevChamps" içindeki ad alanı) filtre olarak (muhtemelen orijinalAdı filtresini kullanarak) kullanmam gerekiyor. Bu yüzden böyle bir şeye sahibim
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 kullanmasaydım, resimdeki src'yi şu şekilde "champ.name" olarak ayarlardım:
<Image src = `/path/to/img/${champ.name}.jpg` />
Resim sorgumu champ.name ile nasıl filtreleyebilirim? Apollo'yu böyle bir şey için kullanmalı mıyım?
Yanıtlar
Bu Gatsby ve şu anda mümkün değil çünkü bu GH sorununu takip eden sorgulara değişkenleri aktaramazsınız. https://github.com/gatsbyjs/gatsby/issues/10482
Değişken aktarmanın mümkün olduğunu varsayarsak, tüm karakterleri, adı props'tan yeniden yapılandırmama izin verecek bir sayfa sorgusu ve ardından adı filtre olarak geçireceğim statik bir sorgu olarak yapardım.
Bu çözümü kullandım ve ihtiyaçlarıma göre biraz uyarladım: graphQL sorgularındaki değişkenler
Bir ana bileşende, tüm şampiyonları eşlerim ve her biri için bir alt bileşen oluşturur ve ona şampiyonların adını iletirim.
Alt bileşende, şampiyonların adını göreli Yolla eşleştirmek için find yöntemini kullanarak görüntülemek istediğim görüntü için doğru düğümü saklayan bir değişkenim var (görüntüler şampiyonla aynı ada sahip) . Daha sonra "name" değişkenini tüketen ve node.childImageSharp.fluid içindeki akışkan görüntüyü bulan ve görüntü bileşenimi doğru akışkan görüntü konumu ile oluşturan renderImage işlevini çağırıyorum.
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