Local images: Editing gatsby schema to convert a local path to a file

Question

I'm using gatsby and I need to display multiple images for a given entity. Image paths are stored on a MySQL table and I'm fetching them just fine.

My query looks like this:

{
  mysqlSet(entity_id: {eq: "10270"}) {
    name
    images {
      url
    }
  }
}

Which gives me a result like this:

{
  "data": {
    "mysqlSet": {
      "name": "My Entity Name",
      "images": [
        {
          "url": "./images/10270-0.png"
        },
        {
          "url": "./images/10270-1.png"
        },
        {
          "url": "./images/10270-2.png"
        }
      ]
    }
  }
}

So, the question is: How do I modify my schema to reflect that those fields are actually images? I mean, that's the path I'm following but I can't figure out how to do it.

Basically, I need to grab the images as files to use them with gatsby's built-in Img component.

Answer 1

You can query using allFile and filter with the desired extension like:

 {
      allFile(filter: {ext: {eq: ".png"}}) {
        edges {
          node {
            absolutePath
          }
        }
      }
    }