How to use absolute image paths in other files, e.g. JSON?

[shawngrona]

Description

ChildImageSharp is null on sourcing from file system in new Gatsby v3 with v3 plugins gatsby-plugin-sharp, gatsby-source-filesystem, gatsby-transformer-sharp. This same approach worked fine in v2, did I miss a change? There is another user having same issue described on stack overflow

Steps to reproduce

See minimum reproduction:
https://github.com/shawngrona/gatsby-acf-mri/tree/gatsby-image-filesystem

Entry point is in gatsby-node which calls the localContent.js file which creates nodes and image nodes from file system.

Expected result

No error from missing childImageSharp in graphql

Actual result

Cannot query field "childImageSharp" on type XX.

Environment

System:
OS: macOS 11.2.3
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.16.0 - ~/.nvm/versions/node/v12.16.0/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v12.16.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 90.0.4430.212
Firefox: 88.0
Safari: 14.0.3
npmPackages:
gatsby: ^3.4.1 => 3.4.1
gatsby-plugin-sharp: ^3.4.1 => 3.4.1
gatsby-source-filesystem: ^3.5.0 => 3.5.0
gatsby-transformer-sharp: ^3.4.0 => 3.4.0

[LekoArts]

Hi!

It isn't broken per se in Gatsby v3, but you might have relied on something that has changed in between v2 and v3.
Anyhow, I don't think the way you're currently sourcing your data and making absolute image paths work is the best one.

You can see a working example here: https://github.com/LekoArts/gatsby-absolute-image-paths

For transforming JSON we already have gatsby-transformer-json and I'd recommend using that instead of rolling your own solution. For getting the image with an absolute image path (because relative image paths should already work out of the box) you can use the schema customization API.

In your gatsby-node.js you tell Gatsby that your image should be a File node. To those File nodes the childImageSharp will automatically be attached if you have the image plugins installed:

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  createTypes(`
    type LocalContentCities implements Node {
      image: File @fileByAbsolutePath(path: "src/images")
    }
  `)
}

The @fileByAbsolutePath(path: "src/images") part is a custom directive/extension one can define. In total your gatsby-node.js will look like this:

const path = require("path")

const getFileNode = (options) => (source, _, context, info) => {
  const { fieldName } = info
  const partialPath = source[fieldName]

  if (!partialPath) {
    return null
  }

  const filePath = path.join(__dirname, options.path, partialPath)

  const fileNode = context.nodeModel.findOne({
    type: 'File',
    query: {
      filter: {
        absolutePath: {
          eq: filePath
        }
      }
    }
  })

  if (!fileNode) {
    return null
  }

  return fileNode
}

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes, createFieldExtension } = actions

  createFieldExtension({
    name: "fileByAbsolutePath",
    args: {
      path: {
        type: "String!",
        defaultValue: ""
      }
    },
    extend: (options) => ({
      resolve: getFileNode(options)
    })
  })

  createTypes(`
    type LocalContentCities implements Node {
      image: File @fileByAbsolutePath(path: "src/images")
    }
  `)
}

The context.nodeModel.findOne part is actually running a query against the GraphQL node store. To be able to find your image make sure that you also let gatsby-source-filesystem know:

    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "src/images",
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "data",
        path: "src/data",
      },
    },

The cool thing now about the directive is that you can reuse it for other fields on different nodes. This is the most barebone version of this, you might also try https://github.com/d4rekanguok/gatsby-schema-field-absolute-path that probably handles more edge cases.

[lcfd]

OMG, this is a lifesaver!
Thank you so much! ❤️

relative image paths should already work out of the box

Btw, for us using relative paths doesn't work