Comment puis-je utiliser un champ comme filtre à partir d'une requête graphql pour obtenir une image fluide dans une requête distincte?

Aug 16 2020

J'ai deux sources graphql, une pour les images fluides et une pour les caractères d'une base de données mongo. Je mappe les caractères sur la page et j'ai besoin d'utiliser les noms de caractères (le champ de nom dans "allMongodbMobileLegendsdevChamps") comme filtre (en utilisant éventuellement le filtre originalName) pour trouver l'img fluide. J'ai donc quelque chose comme ça

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

Si je n'utilisais pas graphql, je définirais simplement le src dans l'image sur "champ.name" comme ceci :

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

Comment puis-je filtrer ma requête d'image avec le champ.name ? Dois-je utiliser Apollo pour quelque chose comme ça ?

Réponses

3 Saihaj Aug 27 2020 at 11:24

C'est Gatsby et actuellement ce n'est pas possible car vous ne pouvez pas transmettre de variables aux requêtes suite à ce problème GHhttps://github.com/gatsbyjs/gatsby/issues/10482

En supposant que le passage de variables était possible, je ferais de tous les caractères une requête de page qui me permettrait de restructurer le nom à partir des accessoires, puis une requête statique à laquelle je passerais le nom en tant que filtre.

1 Peeper Aug 31 2020 at 11:56

J'ai utilisé cette solution et l'ai légèrement adaptée à mes besoins : Variables dans les requêtes graphQL

Dans un composant parent, je mappe tous les champions et crée un composant enfant pour chacun, et je lui transmets le nom du champion.

Dans le composant enfant, j'ai une variable, nom, qui stocke le nœud correct pour l'image que je veux afficher en utilisant la méthode de recherche pour faire correspondre le nom des champions aux images relativePath (les images ont le même nom exact que le champion) . J'appelle ensuite la fonction renderImage qui consomme la variable "name" et trouve l'image fluide dans node.childImageSharp.fluid, et crée mon composant image avec l'emplacement correct de l'image fluide.

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