How to use Gatsby plugin image on incremental builds

Question

I am using Gatsby 3.6.1, with Gatsby plugin image. I am fetching images using gatsby-source-apiserver, with the following structure:

[
   {
     "pk": 1,
     "url": "https://location_of_the_image1",
   },
       {
     "pk": 2,
     "url": "https://location_of_the_image2",
   },

]

My Gatsby plugin image is configured as follows (gatsby-config.js):


module.exports = {
  ... 
  ... 

  plugins: [
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        defaults: {
          formats: [`auto`, `webp`, "avif"],
          placeholder: `blurred`,
          quality: 80,
          breakpoints: [769, 1024, 1216, 1408],
          backgroundColor: `transparent`,
          tracedSVGOptions: {},
          blurredOptions: {},
          jpgOptions: {},
          pngOptions: {},
          webpOptions: {},
          avifOptions: {},
        },
      },
    },

  ... 
  ... 
  ]
}

Following Gatsby's example, I have used createRemoteFileNode in gatsby-node.js file for creating optimized versions of the API images:

exports.onCreateNode = async ({
  node,
  actions: { createNode, touchNode },
  store,
  cache,
  createNodeId,
}) => {
  if (node.internal.type === `API__Image`) {
    if (node.pk) {
      let fileNode = await createRemoteFileNode({
        url: node.url, // string that points to the URL of the image
        parentNodeId: node.id, // id of the parent node of the fileNode you are going to create
        createNode, // helper function in gatsby-node to generate the node
        createNodeId: id => `IMG${node.pk}`,
        cache, // Gatsby's cache
        store, // Gatsby's Redux store
      })
      // if the file was created, attach the new node to the parent node
      if (fileNode) {
        node.image___NODE = fileNode.id
      }
    }
  }
}

Now if I run gatsby develop or gatsby build it all works normally and the following GraphQL query:

query MyQuery {
  allApiImage {
    nodes {
      image {
        id
      }
    }
  }
}

Returns the expected result:

{
  "data": {
    "allApiImage": {
      "nodes": [
        {
          "image": {
            "id": "IMG1"
          }
        },
        {
          "image": {
            "id": "IMG2"
          }
        },
      ]
    }
  }
}

Nonetheless if I run gatsby develop or gatsby build again, the following error is thrown:


-- ERROR --

Missing onError handler for invocation 'building-schema', 
error was 'Invariant Violation: Encountered an error
trying to infer a GraphQL type for: `image___NODE`. 
There is no corresponding node with the `id` field
matching: "IMG1,IMG2"

at invariant
(/myproject/node_modules/gatsby/src/services/build-schema.ts:19:3)

This behavior breaks incremental builds because only the first gatsby build execution will work.

Does someone know how to fix this?

How to use Gatsby plugin image on incremental builds

0 Answers0