使用 GraphQL 映射 Gatsby 画廊图像

Question

我试图弄清楚如何使用 graphql 查询将图库图像映射到 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必须是对象图像数组。假设您的查询按预期工作并检索正确的数据，您需要安装有效的对象数组以作为 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 }) => {&nbsp; const {id, galleryImage} = data.home&nbsp; console.log('data is', data)&nbsp;&nbsp;&nbsp; const images = [];&nbsp; galleryImage.forEach(image=>{&nbsp; &nbsp; let yourImageObject={};&nbsp;&nbsp;&nbsp; &nbsp; yourImageObject.original=image.formats.large.childImageSharp.fluid;&nbsp;&nbsp;&nbsp; &nbsp; images.push(yourImageObject);&nbsp; });&nbsp;&nbsp;return (&nbsp; &nbsp; <Layout>&nbsp; &nbsp; <section className="template">&nbsp; &nbsp; <ImageGallery items={images} />;&nbsp; &nbsp; </section>&nbsp; &nbsp; </Layout>&nbsp; &nbsp; )}export const query = graphql`&nbsp; query GetSingleHome($slug: String) {&nbsp; &nbsp; home: strapiHomes(slug: { eq: $slug }) {&nbsp; &nbsp; galleryImage {&nbsp; &nbsp; &nbsp; formats {&nbsp; &nbsp; &nbsp; &nbsp; large {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; childImageSharp {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fluid {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...GatsbyImageSharpFluid&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; small {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; childImageSharp {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fluid {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...GatsbyImageSharpFluid&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; MainImage {&nbsp; &nbsp; &nbsp; childImageSharp {&nbsp; &nbsp; &nbsp; &nbsp; fluid {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...GatsbyImageSharpFluid&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }`export default ComponentName您可以简化代码，但我将其拆分以使其更具可读性和理解性。您需要循环遍历每个图像并为组件创建必需的数据ImageGallery：一个对象数组，original其中包含一个属性，...GatsbyImageSharpFluid其中包含片段。如果此包无法与 Gatsby 图像一起使用，您可能需要稍微更改一下 GraphQL 查询和代码以适应它。我不知道该依赖项的需求，但thumbnail如果需要，您也可以使用相同的方法添加该属性，添加：&nbsp; &nbsp; yourImageObject.thumbnail=image.formats.small.childImageSharp.fluid;