Làm cách nào để sử dụng một trường làm bộ lọc từ một truy vấn graphql để có được hình ảnh linh hoạt trong một truy vấn riêng biệt?

Aug 16 2020

Tôi có hai nguồn graphql, một cho hình ảnh linh hoạt và một cho các ký tự trong cơ sở dữ liệu mongo. Tôi đang ánh xạ các ký tự vào trang và tôi cần sử dụng tên ký tự (trường tên trong "allMongodbMobileLeosystemdevChamps") làm bộ lọc (có thể sử dụng bộ lọc originalName) để tìm img linh hoạt. Vì vậy, tôi có một cái gì đó như thế này

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

Nếu tôi không sử dụng graphql, tôi chỉ cần đặt src trong hình ảnh thành "champ.name" như sau:

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

Làm cách nào để lọc truy vấn hình ảnh của tôi với champ.name? Tôi có nên sử dụng Apollo cho những thứ như thế này không?

Trả lời

3 Saihaj Aug 27 2020 at 11:24

Đây là Gatsby và hiện không thể thực hiện được vì bạn không thể chuyển các biến vào các truy vấn theo vấn đề GH này https://github.com/gatsbyjs/gatsby/issues/10482

Giả sử rằng việc chuyển các biến là có thể, tôi sẽ đặt tất cả các ký tự dưới dạng một truy vấn trang cho phép tôi cấu trúc lại tên từ các đạo cụ và sau đó là một truy vấn tĩnh mà tôi sẽ chuyển vào tên dưới dạng bộ lọc.

1 Peeper Aug 31 2020 at 11:56

Tôi đã sử dụng giải pháp này và điều chỉnh nó một chút cho nhu cầu của tôi: Các biến trong truy vấn graphQL

Trong thành phần chính, tôi lập bản đồ tất cả các nhà vô địch và tạo một thành phần con cho mỗi thành phần đó, và chuyển cho nó tên nhà vô địch.

Trong thành phần con, tôi có một biến, tên, lưu trữ nút chính xác cho hình ảnh mà tôi muốn hiển thị bằng cách sử dụng phương pháp tìm để khớp tên nhà vô địch với hình ảnh tương đối Đường dẫn (hình ảnh có cùng tên chính xác với nhà vô địch) . Sau đó, tôi gọi hàm renderImage sử dụng biến "name" và tìm hình ảnh linh hoạt trong node.childImageSharp.fluid và tạo thành phần hình ảnh của tôi với vị trí hình ảnh linh hoạt chính xác.

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