Document linking images to other nodes, `onCreateNode` in `gatsby-nodes.js`

Summary

because gatsby processes images separately from the other sources that might depend on those images, it is a very common need to want to link them onCreateNode. however the documentation on this is basically in https://github.com/gatsbyjs/gatsby/issues/3608 (and other related issues like https://github.com/gatsbyjs/gatsby/issues/5196, all looking the same). in particular this seems to be the key part:

      // Find ID of File node
      const fileNode = getNodes().find(n => n.absolutePath === pathToFile);

      if (fileNode != null) {
        // Find ImageSharp node corresponding to the File node
        const imageSharpNodeId = fileNode.children.find(n => n.endsWith('>> ImageSharp'));
        const imageSharpNode = getNodes().find(n => n.id === imageSharpNodeId);

        // Add ImageSharp node as child
        createParentChildLink({ parent: node, child: imageSharpNode });
      }

however the endsWith('>> ImageSharp') doesn’t even seem to be relevant anymore (at least when i tried it) so this also doesn’t work.

we should document common patterns like this, if not treat them as bugs since it is fairly nasty dx.

Relevant information

this is what i’m doing now:

// add images https://github.com/gatsbyjs/gatsby/issues/2995
    const fileNode = getNodes().find(n => 
      n.absolutePath &&  // many nodes dont have it
      n.absolutePath.includes('generatedScreenshots') && // just the screenshots
      n.name === stub // assumes screenshots have same name as stub
    )

    if (fileNode != null) {
      // Find ImageSharp node corresponding to the File node
      const imageSharpNodeId = fileNode.children[0];
      if (imageSharpNodeId) {
        const imageSharpNode = getNodes().find(n => n.id === imageSharpNodeId);
        if (imageSharpNode) createNodeField({ node, name: `starterScreenshot`, value: imageSharpNode })
      } else console.log('no imageSharpNodeId found for ' + stub, fileNode)
    }

but i only get the bare minimum data, not imageSharp data:

Environment (if relevant)

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i7-4650U CPU @ 1.70GHz
    Shell: 5.2 - /bin/zsh
  Binaries:
    Node: 8.5.0 - ~/.nvm/versions/node/v8.5.0/bin/node
    Yarn: 1.6.0 - ~/.nvm/versions/node/v8.5.0/bin/yarn
    npm: 6.0.0 - ~/.nvm/versions/node/v8.5.0/bin/npm
  Browsers:
    Chrome: 67.0.3396.87
    Firefox: 58.0.1
    Safari: 11.0.1
  npmPackages:
    gatsby: next => 2.0.0-beta.9 
    gatsby-image: next => 2.0.0-beta.2 
    gatsby-plugin-canonical-urls: next => 2.0.0-beta.2 
    gatsby-plugin-catch-links: next => 2.0.2-beta.2 
    gatsby-plugin-create-client-paths: ^1.0.8 => 1.0.8 
    gatsby-plugin-feed: next => 2.0.0-beta.2 
    gatsby-plugin-fullstory: ^1.0.4-5 => 1.0.4-9 
    gatsby-plugin-glamor: next => 2.0.0-beta.2 
    gatsby-plugin-google-analytics: next => 2.0.0-beta.2 
    gatsby-plugin-google-tagmanager: next => 2.0.0-beta.2 
    gatsby-plugin-lodash: next => 3.0.1-beta.2 
    gatsby-plugin-mailchimp: ^2.2.3 => 2.2.3 
    gatsby-plugin-manifest: next => 2.0.2-beta.2 
    gatsby-plugin-netlify: next => 2.0.0-beta.2 
    gatsby-plugin-netlify-cache: ^0.1.0 => 0.1.0 
    gatsby-plugin-nprogress: next => 2.0.0-beta.2 
    gatsby-plugin-offline: next => 2.0.0-beta.2 
    gatsby-plugin-react-helmet: next => 3.0.0-beta.2 
    gatsby-plugin-sharp: next => 2.0.0-beta.2 
    gatsby-plugin-sitemap: next => 2.0.0-beta.2 
    gatsby-plugin-twitter: next => 2.0.0-beta.2 
    gatsby-plugin-typography: next => 2.2.0-beta.2 
    gatsby-remark-autolink-headers: next => 2.0.0-beta.3 
    gatsby-remark-copy-linked-files: next => 2.0.0-beta.2 
    gatsby-remark-images: next => 2.0.1-beta.3 
    gatsby-remark-prismjs: next => 3.0.0-beta.2 
    gatsby-remark-responsive-iframe: next => 2.0.0-beta.2 
    gatsby-remark-smartypants: next => 2.0.0-beta.2 
    gatsby-source-filesystem: next => 2.0.1-beta.3 
    gatsby-source-npm-package-search: ^1.0.8 => 1.0.8 
    gatsby-transformer-csv: next => 2.0.0-beta.2 
    gatsby-transformer-documentationjs: next => 2.0.0-beta.2 
    gatsby-transformer-remark: next => 2.1.1-beta.2 
    gatsby-transformer-screenshot: next => 2.0.0-beta.2 
    gatsby-transformer-sharp: next => 2.1.1-beta.2 
    gatsby-transformer-yaml: next => 2.1.1-beta.2 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

[sw-yx]

my conclusion is it can’t be done. if you are from the future and hoping to do what i did, dont try. just do a File query instead and manually link them later.

[sw-yx]

i no longer remember what this is about lol. but given that i said “it cant be done” 2 years ago i probably stand by that