Gatsby: How to transform absolute image paths in json to gatsby-images?

[Kadrian]

Setup

I have a large JSON animals.json that I can use with gatsby-transformer-json. That results in an allAnimalsJson, with each animal containing fields like:

name: "Puppy 1",
bigImg: {
  name: "Dog",
  src: "/Absolute/path/to/dogs/puppy1/dog.jpg"
} 

I've got all of those absolute paths "sourced" by using gatsby-source-filesystem:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pics`,
    path: `/Absolute/path/to/dogs/`,
    ignore: [`**/\.*`, `**/_*`] // ignore files starting with a dot or underscore
  }
},

I've got gatsby-transformer-sharp and gatsby-plugin-sharp set up.

Issue

Now when I'm trying

query {
  allAnimalsJson {
    bigImage: {
      img: src {
        childImageSharp {
          fluid(maxWidth: 1200)
        }
      }
    }
  }
}

I'm getting the error:

GraphQL Error Field "src" must not have a selection since type "String" has no subfields.

Questions

Assumption: Somehow, what is transformed within the json transformer isn't transformed with the sharp transformer afterwards.

So my questions are:

• Is my assumption correct?
• Does my error have something to do with absolute vs relative paths?
• In which order are transformers executed?
• Should I write an own transformer to make an own allAnimalImages node type, using some combination of json parsing and gatsby-plugin-sharp's API?
• Is there an easier way?

[kakadiadarpan]

@Kadrian can you provide a reproduction repo for this?

[Kadrian]

@kakadiadarpan I could, but is that necessary here? What information are you missing? Should my scenario work the way I describe it?

[stefanprobst]

When gatsby generates the graphql schema, it checks if a string can be interpreted as a filepath, but also if the path is relative, i.e. no absolute paths allowed:
https://github.com/gatsbyjs/gatsby/blob/23b84338f50ed372e41440fdba538c583e0b203d/packages/gatsby/src/schema/types/type-file.js#L28-L35
But relative paths should work. E.g. if you have the images in src/images/dogs/ and your json file in src/data/dogs.json, you can reference the images:

{
  "dogs": [
    {
      "name": "Dog",
      "image": {
        "name": "Cute Dog",
        "src": "../images/dogs/dog.jpg"
      }
    }
  ]
}

In the graphql query you will then be able to handle src as a File node, i.e. something like

{
  allDataJson {
    edges {
      node {
        dogs {
          name
          image {
            name
            src {
              childImageSharp {
                fluid {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
}

Btw. a great way to debug these kinds of things is with vscode's integrated node debugger, which you can set up following the instructions of the gatsby website.

[Kadrian]

@stefanprobst Thanks a lot, that solved it! Transformed my absolute paths into relative ones, then it worked. Thanks also for the debugger hint. Out of curiosity: Is there a reason absolute paths are not supported?

[stefanprobst]

Is there a reason absolute paths are not supported?

Hmm, don't know, sorry.