Ayrı bir sorguda akıcı bir görüntü elde etmek için bir graphql sorgusundan bir filtre olarak bir alanı nasıl kullanabilirim?

Aug 16 2020

İki graphql kaynağım var, biri akışkan görüntüler için ve biri de mongo veritabanındaki karakterler için. Karakterleri sayfaya eşleştiriyorum ve sıvı img'yi bulmak için karakter adlarını ("allMongodbMobileLegendsdevChamps" içindeki ad alanı) filtre olarak (muhtemelen orijinalAdı filtresini kullanarak) kullanmam gerekiyor. Bu yüzden böyle bir şeye sahibim

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 kullanmasaydım, resimdeki src'yi şu şekilde "champ.name" olarak ayarlardım:

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

Resim sorgumu champ.name ile nasıl filtreleyebilirim? Apollo'yu böyle bir şey için kullanmalı mıyım?

Yanıtlar

3 Saihaj Aug 27 2020 at 11:24

Bu Gatsby ve şu anda mümkün değil çünkü bu GH sorununu takip eden sorgulara değişkenleri aktaramazsınız. https://github.com/gatsbyjs/gatsby/issues/10482

Değişken aktarmanın mümkün olduğunu varsayarsak, tüm karakterleri, adı props'tan yeniden yapılandırmama izin verecek bir sayfa sorgusu ve ardından adı filtre olarak geçireceğim statik bir sorgu olarak yapardım.

1 Peeper Aug 31 2020 at 11:56

Bu çözümü kullandım ve ihtiyaçlarıma göre biraz uyarladım: graphQL sorgularındaki değişkenler

Bir ana bileşende, tüm şampiyonları eşlerim ve her biri için bir alt bileşen oluşturur ve ona şampiyonların adını iletirim.

Alt bileşende, şampiyonların adını göreli Yolla eşleştirmek için find yöntemini kullanarak görüntülemek istediğim görüntü için doğru düğümü saklayan bir değişkenim var (görüntüler şampiyonla aynı ada sahip) . Daha sonra "name" değişkenini tüketen ve node.childImageSharp.fluid içindeki akışkan görüntüyü bulan ve görüntü bileşenimi doğru akışkan görüntü konumu ile oluşturan renderImage işlevini çağırıyorum.

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