ImageSharp nodes cannot be created by other plugins

[0x6e6562]

Description

ImageSharp nodes cannot be created by other plugins:

Error: The plugin "default-site-plugin" created a node of a type owned by another plugin.
The node type "ImageSharp" is owned by "gatsby-transformer-sharp".
If you copy and pasted code from elsewhere, you'll need to pick a new type name
for your new node(s).        

Steps to reproduce

This minimal POC project is based of the Hello World starter and reproduces the symptom:

1. Configure gatsby-transformer-yaml to process YAML - this emulates the process of creating a resource node dynamically
2. An example YAML file contains the path to image that will get referenced in step 3:

- feature:
    description: Monument Valley
    image: pages/img/andrea-leopardi-1296437-unsplash.jpg

3. onCreateNode creates:
   • a resource node for the YAML fragment and
   • a image node from the image reference
4. The image node is linked as child to the resource node
5. The type attribute of the image node is set to ImageSharp so that this will get processed by gatsby-transformer-sharp

The relevant onCreateNode code is here.

Expected result

To create an ImageSharp node that references the image declared by the YAML data. The motivation ultimately to be able to construct pages from data descriptor files, similar to the gatsby-transformer-remark flow, but with a custom input language instead of markdown.

This issue has a similar motivation to #6112

Actual result

The node object passed to "createNode":

{
  "id": "cd46e633-3dd2-52f3-abb2-1a33e43eabd9",
  "children": [],
  "parent": "81b0b441-2f27-5e6a-84d4-1f272ac044f8",
  "internal": {
    "contentDigest": "30325315b55813b111cfd388468a7276",
    "type": "ImageSharp",
    "owner": "default-site-plugin"
  }
}

The plugin creating the node:

{
  "resolve": "/Users/0x6e6562/Workspace/image-sharp-node-creation",
  "id": "7374ebf2-d961-52ee-92a2-c25e7cb387a9",
  "name": "default-site-plugin",
  "version": "111d3814fb1707de826cd59ee6d964ac",
  "pluginOptions": {
    "plugins": []
  },
  "nodeAPIs": [
    "onCreateNode"
  ],
  "browserAPIs": [],
  "ssrAPIs": [],
  "pluginFilepath": "/Users/0x6e6562/Workspace/image-sharp-node-creation"
}

Environment

System:
    OS: macOS 10.14.2
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.1.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0.2
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.76 => 2.0.76
    gatsby-plugin-sharp: ^2.0.17 => 2.0.17
    gatsby-source-filesystem: ^2.0.16 => 2.0.16
    gatsby-transformer-sharp: ^2.1.10 => 2.1.10
    gatsby-transformer-yaml: ^2.1.7 => 2.1.7
  npmGlobalPackages:
    gatsby-cli: 2.4.8

[sidharthachatterjee]

Can you try what @pieh mentions in this comment?
#6041 (comment)

exports.onCreateNode = ({ node, getNode, actions }) => {
    const { createNodeField } = actions;
    if (node.internal.type === `MarkdownRemark`) {
        createNodeField({
            node,
            name: `heroImage`,
            value: `./hero-something.jpg`, // adjust as needed here - this need to be relative path to image from your markdown file
        });
    }
};

this will create fields object in MarkdownRemark nodes and there you will have heroImage that Gatsby will automatically convert to File node which will have childImageSharp if you have sharp plugins installed and path in that field is correct

[0x6e6562]

@sidharthachatterjee Many thanks for answering this question :-)

This update to the demo project incorporates your suggestion - and it appears to build the graph accordingly. The allImageSharp query returns sensible data, so it looks like the image has been processed:

allImageSharp {
  edges {
    node {
      fixed {
        width
        height
        src
      }
    }
  }
}

The YAML query also returns sensible data:

featureYaml {
  id
  feature {
    description
    image
  }
  fields {
    hard_coded_image_name
  }
}

The bit I don't get is how to apply the childImageSharp function to the YAML query. Should I try something like this?

featureYaml {
  id
  feature {
    description
    image
  }
  fields {
    hard_coded_image_name {
      childImageSharp {
        fluid(maxWidth: 400, maxHeight: 250) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
}

[0x6e6562]

By invoking the fluid API I was able to add the ImageSharp (dynamically) statically to the feature node, which means that I can obtain to the ImageSharp attributes in a single query:

export const query = graphql`
  query FeatureQuery {
    allFeature {
      totalCount
      edges {
        node {
          id
          description
          fluid {
            src
          }
        }
      }
    }
  }
`

[0x6e6562]

This approach also supports the gatsby-image React component.

However, I still haven't figured out how to propagate a query such as resize via graphql e.g.

allFeature {
  edges {
    node {
      id
      description
      fluid {
        ... on ImageSharp {
          resize(width: 150, height: 150, grayscale: true) {
            src
          }
        }
      }
    }
  }
}

This seems to be because I invoked the gatsby-plugin-sharp API directly during onCreateNode, whereas the ImageSharp fragment query is invoked at page build time.

During onCreateNode I would have had to create an node that could handle these query parameters.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!