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

[swyxio]

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 #3608 (and other related issues like #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

[swyxio]

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.

[pungggi]

This may linked to this https://www.gatsbyjs.org/docs/migrating-from-v1-to-v2/#dont-query-nodes-by-id

[pungggi]

Hi @sw-yx what do you mean by

manually link them later.

this comment suggest that this is done automaticlly #6041 (comment)

#6041 (comment)

[zackhall]

I cannot for the life of me figure out how to link an image file (with gatsby sharp) to a node I have manually created in sourceNodes.

I have tried this comment by @pieh: #6041 (comment)

I have tried to follow @pieh's comments with every conceivable relative path. It says relative path to your markdown file... but I just have hard-coded JSON in my sourceNodes function. So I've used relative path to the images from the gatsby-node.js file, from src, from anywhere. No avail.

I have also tried these steps: https://freddydumont.com/blog/How-to-source-images-and-data-from-JSON-files-in-Gatsby

Can we get some documentation coverage for gatsby recommendation on how to do this basic function of adding nodes?

@sw-yx - in the two years since opening this have you come up with a standard solution?

[swyxio]

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