使用 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;