Netlifycms Gatsby - Field "image" must not have a selection since type "String" has no subfields.

stuartverschoyle commented 3 years ago

I have spent all day trying to find the answer to this, been through every github help and just could not find the answer and I know its something very simple.

Description

When making a change to the .md file I see this error

error There was an error in your GraphQL query: Field "image" must not have a selection since type "String" has no subfields. This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of type "String" > > make sure that your input source and/or plugin is correct.

Steps to reproduce

Started a Gatsby through netlifycms

replicated the following

    intro {
       blurbs {
         image {
           childImageSharp {
             fluid(maxWidth: 356, quality: 64) {
               ...GatsbyImageSharpFluid
             }
           }
         }
         header
         text
       }
     }

Changed 'blurbs' to 'products' and changed all appropritate files to duplicate everything.

Builds just fine but whenever I make a change in the index.md file i get the error

https://github.com/stuartverschoyle/apollon-gatsby

Expected result

I would expect the build to be successful and for the changes to change on the browser

Actual result

I get the error

error There was an error in your GraphQL query: Field "image" must not have a selection since type "String" has no subfields. This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of type "String" > > make sure that your input source and/or plugin is correct.

Environment

command not found: gatsby

Would not work as its through netlfy

vladar commented 3 years ago

Hi @stuartverschoyle !

Is there a way to run and reproduce this locally? If not, we'll need a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

stuartverschoyle commented 3 years ago

Hi Vladar,

I am just adding a new image into the markdown, the initial build is fine, its just when I change anything in the index.md file gives this error in the terminal. Its as if the hot reload isnt picking up the new images (or image path)

error There was an error in your GraphQL query: Field "image" must not have a selection since type "String" has no subfields. This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of type "String" > > make sure that your input source and/or plugin is correct.

to reproduce it

set up a netlify gatsby cms
in index.md duplicate the intro schema and rename it to products (or anything)
add different images in the products schema
in index-page.js change to
netlify dev (this will build the page and it will work fine)
then change some copy on in the index.md and save

This is when i get the below error in the terminal

error There was an error in your GraphQL query: Field "image" must not have a selection since type "String" has no subfields. This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of type "String" > > make sure that your input source and/or plugin is correct.

Is there something that I am missing when adding new images??

thanks for your help.

stuartverschoyle commented 3 years ago

Here is my repo if you want to have a look at that https://github.com/stuartverschoyle/apollon-gatsby

GautierT commented 3 years ago

I have the same problem. I read and try every solution on Internet with the keywords Field "image" must not have a selection since type "String" has no subfields. and nothing helped...

Package.json

  "dependencies": {
    "gatsby": "^2.26.1",
    "gatsby-image": "^2.5.0",
    "gatsby-plugin-netlify": "^2.5.0",
    "gatsby-plugin-netlify-cms": "^4.4.0",
    "gatsby-plugin-purgecss": "^5.0.0",
    "gatsby-plugin-react-helmet": "^3.4.0",
    "gatsby-plugin-sass": "^2.5.1",
    "gatsby-plugin-sharp": "^2.8.0",
    "gatsby-remark-copy-linked-files": "^2.4.0",
    "gatsby-remark-images": "^3.5.1",
    "gatsby-remark-relative-images": "^2.0.2",
    "gatsby-source-filesystem": "^2.5.0",
    "gatsby-transformer-remark": "^2.10.0",
    "gatsby-transformer-sharp": "^2.6.0",
    "lodash": "^4.17.20",
    "lodash-webpack-plugin": "^0.11.4",
    "netlify-cms-app": "^2.13.3",
    "netlify-cms-lib-util": "^2.11.5",
    "netlify-cms-media-library-cloudinary": "^1.3.2",
    "netlify-cms-media-library-uploadcare": "^0.5.2",
    "node-sass": "^4.14.0",
    "prop-types": "^15.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.0.0",
  },

gatsby-config.js


plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        postCssPlugins: [
          require('tailwindcss'),
          require('./tailwind.config.js'), // Optional: Load custom Tailwind CSS configuration
        ],
      },
    },
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      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/img`,
        name: 'images',
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-relative-images',
            options: {
              name: 'uploads',
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 2048,
            },
          },
          {
            resolve: 'gatsby-remark-copy-linked-files',
            options: {
              destinationDir: 'static',
            },
          },
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    /*     {
      resolve: 'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
      options: {
        develop: true, // Activates purging in npm run develop
        purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
      },
    }, // must be after other CSS plugins */
    'gatsby-plugin-netlify', // make sure to keep it last in the array
  ],

stuartverschoyle commented 3 years ago

@GautierT I found that in your index.md file if you put quotes around index-page it all works for hot reload. I didn't have quotes around mine when i downloaded it, after days and days of looking, I had a look at another index.md and realised it had quotes.

Let me know if this works for you. `---

templateKey: 'index-page'

path: '/' `

GautierT commented 3 years ago

Hi @stuartverschoyle . Thanks ! But it doesn't change a thing... :( Every time i change something on http://localhost:8000/admin/#/collections/pages/entries/index then publish i have this error message.

aheruk-n-ix commented 3 years ago

I got stuck on the same problem. Any updates on the issue?

erezrokah commented 3 years ago

Hello 👋 This error usually happens when Gatsby fails to detect the type of an image file referenced in the markdown, thus inferring its type as a string. That in turns fails the image query.

Possible solutions are:

Defining a custom schema. See here for more information.
Use relative media folders in the CMS configuration to put media files in the same directory as the markdown file. That makes it easier for Gatsby to find the file. See here for an example configuration.

erezrokah commented 3 years ago

Closing this per my comment. Please comment on the issue if still relevant and using the suggested solutions doesn't work.

gatsbyjs / gatsby