Jak mogę użyć pola jako filtru z jednego zapytania Graphql, aby uzyskać płynny obraz w osobnym zapytaniu?
Mam dwa źródła Graphql, jedno dla obrazów płynnych i jedno dla znaków w bazie danych mongo. Mapuję znaki na stronę i muszę użyć nazw znaków (pole nazwy w „allMongodbMobileLegendsdevChamps”) jako filtru (prawdopodobnie używając filtru originalName), aby znaleźć płynny obraz. Więc mam coś takiego
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>
)
}
Gdybym nie używał graphql, po prostu ustawiłbym src w obrazie na „champ.name” w następujący sposób:
<Image src = `/path/to/img/${champ.name}.jpg` />
Jak mogę filtrować zapytanie dotyczące obrazu za pomocą champ.name? Czy powinienem używać Apollo do czegoś takiego?
Odpowiedzi
To jest Gatsby i obecnie nie jest to możliwe, ponieważ nie można przekazywać zmiennych do zapytań śledzących ten problem z GH https://github.com/gatsbyjs/gatsby/issues/10482
Zakładając, że przekazywanie zmiennych jest możliwe, uczyniłbym wszystkie znaki jako zapytanie o stronę, które pozwoli mi zmienić strukturę nazwy z właściwości, a następnie statyczne zapytanie, do którego przekażę nazwę jako filtr.
Skorzystałem z tego rozwiązania i dostosowałem je nieco do swoich potrzeb: Zmienne w zapytaniach GraphQL
W komponencie nadrzędnym mapuję wszystkich mistrzów i tworzę komponent podrzędny dla każdego z nich i przekazuję mu nazwę mistrza.
W komponencie podrzędnym mam zmienną name, która przechowuje prawidłowy węzeł dla obrazu, który chcę wyświetlić, używając metody wyszukiwania, aby dopasować nazwę mistrza do ścieżki względnej obrazów (obrazy mają dokładnie taką samą nazwę jak mistrz) . Następnie wywołuję funkcję renderImage, która zużywa zmienną „name” i znajduje płynny obraz w node.childImageSharp.fluid i tworzy mój komponent obrazu z poprawną lokalizacją obrazu płynnego.
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