Direct mutation of a node is a big no-no
Before Gatsby v4, you could mutate a node directly, and it would work. According to Gatsby, it was never an intended feature. The persisted storage for nodes in v4 breaks this unintended pattern.
What do we mean by direct manipulation of a node? Direct manipulation assigns properties to the node like it was a regular JavaScript Object.
For instance, before v4 we could have done:
exports.onCreateNode = async (gatsbyUtils, pluginOptions) => {
// Code lifted from gatsby-source-youtube-oembed
// Downloads the thumbnail as a file for YouTube nodes
// and connects the created file node to the YouTube node
// via the property thumbnailFileId
const { node, reporter, createNodeId, getCache } = gatsbyUtils;
const { createNode } = gatsbyUtils.actions;
if (node.internal.type === "YouTube") {
const imageFile = await createRemoteFileNode({
// The url of the remote file
url: node.oEmbed.thumbnail_url,
parentNodeId: node.id,
getCache,
createNode,
createNodeId,
});
node.thumbnailFileId = imageFile.id; // 👈👈👈
}
};However, that will no longer work. thumbnailFileId will not be added to the node. If you need to add data after a node is created, you must use createNodeField instead.
Exchange
node.thumbnailFileId = imageFile.id;for
createNodeField({
node,
name: `thumbnailFileId`,
value: imageFile.id,
});and you are good to go!
All the best,
Queen Raae