ฉันจะใช้เขตข้อมูลเป็นตัวกรองจากแบบสอบถาม graphql หนึ่งเพื่อให้ได้ภาพที่ลื่นไหลในแบบสอบถามแยกกันได้อย่างไร

Aug 16 2020

ฉันมีแหล่งที่มาของ 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 ในรูปภาพเป็น "champ.name" ดังนี้:

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

ฉันจะกรองคำค้นหารูปภาพของฉันด้วย champ.name ได้อย่างไร? ฉันควรใช้ Apollo สำหรับสิ่งนี้หรือไม่?

คำตอบ

3 Saihaj Aug 27 2020 at 11:24

นี่คือ Gatsby และในปัจจุบันเป็นไปไม่ได้เนื่องจากคุณไม่สามารถส่งผ่านตัวแปรไปยังคำค้นหาที่เป็นไปตามปัญหา GH นี้ https://github.com/gatsbyjs/gatsby/issues/10482

สมมติว่าการส่งผ่านตัวแปรเป็นไปได้ฉันจะทำให้ตัวอักษรทั้งหมดเป็นคิวรีของหน้าซึ่งจะช่วยให้ฉันสามารถปรับโครงสร้างชื่อจากอุปกรณ์ประกอบฉากจากนั้นแบบสอบถามแบบคงที่ซึ่งฉันจะส่งในชื่อเป็นตัวกรอง

1 Peeper Aug 31 2020 at 11:56

ฉันใช้โซลูชันนี้และปรับให้เข้ากับความต้องการของฉันเล็กน้อย: ตัวแปรในการสืบค้น graphQL

ในองค์ประกอบหลักฉันแมปแชมป์เปี้ยนทั้งหมดและสร้างองค์ประกอบลูกสำหรับแต่ละตัวและส่งต่อชื่อแชมป์เปี้ยน

ในคอมโพเนนต์ลูกฉันมีตัวแปรชื่อที่เก็บโหนดที่ถูกต้องสำหรับรูปภาพที่ฉันต้องการแสดงโดยใช้วิธีการค้นหาเพื่อจับคู่ชื่อแชมเปี้ยนกับรูปภาพที่สัมพันธ์กับพา ธ (รูปภาพมีชื่อตรงกับแชมเปี้ยน) . จากนั้นฉันเรียกใช้ฟังก์ชัน renderImage ซึ่งใช้ตัวแปร "name" และค้นหาภาพของไหลใน 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