Come posso utilizzare un campo come filtro da una query graphql per ottenere un'immagine fluida che si trova in una query separata?

Aug 16 2020

Ho due sorgenti graphql, una per le immagini fluide e una per i caratteri in un database mongo. Sto mappando i caratteri sulla pagina e ho bisogno di usare i nomi dei personaggi (il campo del nome in "allMongodbMobileLegendsdevChamps") come filtro (utilizzando possibilmente il filtro originalName) per trovare il fluido img. Quindi ho qualcosa del genere

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>
  )
}

Se non stavo usando graphql, avrei semplicemente impostato src nell'immagine su "champ.name" in questo modo:

<Image src = `/path/to/img/${champ.name}.jpg` />

Come posso filtrare la mia query di immagini con champ.name? Dovrei usare Apollo per qualcosa di simile?

Risposte

3 Saihaj Aug 27 2020 at 11:24

Questo è Gatsby e attualmente non è possibile perché non puoi passare variabili alle query seguendo questo problema di GHhttps://github.com/gatsbyjs/gatsby/issues/10482

Supponendo che il passaggio di variabili fosse possibile, creerei tutti i caratteri come una query di pagina che mi consentirà di ristrutturare il nome da oggetti di scena e quindi una query statica a cui passerei il nome come filtro.

1 Peeper Aug 31 2020 at 11:56

Ho usato questa soluzione e l'ho adattata leggermente alle mie esigenze: Variabili nelle query graphQL

In un componente padre mappo tutti i campioni e creo un componente figlio per ognuno, passandogli il nome dei campioni.

Nel componente figlio, ho una variabile, name, che memorizza il nodo corretto per l'immagine che voglio visualizzare utilizzando il metodo find per abbinare il nome dei campioni alle immagini relativePath (le immagini hanno lo stesso nome esatto del campione) . Quindi chiamo la funzione renderImage che utilizza la variabile "name" e trova l'immagine fluida in node.childImageSharp.fluid e crea il mio componente immagine con la corretta posizione dell'immagine fluida.

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