Gatsby: [Question] Query images with multiple resolutions using gatsby-image

[Lc0rE]

Description

I'm currently working on a static website which includes, on the same page, both a <Carousel /> and a <ImageGallery /> component.
While the images in the <ImageGallery /> needs a 200x200 resolution, the images in the <Carousel /> component needs a maxHeight of 400px.

In my index.js I'm retrieving all the images with the query:

  query ImagesQuery {
    allFile {
      edges {
        node {
          sourceInstanceName
          childImageSharp {
            resolutions(width: 200, height: 200) {
              ...GatsbyImageSharpResolutions_tracedSVG
            }
          }
        }
      }
    }
  }

I have multiple entries in my gatsby-config.js to retrieve images from different folders:

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `img-homepage`,
        path: `${__dirname}/data/homepage/`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `img-carousel`,
        path: `${__dirname}/data/carousel/`
      }
    }

In my component page, I'm filtering the data by sourceInstanceName and I'm passing the retrieved data to my Carousel component (I'm using reactstrap for this project):

          const data = this.props.data;

          <Carousel data={data} />

          {data.allFile.edges.map((img, index) => {
            if (img.node.sourceInstanceName === 'img-homepage')
              return (
                <Img
                  key={index}
                  resolutions={img.node.childImageSharp.resolutions}
                />
              );
          })}

This is fetching all the images with a 200x200 resolution and, while this is working perfectly for the <ImageGallery /> component, it's not ideal for the other component.

How can I use another query to retrieve images with another resolution for the <Carousel /> component and pass it to the data props in <Carousel data={this.props.data} />?

[pieh]

You can use aliasing:

 query ImagesQuery {
    allFile {
      edges {
        node {
          sourceInstanceName
          childImageSharp {
            name1:resolutions(width: 200, height: 200) {
              ...GatsbyImageSharpResolutions_tracedSVG
            }
            name2:resolutions(width: 500, height: 500) {
              ...GatsbyImageSharpResolutions_tracedSVG
            }
            name3:resolutions(width: 100, height: 100) {
              ...GatsbyImageSharpResolutions_tracedSVG
            }
          }
        }
      }
    }
  }

and your data will be available under name1, name2, name3 fields

[Lc0rE]

Thanks for the great and useful answer.
Even if this is solving my problem, I noticed it is generating now a new version of the image for all the images in my folder.
I have < 10 images to manage with the Carousel and > 200 in the gallery. This approach is generating 2 versions for 200 + 10 images.
Is there a way to add another query to the component to separate the two things?

[Lc0rE]

The feeling when you find the answer, avoiding an humiliation from an expert developer :)

<HomePageCarousel data={data.imgCarousel} /> // entry point for the carousel with the filtered data
<div>
    {data.imgAll.edges.map((img, index) => {
        if (img.node.sourceInstanceName === 'img-all')
          return (
            <Img
              key={index}
              resolutions={img.node.childImageSharp.resolutions}
            />
          );
      })}
</div>

// [...]

export const query = graphql`
  query ImagesQuery {
    imgAll: allFile(filter: { sourceInstanceName: { eq: "img-all" } }) {
      edges {
        node {
          sourceInstanceName
          childImageSharp {
            resolutions(width: 200, height: 200) {
              ...GatsbyImageSharpResolutions_tracedSVG
            }
          }
        }
      }
    }
    imgCarousel: allFile(
      filter: { sourceInstanceName: { eq: "img-carousel" } }
    ) {
      edges {
        node {
          sourceInstanceName
          childImageSharp {
            sizes(maxHeight: 400) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
  }
`;

I think this should be closed.