Gatsby gatsby-remark-relative-images does not convert yaml absolute image path to relative

Question

I am currently trying to resolve an absolute path in yaml file to relative so it can be query using graphql in gatsby. The absolute path are provided from netlify-cms.

When the same path are being placed in md file and uses gatsby-remark-relative-images to convert it to relative path, it has no problem at all, but the same does not apply to yaml.

The image file are placed in static/img/ and the path provided by cms is /img/xxx.jpg

src/data/pages/index.yaml

page: index
slider:
  - image: /img/1_new.jpg
    url: ""
  - image: /img/2_new.jpg
    url: ""
  - image: /img/3_new.jpg
    url: ""

gatsby-config.js

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/data`,
        name: 'data',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/img`,
        name: 'uploads',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/assets/images`,
        name: 'images',
      },
    },
    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /\.inline\.svg$/,
        },
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-transformer-yaml-plus`,
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-relative-images',
            options: {
              name: 'uploads',
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 2048, // must specify max width container
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          {
            resolve: 'gatsby-remark-copy-linked-files',
            options: {
              destinationDir: 'static',
            },
          },
          `gatsby-remark-smartypants`,
          `gatsby-remark-widows`,
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    'gatsby-plugin-netlify', // make sure to keep it last in the array
  ],
  // for avoiding CORS while developing Netlify Functions locally
  // read more: https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying
  developMiddleware: app => {
    app.use(
      '/.netlify/functions/',
      proxy({
        target: 'http://localhost:9000',
        pathRewrite: {
          '/.netlify/functions/': ``,
        },
      })
    )
  },
}

Also, here is where it convert the absolute path in node into relative path

gatsby-node.js

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node) // convert image paths for gatsby images

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

Finally, here is where it define the netlify-cms configuration

static/admin/config.yml

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - label: "Data"
    name: "data"
    files:
    - name: "index"
      label: "Index"
      file: "src/data/pages/index.yml"
      fields:
        - {label: "Page", name: "page", widget: hidden, default: "index"}
        - label: "Slider"
          name: "slider"
          widget: list
          fields:
            - {label: "Image", name: "image", widget: image}
            - {label: "Url", name: "url", widget: string, required: false}

Error Message

 ERROR 

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

  file: /home/gaara/JS/iconic-starter-netlify-cms/src/pages/index.js

   1 |
   2 |   query IndexPage {
   3 |     pagesYaml(page: { eq: "index" }) {
   4 |       id
   5 |       slider {
   6 |         desktop {
>  7 |           image {
     |                 ^
   8 |             childImageSharp {
   9 |               fluid(maxWidth: 2000, quality: 90) {
  10 |                 aspectRatio
  11 |                 presentationWidth
  12 |                 src
  13 |                 srcSet
  14 |                 sizes
  15 |               }
  16 |             }
  17 |           }


⠙ extract queries from components
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I had already made sure that all the image exists inside the static/img/ folder. I had also made several attempt in restarting the server so to avoid image not loading issue. The image path that given from netlify-cms should stay as /img/xxx.jpg because there is a lot of other markdown files uses it and has no problem in resolving the path.

May I know is there any configuration problem which I did wrong or miss out that causing the gatsby-remark-relative-images not being able to resolve the file path?

Answer 1

gatsby-remark-relative-images is a plugin that only works with markdown files handled by gatsby-transformer-remark.

The recent-ish graphql schema customization update allows new solution that's independent of file types. You can explore the official docs on the topic here: Customize the Graphql Schema (gatsby docs)

Instead modifying the image paths before gatsby gets to it (like with gatsby-remark-relative-images), we'd customize the graphql schema so that the image field (slider.desktop.image in your case) resolves to the image file node instead.

Please note that the node types below are just loose examples & you should go to your graphiql endpoint (i.e. localhost:8000/graphiql) to find the correct type names.

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

  createFieldExtension({
    name: 'fileByStaticPath',
    extend: () => ({
      resolve: (src, args, ctx, info) => {
        // look up original string value
        const { fieldName } = info
        const partialPath = src[fieldName]

        // TODOS
        // - join path to create the correct image file path
        // - query the file node with `context.nodeModel.runQuery`
        // - return the file node if exists
      }
    })
  })


  const typeDefs = `
    type YamlSliderDesktop @infer {
      image: File @fileByStaticPath
    }

    type YamlSlider @infer {
      desktop: YamlSliderDesktop
    }

    type PagesYaml implements Node @infer {
      slider: YamlSlider
    }
  `
  createTypes(typeDefs)
}

---

I found myself doing this pretty often, so I wrote a plugin for it: gatsby-schema-field-absolute-path (github).

I also wrote a bit more in depth about this over here on my blog (byderek.com), but really, nothing that you won't find in the Gatsby official docs, just explained in a different language.

Hope it helps!