CODEWITHSUNDEEP
graphqlgatsbygraphql-jsgatsby-image
Matthias Güntert
Matthias Güntert

Reputation: 4668

How to access a specific element out of an array without iterating?

I have got the following folder structure

/images
/images/pic1.jpg
/images/pic2.jpg

When using the following GraphQL query.. 

query MyQuery1 {
  file(sourceInstanceName: {eq: "images"}, name: {eq: "pic1"}) {
    name
    publicURL
  }
}

The result can be accessed by using something like <img src={data.file.publicUrl} alt="" />. So far so good.

But now I would like to retrieve multiple images from that folder with a single query. So I came up with the following:

query {
  allFile(
    filter: {
      sourceInstanceName: { eq: "images" }
      name: { in: ["pic1", "pic2"] }
    }
  ) {
    nodes {
      name
      publicURL
    }
  }
}

Great! But how I can now access one of those images without having to use map or iterate over the result?

I am looking for something like this, which of course doesn't work:

<img src={data.file.publicUrl name.eq="pic1"} alt="pic1"/>

Nor does somthing like this:

<img src={data.allFile.nodes.0.publicUrl} alt="pic1" />

I would like to use gatsby-image to optimize and resize my images. That's why I choose the GraphQL way over a direct import. Am I on the wrong track?

Upvotes: 2

Views: 469

Answers (2)

EliteRaceElephant
EliteRaceElephant

Reputation: 8162

OP answered their own question but here is another way: Use Array.prototype.filter

const Index = (props) => {
  const { data: { allFile: { edges } } } = props;

  const heroImage = edges.filter
    (el => el.node.childImageSharp.fluid.originalName === "heroImage.png")
      [0].node.childImageSharp.fluid;
  // ...
}

export const query = graphql`
{
  allFile(filter: {
    extension: {eq: "png"},
    sourceInstanceName: {eq: "images"}},
    sort: {fields: [childImageSharp___fluid___originalName], order: ASC})
  {
    edges {
      node {
      childImageSharp {
          fluid(maxWidth: 300, quality: 50) {
            originalName
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}
`;

Upvotes: 1

Matthias G&#252;ntert
Matthias G&#252;ntert

Reputation: 4668

I figured it out by myself. I wasn't aware that one can chain things together. This worked for me. 

query {
  imageOne: file(sourceInstanceName: {eq: "images"}, relativePath: {eq: "pic1.jpg"}) {
    id
    childImageSharp {
      fixed(width: 30) {
        base64
        tracedSVG
        aspectRatio
        width
        height
        src
        srcSet
        srcWebp
        srcSetWebp
        originalName
      }
    }
  }
  imageTwo: file(sourceInstanceName: {eq: "images"}, relativePath: {eq: "pic2.jpg"}) {
    id
    childImageSharp {
      fixed(width: 30) {
        base64
        tracedSVG
        aspectRatio
        width
        height
        src
        srcSet
        srcWebp
        srcSetWebp
        originalName
      }
    }
  }
}

And then later access it like so: 

<Img fixed={data.imageOne.childImageSharp.fixed} alt="" />

and 

<Img fixed={data.imageTwo.childImageSharp.fixed} alt="" />

P.S: This is the relvant part within gatsby-config.js

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`, <<== gets filtered by sourceInstanceName: ..
    path: `${__dirname}/src/images/`,
  },
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,

Upvotes: 2

Related Questions