How do I query multiple images from an array with gatsby-image?

Question

I have a collection of works that are available through a Strapi API endpoint. Each work has an array containing multiple images. I would like to render them using gatsby-image but I don't have any idea how to do it since all available examples on docs are made with single files or static files on the "images" folder.

When trying the GraphiQL explorer I realized the thumbnail image has this value on 'id' key:

"thumbnail": {
          "id": "e:/wamp/www/@flaex_/app/.cache/gatsby-source-filesystem/52e3542d00600c96e52cb584e83c2cae.jpg absPath of file"}

Meaning that the image had been registered on gatsby cache. On the other side the 'id' key on each image of the array show this:

"images": [
          {
            "id": "5d0d7429fe6de132d43a44b4",
            "url": "/uploads/01d8a893fe4c46738b1c99624d22154d.jpg"
          },
          {
            "id": "5d0d7429fe6de132d43a44b3",
            "url": "/uploads/eb399dfadea74b9db39672a1f98575ff.jpg"
          }
        ]

Is there something I'm missing here?

This is the template I'm using:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"
import containerStyles from "../pages/portfolio.module.less"

const WorkTemplate = ({ data }) => (
  <Layout>
    <div className={containerStyles.navsec}>
      <button onClick={() => window.history.back()}>&#60;&#60; back</button>
    </div>
    <article>
      <h1>{data.strapiWork.title}</h1>      
      <Img fluid={data.strapiWork.thumbnail.childImageSharp.fluid} />
      <p>{data.strapiWork.description}</p>
      {console.log(data.strapiWork.images)}      
      <ul className={containerStyles.works}>
          {data.allStrapiWork.images.map(document => (
            <li key={document.id}>              
               <Img fluid={document.image.childImageSharp.fluid} />

            </li>
          ))}
        </ul>       
    </article>
  </Layout>
)

export default WorkTemplate

export const query = graphql`
  query WorkTemplate($id: String!) {
    strapiWork(id: { eq: $id }) {
      id
      title
      description
      images {        
        childImageSharp {
          fluid(maxWidth: 120) {
            ...GatsbyImageSharpFluid
          }
        }       
      }
      thumbnail {
        childImageSharp {
          fluid(maxWidth: 500) {
            ...GatsbyImageSharpFluid
          }
        }
      }      
    }
  }
`

I presume this is not working because 'images' is an array.

The thumbnail image is rendering fine, as it can be seen I tried to replicate the graphQL query used on the thumbnail image but I'm getting this message on the console when running gatsby develop:

error GraphQL Error Encountered 1 error(s): - Unknown field 'childImageSharp' on type '[StrapiWorkImages]'.

I would appreciate any help in this regard. Thank you!

Looking at the error message and the return from the explorer...have you tried <Img fluid={document.fluid}/> — Intellidroid
I tried what you suggested. When I run gastby develop this is the error I'm getting: ` e:\wamp\www\@flaex_\app\src\templates\work.js 38:9 error Cannot query field "childImageSharp" on type "StrapiWorkImages" graphql/template-strings ✖ 1 problem (1 error, 0 warnings) ` This is the line that is causing the error: link — Freddy Polania
In the Graphql playground what is the schema for the image on strapi? Can you log out the data so we can see the structure that is returned? — Intellidroid
childImageSharp is the issue here but I don't know what structure is returned by StrapiWorkImages — Intellidroid
I am also assuming you have installed and configured the gatsby-image plugin? — Intellidroid

Intellidroid Intellidroid · Accepted Answer · 2019-07-08T17:45:44

I looked at the Gatsby repo (on the gatsby-source-strapi plugin) and it seems like it is an open issue at the moment. So it is not something you are doing wrong at all. Not sure if this will help at all? I think for some it hasn't. Image workaround

How do I query multiple images from an array with gatsby-image?

1 Answers