Как я могу использовать поле в качестве фильтра из одного запроса 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 in image на «champ.name» следующим образом:
<Image src = `/path/to/img/${champ.name}.jpg` />
Как я могу отфильтровать свой запрос изображения с помощью champ.name? Стоит ли мне использовать Apollo для чего-то подобного?
Ответы
Это Гэтсби, и в настоящее время это невозможно, потому что вы не можете передавать переменные в запросы, следующие за этой проблемой GH. https://github.com/gatsbyjs/gatsby/issues/10482
Предположив, что передача переменных возможна, я бы сделал все символы как запрос страницы, который позволил бы мне реструктурировать имя из реквизита, а затем статический запрос, которому я бы передал имя как фильтр.
Я использовал это решение и немного адаптировал его для своих нужд: Переменные в запросах graphQL
В родительском компоненте я сопоставляю всех чемпионов, создаю для каждого дочерний компонент и передаю ему имя чемпионов.
В дочернем компоненте у меня есть переменная name, в которой хранится правильный узел для изображения, которое я хочу отобразить, используя метод find, чтобы сопоставить имя чемпионов с изображениями relativePath (изображения имеют то же точное имя, что и чемпион) . Затем я вызываю функцию 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