CodeSandbox - https://codesandbox.io/s/jj597mrvmw
I am having an issue with some data returned from an external API to my GatsbyJS/ReactJS site.
More specifically, the issue appears to be when processing the images with gatsby-image
and gatsby-plugin-sharp
using the API ...GatsbyImageSharpFluid
on GraphQL queries.
From the 1000's of images, it appears that only 1 is troublesome, returning the error
Errors:
icc_transform: no input profile
vips_colourspace: no known route from 'cmyk' to 'srgb'
I could just filter this image out but am concerned that future images as the API updates could cause the same issue.
How can I
- Fix this error presented by
sharp
so that the image can be processed? or, filter
image(s) that return this error during processing of thecreateRemoteFileNode
, or- Skip troublesome image(s) within
catch (error)
, or - Any other thoughts/solutions
createRemoteFileNode
within gatsby-node.js
is as
exports.sourceNodes = async ({ actions, store, cache, createNodeId }) => {
const { createNode, createNodeField } = actions;
const { data } = await axios.get(API_URI);
for (const event of data._embedded.events) {
let fileNode;
let output = [];
let filterResults = event.images.filter(e => e.width >= 1900);
output.push(...filterResults);
try {
fileNode = await createRemoteFileNode({
url: output[0].url,
cache,
store,
createNode,
createNodeId,
});
await createNodeField({
node: fileNode,
name: 'EventImage',
value: 'true'
});
await createNodeField({
node: fileNode,
name: 'name',
value: event.name
});
} catch (error) {
console.warn('error creating node', error);
}
}
};