Importing images to GraphQL via gatsby-node is not working: childImageSharp is missing

Question

I'm trying to load images from a JSON file into GraphQL using Gatsby Node and the Sharp transformer pipeline. The content nodes get created, but the childImageSharp and gatsbyImageData attributes are missing, which leads me to believe that there is something wrong with my setup.

I create a minimal example on Github to make the problem reproducible: https://github.com/stekhn/gatsby-image-sourcing

Project structure

src
├── data
│   └── projects.json
├── images
│   └── projects
│       ├── adam-vradenburg-sWAAhaoVuko-unsplash.jpg
│       ├── radek-homola-RfTD9NoLMEE-unsplash.jpg
│       ├── steven-kamenar-MMJx78V7xS8-unsplash.jpg
│       ├── will-tarpey-82pi_nJbE5M-unsplash.jpg
│       └── wolfgang-hasselmann-ZM4IxIcF9AU-unsplash.jpg
└── pages
    ├── 404.js
    └── index.js

package.json

{
  "name": "gatsby-image-sourcing",
  "dependencies": {
    "gatsby": "^3.3.1",
    "gatsby-plugin-image": "^1.3.1",
    "gatsby-plugin-sharp": "^3.3.1",
    "gatsby-source-filesystem": "^3.3.0",
    "gatsby-transformer-sharp": "^3.3.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "Gatsby Image Sourcing",
  },
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/projects/`,
      },
    },
  ],
};

gatsby-node.js:

const path = require("path");
const projects = require("./src/data/projects.json");

// Reference: https://stackoverflow.com/a/56012718
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
  projects.forEach((project) => {
    const { title, year, tags, image } = project;
    const { name, ext } = path.parse(image);

    const absolutePath = path.resolve(
      __dirname,
      "src/images/projects",
      image
    );

    const imageData = {
      name,
      ext,
      absolutePath,
      extension: ext.substring(1),
    };

    console.log(imageData);
  
    const imageNode = {
      ...imageData,
      id: createNodeId(`project-card-image-${name}`),
      internal: {
        type: "projectCardsImage",
        contentDigest: createContentDigest(imageData),
      },
    };

    actions.createNode(imageNode);

    const node = {
      title,
      year,
      tags,
      image: imageNode,
      id: createNodeId(`project-card-${title}`),
      internal: {
        type: "projectCards",
        contentDigest: createContentDigest(project),
      },
    };

    actions.createNode(node);
  });
};

projects.json

[
  {
    "title": "Project 1",
    "year": "2021",
    "tags": ["foo", "bar"],
    "image": "adam-vradenburg-sWAAhaoVuko-unsplash.jpg"
  }
]

The image paths seem fine and gatsby-node.js is running without problems. Yet when I inspect the projectCards and projectCardsImage in the GraphiQL explorer, it seem like the Gatsby Transformer Sharp never ran. Normally, I would expect to see the attribute childImageSharp to be part of image.

I'm well aware that there are other way of loading and using images, which work fine. But right now, I'm kind of married to the idea of using Gatsby Node to populate the GraphQL database with exactly the kind of objects, I need in my components.

References

• How to load a local image on a gatsby source plugin?
• https://freddydumont.com/blog/how-to-source-images-and-data-from-json-files-in-gatsby

Any help is much appreciated.

Answer 1

Hello I have the same problem, I followed the exact tutorials last year this was working in v2. FYI I've opened an issue on gatsby https://github.com/gatsbyjs/gatsby/issues/31380

Answer 2

I believe the path for images should be:

"image": "../images/projects/adam-vradenburg-sWAAhaoVuko-unsplash.jpg"

With the current configuration Gatsby is generating an id based on the string, not on the GraphQL node you are generating in the sourceNodes function, which looks good to me.