Bagaimana cara menggunakan bidang sebagai filter dari satu kueri graphql untuk mendapatkan gambar cairan yang ada dalam kueri terpisah?

Aug 16 2020

Saya memiliki dua sumber graphql, satu untuk gambar yang mengalir dan satu untuk karakter dalam database mongo. Saya memetakan karakter ke halaman dan saya perlu menggunakan nama karakter (kolom nama di "allMongodbMobileLegendsdevChamps") sebagai filter (mungkin menggunakan filter originalName) untuk menemukan img cairan. Jadi saya punya sesuatu seperti ini

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

Jika saya tidak menggunakan graphql, saya hanya akan mengatur src pada gambar menjadi "champ.name" seperti ini:

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

Bagaimana cara memfilter kueri gambar saya dengan nama juara? Haruskah saya menggunakan Apollo untuk hal seperti ini?

Jawaban

3 Saihaj Aug 27 2020 at 11:24

Ini adalah Gatsby dan saat ini tidak mungkin karena Anda tidak dapat meneruskan variabel ke kueri yang mengikuti masalah GH ini https://github.com/gatsbyjs/gatsby/issues/10482

Andaikan variabel yang lewat dimungkinkan, saya akan menjadikan semua karakter sebagai kueri halaman yang akan memungkinkan saya untuk merestrukturisasi nama dari props dan kemudian kueri statis yang akan saya berikan dalam nama sebagai filter.

1 Peeper Aug 31 2020 at 11:56

Saya menggunakan solusi ini dan sedikit menyesuaikannya untuk kebutuhan saya: Variabel dalam kueri graphQL

Dalam komponen induk, saya memetakan semua juara dan membuat komponen anak untuk masing-masing juara, dan memberikannya nama juara.

Di komponen anak, saya memiliki variabel, name, yang menyimpan node yang benar untuk gambar yang ingin saya tampilkan dengan menggunakan metode find untuk mencocokkan nama champion dengan gambar relativePath (gambar memiliki nama yang sama persis dengan champion) . Saya kemudian memanggil fungsi renderImage yang menggunakan variabel "nama" dan menemukan gambar fluida di node.childImageSharp.fluid, dan membuat komponen gambar saya dengan lokasi gambar fluida yang benar.

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