How do you add new nodes to existing gatsby-source-shopify nodes?

[dungle-scrubs]

I'm trying to add existing nodes to Shopify metafield nodes source from gatsby-source-shopify. Whenever the metafield value contains a publicly hosted image URL, I'd like to create a new localFile node so the image can be processed using GatsbyImage.

Additionally, the metafield value could be a string containing an image url, or it could be a stringified JSON array of multiple objects, some of which the value might be an image url (I use an app by Bonify called Custom Fields which allows you to create repeaters).

Right now, I'm just focusing on metafield values that are just a single image url string. Eventually, I'd like to add a node called subfields that would query an array of key value pairs adding localFile where values are image url strings.

I need the nodes to have a specified type as well, so I can point an Imgix plugin at them. My first attempt was to use createNodeField, but since it doesn't allow me to assign a node type, there's not a way to target it with the Imgix plugin.

This is what I'm eventually aiming for

├── metafields
│   ├── key
│   ├── namespace
│   ├── value
│   ├── image
│   │   ├── originalSrc
│   │   └── localFile
│   ├── subfields // When value is a stringified JSON object containing key value pairs
│   │   ├── key
│   │   ├── value
│   │   ├── image
│   │   │   ├── originalSrc
│   │   │   └── localFile
│   │   ├── subfields // The app will nest repeaters this deep
│   │   │   ├── key
│   │   │   ├── value
│   │   │   ├── image
│   │   │   │   ├── originalSrc
│   │   │   │   └── localFile

This is where I'm at so far, but it just results in null values. I can't find any guides this specific and Gatsby's docs are a little out of my league when it comes to advanced GraphQL. Can someone point me to where I'm going wrong? Thanks in advance!

const { createRemoteFileNode } = require(`gatsby-source-filesystem`)

// All images from this app are hosted in a DO NO DELETE inactive Shopify theme
// TODO: Differentiate image URLs from normal file uploads hosted on the same domain
const isImageUrl = (url) => {
  return url.includes('https://cdn.shopify.com')
}

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  createTypes(`
  type ShopifyProductMetafield implements Node {
    image: [BonifyCustomFieldsImage]
  }

  type BonifyCustomFieldsImage implements Node {
    id: ID!
    originalSrc: String
    }
  `)
}

exports.onCreateNode = async (helpers) => {
  console.log('helpers', helpers)
  const { node, actions, createContentDigest, store, cache, createNodeId } = helpers
  const { createNode } = actions

  if (node.internal.type !== 'ShopifyProductMetafield') return
  if (node.namespace !== 'custom_fields') return
  if (!isImageUrl(node.value)) return

  const newNode = createNode({
    originalSrc: node.value,
    id: createNodeId(`BonifyCustomFieldsImage-${node.id}`),
    parent: node.id,
    children: [],
    internal: {
      type: 'BonifyCustomFieldsImage',
      content: node.value,
      contentDigest: createContentDigest(node.value),
    },
  })

  let fileNode = await createRemoteFileNode({
    url: node.value, // 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, // helper function in gatsby-node to generate the node id
    cache, // Gatsby's cache
    store, // Gatsby's Redux store
  })

  if (fileNode) {
    node.image___NODE = fileNode.id
  }
}