gatsby & graphql : filtering for a specific single image

Question

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

score 2 · Answer 1 · answered May 18 '20 at 05:03

2

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.

answered May 18 '20 at 05:03

Ferran Buireu

28,630
6
39
67

I've been using `/__graphql` I think the answer is somewhere in the gatsby-source-filesystem-documentation. I currently create nodes for markdown pages in my gatsby-node.js, but I kinda just copied and pasted the code. It looks like they have an example for jpgs, but I don't really understand it. I'm going to add it to my question – Sam May 19 '20 at 01:40
Hey so I'm not quite sure what you meant. The graphql query in my question works locally, but `data.allImagesSharp` returns an empty array when pushed to Netlify. Do you have an example? I got that crazy number `7acfccd5-4aef-532b-8889-9d844ae2068b` from graphql so I don't know how to change it – Sam May 28 '20 at 02:25
Hi again @Sam. It's a bit tricky to work with `gatsby-image`. Usually is "common" to receive an empty array in development in `___graphql` mode but the query can still work. Can you provide the full `gatsby-config.js` file? – Ferran Buireu May 28 '20 at 05:01
K, it's up there – Sam May 28 '20 at 22:07
The `gatsby-node.js` provided in this question misses some configuration found in the other question and answer @Sam: `const { fmImagesToRelative } = require('gatsby-remark-relative-images'); exports.onCreateNode = ({ node }) => { fmImagesToRelative(node); };` for example – Ferran Buireu May 29 '20 at 06:46
Yeah, I ended up removing that because I found that it didn't make a difference. I can add it back in but that part isn't the problem. It has something to do with the query. On the server `allImagesSharp.edges[0]` is null but locally it has what I need – Sam May 29 '20 at 19:05
Added @Sam . Thanks for the feedback! – Ferran Buireu Jul 08 '20 at 05:19

Sam · Accepted Answer · 2020-06-07T00:34:11.267

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.

gatsby & graphql : filtering for a specific single image

2 Answers2

Linked