Gatsby: `Field "image" must not have a selection since type "String" has no subfields.` errors on warm cache

[PetroPavlenko]

Hi all I'm not sure I use something wrong.
I try ON_DATA_CHANGES. for 1 markdown file that has image path.
gatsby-config

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
    });
  }
};

my page.md

templateKey: about-page
path: /about
pageMetaData:
  title: zero carbon
  description: long long long
  isExcludedFromSitemap: false
  ogImage: /img/masterlogo.jpg
title: |-
  Hello
  we're Big company
sections:
  - type: imageWithDescription
    title: We are the best
    description: >-
      We launched in 2009 to make cheaper, greener, and simpler.

    image: /img/cleaning-children.png
    layoutType: zero-at-bottom

first build is ok.
But when I try to edit anything here like:
change word cheaper => the best
I receive error : Field "image" must not have a selection since type "String" has no subfields.
question:
Can I use onCreateNode with GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES ?

[ascorbic]

Hi. Does it work without GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES? It shouldn't affect it, but it would be good to rule it out. Also, does the image exist?

[PetroPavlenko]

Sorry for long response:
yes it is working ok without GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES

[PetroPavlenko]

Ahhh sorry. checked after yarn install same issue with simple yarn build
```
$ gatsby info

System:
OS: Linux 5.3 Ubuntu 18.04.4 LTS (Bionic Beaver)
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Shell: 4.4.20 - /bin/bash
Binaries:
Node: 12.16.1 - /tmp/yarn--1592555084755-0.06573885914549349/node
Yarn: 1.22.4 - /tmp/yarn--1592555084755-0.06573885914549349/yarn
npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
Languages:
Python: 2.7.17 - /usr/bin/python
Browsers:
Chrome: 83.0.4103.97
Firefox: 77.0.1
npmPackages:
gatsby: 2.23.0 => 2.23.0
gatsby-image: ^2.4.6 => 2.4.7
gatsby-plugin-catch-links: ^2.3.4 => 2.3.5
gatsby-plugin-layout: ^1.3.3 => 1.3.4
gatsby-plugin-netlify: ^2.3.4 => 2.3.5
gatsby-plugin-netlify-cms: ^4.3.4 => 4.3.5
gatsby-plugin-react-helmet: ^3.3.2 => 3.3.4
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-sharp: ^2.6.10 => 2.6.11
gatsby-plugin-sitemap: ^2.4.0 => 2.4.5
gatsby-plugin-styled-components: ^3.3.3 => 3.3.4
gatsby-plugin-tsconfig-paths: ^1.0.2 => 1.0.2
gatsby-plugin-typescript: ^2.4.4 => 2.4.6
gatsby-remark-copy-linked-files: ^2.3.4 => 2.3.5
gatsby-remark-images: ^3.3.9 => 3.3.10
gatsby-remark-relative-images: 0.2.3 => 0.2.3
gatsby-source-filesystem: ^2.3.10 => 2.3.11
gatsby-transformer-remark: ^2.8.14 => 2.8.15
gatsby-transformer-sharp: ^2.5.4 => 2.5.5```

[PetroPavlenko]

So I checked several more times. And what I found is:
yarn build always works first time. but fails second time(with .cache and public) after text cahnges.
I have fragment

fragment ImageWithDescription on MarkdownRemark {
  frontmatter {
    sections {
      title
      layoutType
      description
      image {
        childImageSharp {
          fluid(maxWidth: 600) {
            ...GatsbyImageSharpFluid_withWebp
            ...GatsbyImageSharpFluidLimitPresentationSize
          }
        }
      }
    }
  }
}

and here image is not parsed second time with yarn build too

[pieh]

I think it's not the createNodeField that cause problems here, rather it's fmImagesToRelative

It looks like you are using https://www.gatsbyjs.org/packages/gatsby-remark-relative-images/ plugin, which have the error you are reporting listed in it's FAQ section. I'm not sure if the solution listed there is applicable to your case, but generally this plugin does seem to cause this kind of issues.

[PetroPavlenko]

@pieh Almost yes. As it only crashes with cache. Without cache everything is ok

[PetroPavlenko]

Hi all. Is there any updates. Is there something I can help with ?

[alesanchezr]

I have the same issue but not only with cache, it also happends on the first build, here is the repo:
https://github.com/4geeksacademy/website-v2

And I don't have the gatsby-remark-relative-images plugin installed.

Field "student_thumb" must not have a selection since type "String" has no subfields.
--
00:06:25.338 | This can happen if you e.g. accidentally added { } to the field "student_thumb". If you didn't expect "student_thumb" to be of type "String" make sure that your input source and/or plugin is correct.
00:06:25.338 | File: src/templates/apply.js:294:28

The file location is ok, actually it was working before and it stopped working suddenly, all I did was replace some images with compressed alternatives.

[alesanchezr]

Ok I was able to fix my problem, I needed to include the /static folder with the gatsby-source-filesystem, basically include this on the gatsby-config.js

{   
      resolve: 'gatsby-source-filesystem',  
      options: {    
        path: `${__dirname}/static/`,   
        name: 'static', 
},

This is the commit that broke everything, but now its fixed 😄
https://github.com/4GeeksAcademy/website-v2/commit/0f6791138e2f3a69901972bbb8da6aad0fc61d2f#diff-b9e136416b90437fa1dac910280b45fcL72

[LekoArts]

GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES is an experimental feature (hence the EXPERIMENTAL tag) and since gatsby-remark-relative-images is causing this we won't spend time on fixing it with this particular plugin. Feel free to reach out to the plugin maintainer and see if you can work out a fix (we're happy to review PRs, too) but we won't work on this.