Как я могу использовать поле в качестве фильтра из одного запроса graphql, чтобы получить плавное изображение в отдельном запросе?

Aug 16 2020

У меня есть два источника 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 для чего-то подобного?

Ответы

3 Saihaj Aug 27 2020 at 11:24

Это Гэтсби, и в настоящее время это невозможно, потому что вы не можете передавать переменные в запросы, следующие за этой проблемой GH. https://github.com/gatsbyjs/gatsby/issues/10482

Предположив, что передача переменных возможна, я бы сделал все символы как запрос страницы, который позволил бы мне реструктурировать имя из реквизита, а затем статический запрос, которому я бы передал имя как фильтр.

1 Peeper Aug 31 2020 at 11:56

Я использовал это решение и немного адаптировал его для своих нужд: Переменные в запросах 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