GraphQL errors on new clone

[ZBlocker655]

Bug report

What is the current behavior?

On a clean clone, ran npm install and gatsby develop. Receiving multiple GraphQL errors of which the following is a sample:

 ERROR #85922  GRAPHQL

There was an error in your GraphQL query:

      Field "featuredimage" must not have a selection since type "String" has no subfields.

      This can happen if you e.g. accidentally added { } to the field "featuredimage". If you didn't expect
"featuredimage" to be of type "String" make sure that your input source and/or plugin is correct.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\components\BlogRoll.js:96:33

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions

If the current behavior is a bug, please provide the steps to reproduce.

• Clone repo
• Run npm install
• Run gatsby develop

What is the expected behavior?

Development site starts correctly and can be served from localhost.

Other relevant information:

Node.js version: 18.10.0
NPM/Yarn version: 8.19.2
Operating System: Windows 10
Additional tools: Gatsby CLI 4.24 (installed via choco)

[maxcell]

Thanks for this report @ZBlocker655! We will investigate from there, what happens when you run npm run start or did you only use gatsby develop?

I think I might have a suspicion that this is a remnant of an issue that was long opened #770.

[ZBlocker655]

More context: the first time I did this I followed recommendations and deployed to Netlify first and verified that site and CMS were up and running fine. It was only when I cloned locally for local development that it fell over as I described above. And I believe at that time I did run npm run build because I was following instructions in the readme.

[ZBlocker655]

I did not try to edit anything from the CMS on Netlify. I have since taken down the Netlify site so I can focus on getting it running locally.

[intelcoder]

I just clone it with use this template button and when I just run yarn develop. It shows error message like the image

[maxcell]

@intelcoder Howdy can you give the system stats for what you're running? Operating system, node version and package manager version?

I'm trying to recreate this error but I can't seem to reproduce it on three different systems from a fresh install, using the same node versions and everything. Locally this error never occurs for me. Could someone provide their repository for me so I can investigate it from there? Maybe there was a missing update in between installs?

[ZBlocker655]

Ran it again, with the following:

• Brand-new clone of this repository.
• Windows info:
  • Edition: Windows 10 Pro
  • Version: 21H2
  • Installed on: ‎3/‎21/‎2021
  • OS build: 19044.2130
  • Experience: Windows Feature Experience Pack 120.2212.4180.0
• NVM 1.1.9
• Node 18.10.0
• NPM 8.19.2
• Gatsby CLI 4.24.0

Results of npm install:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/uuid
npm WARN   uuid@"^8.0.0" from the root project
npm WARN   1 more (gatsby)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer uuid@"^3.3.2" from [email protected]
npm WARN node_modules/netlify-cms-backend-test
npm WARN   netlify-cms-backend-test@"^2.11.3" from [email protected]
npm WARN   node_modules/netlify-cms-app
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/uuid
npm WARN   peer uuid@"^3.3.2" from [email protected]
npm WARN   node_modules/netlify-cms-backend-test
npm WARN     netlify-cms-backend-test@"^2.11.3" from [email protected]
npm WARN     node_modules/netlify-cms-app
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/uuid
npm WARN   uuid@"^8.0.0" from the root project
npm WARN   1 more (gatsby)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer uuid@"^3.3.2" from [email protected]
npm WARN node_modules/netlify-cms-lib-auth
npm WARN   netlify-cms-lib-auth@"^2.4.2" from [email protected]
npm WARN   node_modules/netlify-cms-app
npm WARN   6 more (netlify-cms-backend-azure, ...)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/uuid
npm WARN   peer uuid@"^3.3.2" from [email protected]
npm WARN   node_modules/netlify-cms-lib-auth
npm WARN     netlify-cms-lib-auth@"^2.4.2" from [email protected]
npm WARN     node_modules/netlify-cms-app
npm WARN     6 more (netlify-cms-backend-azure, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/uuid
npm WARN   uuid@"^8.0.0" from the root project
npm WARN   1 more (gatsby)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer uuid@"^3.3.2" from [email protected]
npm WARN node_modules/netlify-cms-widget-file
npm WARN   peer netlify-cms-widget-file@"^2.9.2" from [email protected]
npm WARN   node_modules/netlify-cms-widget-image
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/uuid
npm WARN   peer uuid@"^3.3.2" from [email protected]
npm WARN   node_modules/netlify-cms-widget-file
npm WARN     peer netlify-cms-widget-file@"^2.9.2" from [email protected]
npm WARN     node_modules/netlify-cms-widget-image
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^17.0.0" from the root project
npm WARN   72 more (@emotion/core, @emotion/react, @emotion/styled, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@">=15.5 <=16.x" from [email protected]
npm WARN node_modules/react-codemirror2
npm WARN   react-codemirror2@"^7.0.0" from [email protected]
npm WARN   node_modules/netlify-cms-widget-code
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@">=15.5 <=16.x" from [email protected]
npm WARN   node_modules/react-codemirror2
npm WARN     react-codemirror2@"^7.0.0" from [email protected]
npm WARN     node_modules/netlify-cms-widget-code
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^17.0.0" from the root project
npm WARN   72 more (@emotion/core, @emotion/react, @emotion/styled, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN node_modules/gatsby/node_modules/react-server-dom-webpack
npm WARN   react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN   node_modules/gatsby
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN   node_modules/gatsby/node_modules/react-server-dom-webpack
npm WARN     react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from [email protected]
npm WARN     node_modules/gatsby
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/netlify-cms-core/node_modules/ajv
npm WARN   ajv@"8.1.0" from [email protected]
npm WARN   node_modules/netlify-cms-core
npm WARN     netlify-cms-core@"^2.55.2" from [email protected]
npm WARN   1 more (ajv-errors)
npm WARN Could not resolve dependency:
npm WARN node_modules/netlify-cms-core/node_modules/ajv-keywords
npm WARN   ajv-keywords@"^5.0.0" from [email protected]
npm WARN   node_modules/netlify-cms-core
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/ajv
npm WARN   peer ajv@"^8.8.2" from [email protected]
npm WARN   node_modules/netlify-cms-core/node_modules/ajv-keywords
npm WARN     ajv-keywords@"^5.0.0" from [email protected]
npm WARN     node_modules/netlify-cms-core
npm WARN deprecated @types/[email protected]: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 1962 packages, and audited 1963 packages in 1m

333 packages are looking for funding
  run `npm fund` for details

44 vulnerabilities (23 moderate, 21 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

Results of npm run build:

> [email protected] build
> npm run clean && gatsby build


> [email protected] clean
> gatsby clean

info Deleting .cache, public, C:\Users\Zach\Projects\gatsby-starter-netlify-cms\node_modules\.cache\babel-loader,
C:\Users\Zach\Projects\gatsby-starter-netlify-cms\node_modules\.cache\terser-webpack-plugin
info Successfully deleted directories

success compile gatsby files - 1.636s
success load gatsby config - 0.103s
success load plugins - 8.798s
warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying the document head. Learn more at
https://gatsby.dev/gatsby-head
success onPreInit - 0.014s
success initialize cache - 0.185s
success copy gatsby files - 1.161s
success Compiling Gatsby Functions - 1.851s
success onPreBootstrap - 1.924s
success createSchemaCustomization - 0.011s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.322s
info Writing GraphQL type definitions to C:/Users/Zach/Projects/gatsby-starter-netlify-cms/.cache/schema.gql
success building schema - 0.431s
success createPages - 0.100s
success createPagesStatefully - 0.132s
info Total nodes: 135, SitePage nodes: 20 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success onPreExtractQueries - 0.001s

 ERROR #85922  GRAPHQL

There was an error in your GraphQL query:

      Field "featuredimage" must not have a selection since type "String" has no subfields.

      This can happen if you e.g. accidentally added { } to the field "featuredimage". If you didn't expect
"featuredimage" to be of type "String" make sure that your input source and/or plugin is correct.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\components\BlogRoll.js:96:33

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions


 ERROR #85922  GRAPHQL

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.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\templates\index-page.js:122:15

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions


 ERROR #85922  GRAPHQL

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.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\templates\index-page.js:136:19

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions


 ERROR #85922  GRAPHQL

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.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\templates\product-page.js:158:15

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions


 ERROR #85922  GRAPHQL

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.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\templates\product-page.js:167:19

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions


 ERROR #85922  GRAPHQL

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.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\templates\product-page.js:182:19

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions


 ERROR #85922  GRAPHQL

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.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\templates\product-page.js:190:19

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions


 ERROR #85922  GRAPHQL

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.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\templates\product-page.js:198:19

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions


 ERROR #85922  GRAPHQL

There was an error in your GraphQL query:

      Field "full_image" must not have a selection since type "String" has no subfields.

      This can happen if you e.g. accidentally added { } to the field "full_image". If you didn't expect "full_image" to
 be of type "String" make sure that your input source and/or plugin is correct.
      However, if you expect "value" to exist, the field might be accessible in another subfield. Please try your query
in GraphiQL.

      It is recommended to explicitly type your GraphQL schema if you want to use optional fields.

File: src\templates\product-page.js:210:20

See our docs page for more info on this error: https://gatsby.dev/creating-type-definitions

failed extract queries from components - 2.043s

[matheusdamiao]

@intelcoder Howdy can you give the system stats for what you're running? Operating system, node version and package manager version?

I'm trying to recreate this error but I can't seem to reproduce it on three different systems from a fresh install, using the same node versions and everything. Locally this error never occurs for me. Could someone provide their repository for me so I can investigate it from there? Maybe there was a missing update in between installs?

I'm getting the same error as @ZBlocker655 described above, when trying to develop locally either by npm run start or gatsby develop.
@maxcell This is my cloned repo https://github.com/matheusdamiao/blog-netlify-cms-default. You can totally use it.

@ZBlocker655 the warning messages from npm install I guess you can fix by passing a --legacy-peer-deps flag when runing a npm install command.

[saladynsan]

I have the same problem, did you solve it?

[D6NDesigns]

I have the same problem, did you solve it?

Me also, was this ever solved?

[ZBlocker655]

I solved the warning messages as @matheusdamiao indicated but I never did solve the underlying issue. I am no longer actively working on this and I decided to go with first a different Gatsby template and later a different static site generator altogether (not because of this.)

[regalius]

Bumping gatsby-remark-relative-images to "^0.3.0" and adding these changes to gatsby-node.js worked for me

[ljpernic]

I am struggling with the same problem. I tried the suggestion that regalius suggested, but I couldn't get it to work. Has anybody figured out a solution?

I had it working for a while in December (I think maybe I had rolled back my Gatsby version? Or tried an older version of the starter?). I set up a fresh version today with the one-click set-up and that worked great, but when I created a local instance, it didn't work with develop or build. If anybody has any suggestions, I'd be grateful!

Edit: From what I can tell, the images are appearing correctly in the blog but not anywhere else. The difference is that in the blog, the image fragment doesn't have any subfields--instead those subfields are being implemented inside of PreviewCompatibleImage using imageInfo.

When I console log the frontmatter, it returns everything, including paths for images like: "image":"..\..\static\img\project_two.png". So, I wonder if things could be being done out of order? Whatever is supposed to be modifying the image field with subfields is happening after its image nodes are supposed to be created?

Also, EventRoll on index-page seems to break the whole thing. Removing it still gives the string errors, but with it it won't even load the page. Says it can't find image data for an image that doesn't exist. But when I go into EventRoll and console.log(post.frontmatter.featuredimage), it returns "......\static\img\chemex.jpg". So it knows the path of the image--it just isn't recognizing it as an image.

It uses PreviewCompatibleImage to try to show the image. Console logging the image in PreviewCompatibleImage gives "....\static\img\project_four.png" and the other three project images as well. So the string is making it all the way through. Should it be converted to an object here but isn't? Or is it that the path is wrong?

The error for EventRoll remains that it can't read properties of undefined (reading 'gatsbyImageData') inside the PreviewCompatibleImage in EventRoll. So I think they aren't talking to each other right. The other images still have the problem of being considered strings, but they might be able to be fixed by using code from the blog-post templates, since that seems to work.

Right now, I am thinking it is something to do with the prop or string functionality using .shape. I think the purpose of it is so that it works right with the netlify CMS stuff (which is why Netlify builds it correctly). When it is a string, the Netlify CMS must convert it correctly when it builds it, but when you build it locally, that Netlify CMS functionality isn't there, so it only sees it as a string.

What do y'all think?

[timmy224]

I had the same issue and tried aforementioned troubleshooting steps to no avail. What did work for me was instead of using gatsby-remark-relative-images-v2 plugin, I used this instead: https://www.npmjs.com/package/gatsby-plugin-netlify-cms-paths to get it working locally.

See gatsbyjs/gatsby#5990 (comment).