CODEWITHSUNDEEP
reactjsgraphqlgatsbynetlifygatsby-image
Sam
Sam

Reputation: 2331

gatsby & graphql : filtering for a specific single image

I don't really understand graphql or gatsby that well but I believe all my images are loaded into graphql by putting this in my gatsby-config.js

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src/assets/images`),
      },
    },

I am then trying to query a specific image which I can do with 

    query MyQuery {
      allImageSharp(filter: {id: {eq: "7acfccd5-4aef-532b-8889-9d844ae2068b"}}) {
        edges {
          node {
            sizes {
              sizes
              srcSet
              src
              aspectRatio
            }
            id
          }
        }
      }
    }

And this returns what I want, but the id that I have to enter for this query is 7acfccd5-4aef-532b-8889-9d844ae2068b. Is this id even going to stay the same if I put it in my code? Is there a way to set the id to something more sensical?

If I save my query to a variable data, it turns out that on Netlify data.allImageSharp.edges[0] is null, while locally this value will return what I need

I'm looking for the best way to query a single image. Not multiple images. If I could set my own id's then I could query these.

Update

I found an example in the gatsby-source-filesystem documentation, but don't really know how to add it to my code

Upvotes: 3

Views: 1560

Answers (2)

Sam
Sam

Reputation: 2331

If you have an image with a path of src/images/exampleImage.jpg, you can query by the images name by querying using file rather than allImageSharp. 

query HeaderQuery {
  exampleImage: file(
    extension: {eq: "jpg"},
    name: {eq: "exampleImage"}
  ) {
    childImageSharp {
      fluid {
        src
        srcSet
        sizes
        srcSetWebp
      }
    }
  }
}

You can also replace {extension: {eq: "jpg"} with {extension: {regex: "/(jpg)|(jpeg)|(png)/"} to query files of any extension type.

Upvotes: 1

Ferran Buireu
Ferran Buireu

Reputation: 29320

With this snippet:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: path.join(__dirname, `src/assets/images`),
  },
},

Basically you are telling your GraphQL schema that will find images in src/assets/images folder so you will be able to query all the content inside this folder via GraphQL. You are specifying the source for your data.

From gatsby-source-filesystem documentation:

The plugin creates File nodes from files. The various “transformer” plugins can transform File nodes into various other types of data e.g. gatsby-transformer-json transforms JSON files into JSON data nodes and gatsby-transformer-remark transforms markdown files into MarkdownRemark nodes from which you can query an HTML representation of the markdown.

Answering your question, of course, you can filter and sort for any property or node that your image has, such as name, path, extension, etc. You may find a useful and autocompletion tool for your queries under /___graphql path when you run a gatsby develop command. This will help you to check out what parameters can be queried and filtered.

Upvotes: 1

Related Questions