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


javascript jsx gatsby graphql
person Peeper    schedule 16.08.2020    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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

person Saihaj    schedule 27.08.2020
comment
Спасибо за ответ. Есть ли другой способ добиться этого без использования переменных запроса? - person Peeper; 27.08.2020
comment
Я также пытаюсь решить аналогичную проблему (Показать заголовок следующей страницы) но пока не повезло - person Saihaj; 27.08.2020
comment
Вы можете попробовать пошлый способ. Сделайте свой компонент изображения дочерним компонентом, которому вы передаете имя и интерполируете строку запроса вручную, а затем попробуйте передать это, возможно. Не уверен, сработает это или нет. - person Saihaj; 27.08.2020
comment
это ответ, который я опубликовал, что вы имели в виду под интерполяцией строки? - person Peeper; 02.09.2020
comment
Нет, я предлагал подобное github.com/gatsbyjs/gatsby/issues/2293 # issue-261880533 (и это не сработает), но ваш способ на самом деле считается лучше github.com/gatsbyjs/gatsby/issues/10482#issuecomment-494589454 - person Saihaj; 03.09.2020

arrow_upward
1
arrow_downward

Я использовал это решение и немного адаптировал его для своих нужд: Переменные в запросах graphQL

В родительском компоненте я сопоставляю всех чемпионов и создаю для каждого дочерний компонент и передаю ему имя чемпионов.

В дочернем компоненте у меня есть переменная name, в которой хранится правильный узел для изображения, которое я хочу отобразить, используя метод find, чтобы сопоставить имя чемпионов с изображениями relativePath (изображения имеют то же точное имя, что и чемпион) . Затем я вызываю функцию renderImage, которая использует имя переменной, находит жидкое изображение в 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

person Peeper    schedule 31.08.2020
comment
Чтобы повысить производительность, вы можете запомнить это, как это делается в github.com/gatsbyjs/gatsby/ issues / 10482 # issuecomment-485349612 - person Saihaj; 03.09.2020