重构 Gatsby 图像查询

Posted 2023-03-08

【中文标题】重构 Gatsby 图像查询

【英文标题】：Refactor Gatsby Image Query

【发布时间】：2019-11-26 11:11:46

【问题描述】：

我目前在我的 IndexPage 组件中使用 Gatsby 和 gatsby-image。我希望将以下代码重构为单个 React 组件，因为存在不必要的重复：

          ...
          return (
          <div>
            <h1>Startups</h1>
            <p>Copy</p>
            <Img fluid=props.data.imageOne.childImageSharp.fluid/>
          </div>
          <div>
            <h1>People</h1>
            <p>Copy</p>
            <Img fluid=props.data.imageTwo.childImageSharp.fluid/>
          </div>
          <div>
            <h1>Data</h1>
            <p>Copy</p>
            <Img fluid=props.data.imageThree.childImageSharp.fluid/>
          </div>
        </div>
        )

export const fluidImage = graphql`
fragment fluidImage on File 
  childImageSharp 
    fluid(maxWidth: 1000) 
      ...GatsbyImageSharpFluid
    
  

`

export const pageQuery = graphql`
  query 
    imageOne: file(relativePath:  eq: "igemA.png" ) 
      ...fluidImage
    
    imageTwo: file(relativePath:  eq: "inephemeraA.png" ) 
      ...fluidImage
    
    imageThree: file(relativePath:  eq: "polypA.png" ) 
      ...fluidImage
    
  

类似于这样的：

const NewComponent = (props) => (
          <div>
            <h1>props.heading</h1>
            <p>props.body</p>
            <Img fluid=props.data.[props.image].childImageSharp.fluid/>
          </div>

)

如何更改 graphql 查询，以便我可以根据传递给 NewComponent 的道具渲染图像？

【问题讨论】：

与您现在修改查询的方式相同吗？ developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

【参考方案1】：

除非我有误解，否则我认为您无需更改查询即可完成此操作。只需将每个查询的结果作为道具传递给您的子组件。

// components/newComponent.js

import React from "react"
import Img from "gatsby-image"

const NewComponent = ( image, heading, body ) => (
  <>
    <h1> heading </h1>
    <p> body </p>
    <Img fluid= image.childImageSharp.fluid  />
  </>
)

export default NewComponent

---

// index.js

import React from "react"
import graphql from "gatsby"

import NewComponent from "../components/newComponent"

const IndexPage = ( data ) => 
  const  imageOne, imageTwo  = data
  return (
  <>
    <NewComponent image= imageOne  heading="heading 1" body="body 1" />
    <NewComponent image= imageTwo  heading="heading 1" body="body 2" />
  </>
)

export default IndexPage

export const fluidImage = graphql`
fragment fluidImage on File 
  childImageSharp 
    fluid(maxWidth: 1000) 
      ...GatsbyImageSharpFluid
    
  

`

export const pageQuery = graphql`
  query 
    imageOne: file(relativePath:  eq: "gatsby-astronaut.png" ) 
      ...fluidImage
    
    imageTwo: file(relativePath:  eq: "gatsby-icon.png" ) 
      ...fluidImage
    
  
`

这是一个CodeSandbox 来测试上述内容。

【参考方案2】：

您可以像这样将变量传递给 GraphQL 查询：

export const pageQuery = graphql`
  query image($src: String!) file(relativePath:  eq: $src ) 
      ...fluidImage
    `

这是一个如何Pass Variable的示例