Gatsby: getNodes() doesn't appear to include images

[martynhoyer]

Hi folks! I'm really struggling with this one and would appreciate some assistance.

I've been following the guidance in https://github.com/gatsbyjs/gatsby/issues/2995 to help me get images added via NetlifyCMS transformed into imageSharp nodes for responsive sizing.

I've copied the example code into my gatsby-node.js but it seems to be behaving differently to the example - when I console.log(getNodes()) it looks to have awareness of everything but the images I'm trying to reference. This seems unusual because allImageSharp and allFile queries in GraphiQL get the right responses, so they've been processed and should be "nodes" right?

Because that function doesn't return the images, the rest of it just ends up returning undefined and nothing ends up matching.

My gatsby-node is visible at https://github.com/martynhoyer/gatsby-skeleton/blob/feature/post-image-thumbnails/gatsby-node.js and gatsby-config is at https://github.com/martynhoyer/gatsby-skeleton/blob/feature/post-image-thumbnails/gatsby-config.js

I'd love to know what I'm doing wrong! Thanks in advance.

[KyleAMathews]

getNodes only returns the nodes that exist when you call it. Try calling console.log(getNodes().length)

[martynhoyer]

That returns 89. I'm pretty sure everything apart from the images is in there.

It's also working fine in https://github.com/simonyiszk/mvk-web/blob/master/gatsby-node.js (the example I got from https://github.com/gatsbyjs/gatsby/issues/2995) but I can't really tell what's happening differently.

[m-allanson]

It looks like the Markdown nodes are being created before the File nodes.

If you add the following at the top of your onCreateNode function, you can see the file nodes for the images are some of the last nodes to be created:

console.log('Type: ', node.internal.type)
if (node.absolutePath) console.log('absolutePath: ', node.absolutePath)

I'm not sure what controls the order that nodes are created, or what the correct fix / workaround is here.

[martynhoyer]

Oh my god, I had one of those moments last night when I woke up and my brain immediately thought: "what if I just re-ordered the gatsby-source-filesystem entries in my gatsby-config so that the images were first?", but then fell asleep again and didn't remember. @m-allanson your comment has triggered that memory, and I've done that and it works! Hilarious. Thanks very much!

So yeah, pretty simple, put the images directory above the posts directory in the config.

[sw-yx]

@martynhoyer can you please show the final gatsby-config? i tried reordering my entries and my images are still not showing up. very frustrated.

to follow my own advice this is what i have in my config:

//...
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `StarterShowcaseImages`,
        path: `${__dirname}/src/data/StarterShowcase/generatedScreenshots`,
      },
    },
    //   need to have the img processing first? https://github.com/gatsbyjs/gatsby/issues/5196
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `StarterShowcaseData`,
        path: `${__dirname}/src/data/StarterShowcase/startersData`,
      },
    },
//...

it still doesnt work...

[martynhoyer]

Apologies for the delay... here's what I have:

//...
    {
      // https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'cmsimages',
        path: `${__dirname}/static/img`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'authors',
        path: `${__dirname}/content/${config.blogAuthorDir}`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'categories',
        path: `${__dirname}/content/categories`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'posts',
        path: `${__dirname}/content/${config.blogPostDir}`,
      },
},
//...

and in gatsby-node.js:

//...
    // Attach image's ImageSharp node by public path if necessary
    if (node.frontmatter.image && typeof node.frontmatter.image === 'string') {
      // Find absolute path of linked path
      const pathToFile = path
        .join(__dirname, 'static', node.frontmatter.image)
        .split(path.sep)
        .join('/')

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

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

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

[sw-yx]

thank you!!

I think this line

const imageSharpNodeId = fileImageNode.children.find(n => n.endsWith('>> ImageSharp'))

this trips me up. I need to do more experimenting around this. I worked around my issue from 5 days ago but I think I will need to better document this long term. anyway I hope people in future find this.

[pieh]

Actually exactly that line will stop working in v2 (ids won't have anything you can do to match like that). You would have to map fileImageNode.children (which is array of ids) to nodes (by using getNode for example) and then test for internal.type of that node

[sw-yx]

I think I tried that and the ImageSharp data still wasn't showing up. I'll retry again sometime in future with a different project.