Querying fixed, fluid, or gatsbyImage nodes of the childImageSharp node of a Craft asset results in an error.

[sandren]

Description

The gatsby-source-craft plugin makes childImageSharp nodes appear in Gatsby's GraphiQL interface, but querying any of the fields within the fixed, fluid, or gatsbyImage nodes results in the following error:

The "path" argument must be of type string or an instance of Buffer or URL. Received undefined

Steps to reproduce

1. install and configure gatsby-source-craft
2. run gatsby develop
3. open GraphiQL on http://localhost:8000/___graphql and query any fields within the fixed, fluid, or gatsbyImage nodes of the childImageSharp of a Craft CMS asset such as:

... on Craft_EXAMPLE_Asset {
  childImageSharp {
    gatsbyImageData(layout: FLUID)
  }
}

Additional info

• Craft version: Craft Pro 3.5.15.1
• PHP version: 7.3.19
• Database driver & version: MySQL 5.5.5
• Plugins & versions: Gatsby 1.0.0-beta.1

[sandren]

Until the issue with gatsby-source-craft is resolved, there is a workaround using gatsby-source-filesystem to create remote file nodes based on the public URL of Craft assets.

Steps to implement workaround

1. install gatsby-source-filesystem
2. add the following to gatsby-node.js, replacing EXAMPLE with the handle of your Craft volume with working public URLs:

const { createRemoteFileNode } = require('gatsby-source-filesystem');
exports.createResolvers = async ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions;
  await createResolvers({
    Craft_EXAMPLE_Asset: {
      imageFile: {
        type: `File`,
        async resolve(source) {
          return await createRemoteFileNode({
            url: source.url,
            store,
            cache,
            createNode,
            createNodeId,
            reporter,
          });
        },
      },
    },
  });
};

3. run gatsby develop
4. open GraphiQL on http://localhost:8000/___graphql
5. a new imageFile node will appear on any Craft assets, which can be queried for use with Gatsby Image, being sure to query the url field as well or else the createRemoteFileNode() function will fail:

... on Craft_EXAMPLE_Asset {
  url
  imageFile {
    childImageSharp {
      gatsbyImageData(layout: FLUID)
    }
  }
}

Steps to reverse workaround

Once the issue with gatsby-source-craft is resolved, gatsby-source-filesystem can be uninstalled, the code from gatsby-node.js can be removed, and the query for images can be shortened to:

... on Craft_EXAMPLE_Asset {
  childImageSharp {
    gatsbyImageData(layout: FLUID)
  }
}

[andris-sevcenko]

Okay, so.

gatsby-transform-sharp adds the childImageSharp child node to anything that has an extension field that contains a file extension that it can transform. Since an Asset describes a file, it's a valid scenario for it to have the extension field, even if it is not the file itself.

I've submitted a bug report in hopes that the current eager behavior can be adjusted since actually removing that field once it's added can get very ugly. Or, well, maybe I just can't figure out how to do it cleanly.

Until then, I've pretty much done exactly what @sandren has done, except I went with a localFile field that gets created automatically on all AssetInterface implementing types.

Since this is a resolver, if you never touch the localFile field, it never gets downloaded, so this should be pretty efficient.

I'll leave this issue open for now because part of the issue is the incorrect childImageSharp field on Assets.

[pieh]

Hi @sandren

I just opened pull request with fix for gatsby-transformer-sharp wrongly adding childImageSharp field to Asset (as described by @andris-sevcenko in previous comment) if you'd like to follow that.

The provided workaround is one that makes sense to me, and maybe the localFile / imageFile resolver could be added by gatsby-source-craft plugin automatically so users don't have to implement this on their own, but this is up to plugin maintainers to decide.

[andris-sevcenko]

This fix has been implemented in gatsby-transformer-sharp@2.6.0

[kara-todd]

@andris-sevcenko Is the manual resolver still required? So is this closed with a "Won't fix" sort of closed? Or should this be working where asset images are automatically detected and receive the childImageSharp field?

Edit: This worked for me as soon as I added the resolver. Since this was closed I just wanted to make sure this was the intention. Might be good to clarify this point in the documentation?

[andris-sevcenko]

@kara-todd it's not required, not. The sourcing plugin automatically adds a localFile node. The file is actually downloaded from Craft only if you access it in a query.