How to load image in Gatsby GraphQL query

Question

I have small SQLite database with products, that have relative paths to images. I'd like to include these images to my page. I'm trying to use this query:

query {
  allContent {
    nodes {
      Category
      Description
      Price
      ProductID
      Title
      ImageURI {
        childImageSharp {
          gatsbyImageData(width: 200)
        }
      }
    }
  }
}

But I have this error:

      Field "ImageURI" must not have a selection since type "String" has no subfields.

      This can happen if you e.g. accidentally added { } to the field "ImageURI". If you didn't expect "ImageURI" to be of type "String" make sure that your input source and/or plugin
 is correct.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query in GraphiQL and use the GraphiQL explorer to see which fields
you can query and what shape they have.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned
      "dummy content". Visit our docs to learn how you can define the schema for "undefined":
      https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization#creating-type-definitions

As I understand, I should convert String to File in my query. Is it right? If yes, how to do that?

Full code & repo to reproduce: https://github.com/vladd11/gatsby-test/blob/master/src/pages/index.js

Answer 1

Just query allFiles outside of allContent nodes. Like:

allFile {
    edges {
      node {
        relativePath
        childImageSharp {
          gatsbyImageData(width: 200)
        }
      }
    }
}

Don't forget to add new source of data to Gatsby Config:

{
    resolve: "gatsby-source-filesystem",
    options: {
        path: `${__dirname}/static`, // Directory with your images
        name: "images",
    },
}

Find image in this directory using relative path, then load image dynamically:

getImage(data.allFile.edges.find(value => value.node.relativePath === product.ImageURI).node)

Use GatsbyImage to show this image:

<GatsbyImage alt={product.Title} image={Image}/>