使用 GraphQL 映射 Gatsby 畫廊圖像

Question

我試圖弄清楚如何使用 graphql 查詢將 map 畫廊圖像放入 Gatsby 中的燈箱組件。 我想我需要將images = to the childimage sharp array ，但我不確定如何構造它，不斷收到undefined的錯誤。 任何指針將不勝感激。 讓我知道是否需要更多信息。

import React from "react"
import { graphql, Link } from "gatsby"
import Image from "gatsby-image"
import ImageGallery from 'react-image-gallery';

const ComponentName = ({ data }) => {
  const {id, galleryImage} = data.home
  console.log('data is', data)
  
  const images = [];

return (
    <Layout>
    <section className="template">
    <ImageGallery items={images} />;
    </section>
    </Layout>
    
)
}

export const query = graphql`
  query GetSingleHome($slug: String) {
    home: strapiHomes(slug: { eq: $slug }) {
    galleryImage {
      formats {
        large {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
            id
          }
        }
        small {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
            id
          }
        }
      }
    }
    MainImage {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    }
  }
`

export default ComponentName

這是畫廊組件，以防萬一

Answer 1

根據文檔， images prop應該是一個圖像數組，因此應用於您的用例， images必須是一個 object 圖像數組。

假設您的查詢按預期工作並檢索正確的數據，您需要安裝一個有效的對象數組以作為 images prop傳遞。

import React from "react"
import { graphql, Link } from "gatsby"
import Image from "gatsby-image"
import ImageGallery from 'react-image-gallery';

const ComponentName = ({ data }) => {
  const {id, galleryImage} = data.home
  console.log('data is', data)
  
  const images = [];

  galleryImage.forEach(image=>{
    let yourImageObject={};
  
    yourImageObject.original=image.formats.large.childImageSharp.fluid;
  
    images.push(yourImageObject);
  });
  

return (
    <Layout>
    <section className="template">
    <ImageGallery items={images} />;
    </section>
    </Layout>
    )
}

export const query = graphql`
  query GetSingleHome($slug: String) {
    home: strapiHomes(slug: { eq: $slug }) {
    galleryImage {
      formats {
        large {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
            id
          }
        }
        small {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
            id
          }
        }
      }
    }
    MainImage {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    }
  }
`

export default ComponentName

您可以簡化代碼，但我將其拆分以使其更具可讀性和可理解性。 您需要遍歷每個圖像並為ImageGallery組件創建必需的數據：內部具有original屬性的對象數組，內部具有...GatsbyImageSharpFluid片段。

如果此 package 不適用於 Gatsby 圖像，您可能需要稍作更改以及 GraphQL 查詢和代碼以適應它。

我不知道該依賴項的需求，但如果需要，您也可以使用相同的方法添加thumbnail屬性，添加：

    yourImageObject.thumbnail=image.formats.small.childImageSharp.fluid;