Javascript 使用GraphQL映射盖茨比图库图像

我试图弄清楚如何使用graphql查询将gallery图像映射到Gatsby中的lightbox组件中。我想我需要将

images=设置为childimage sharp数组

，但我不确定如何构造它，不断出现

未定义的

错误。任何指点都将不胜感激。如果需要更多信息，请告诉我

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

从“React”导入React
从“盖茨比”导入{graphql，Link}
从“盖茨比图像”导入图像
从“react image gallery”导入ImageGallery；
常量组件名称=（{data}）=>{
const{id，galleryImage}=data.home
console.log（'data is'，data）
常量图像=[]；
返回(
;
)
}
export const query=graphql`
查询GetSingleHome（$slug:String）{
home:strapiHomes（slug:{eq:$slug}）{
美术馆{
格式{
大的{
childImageSharp{
流质{
…盖茨比磁流体
}
身份证件
}
}
小的{
childImageSharp{
流质{
…盖茨比磁流体
}
身份证件
}
}
}
}
主图像{
childImageSharp{
流质{
…盖茨比磁流体
}
}
}
}
}
`
导出默认组件名

---

根据文档，

图像

道具应该是一个图像数组，因此应用于您的用例，

图像

必须是一个对象图像数组

假设您的查询按预期工作并检索正确的数据，则需要装载一个有效的对象数组以作为图像

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

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