Gatsby: "gatsby-source-graphql" threw an error while running the sourceNodes lifecycle: Unexpected end of JSON input

[christopher-talke]

Description

During gatsby develop or gatsby build the gatsby-source-graphql plug-in seems to be throwing this particular error.

 ERROR #11321  PLUGIN

"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:

Unexpected end of JSON input

Steps To Reproduce

I'm not 100% sure how or why this is happening, but the repository is public that I am working from, and here is the latest commit:

• https://github.com/christopher-talke/moneill-2020

Expected Result

Theoretically the source node's should build and this error isn't thrown.

Things I Have Tried

• Downgrade 'gatsby-source-graphql' to a version that built correctly in the past, no result ❌
• Removed all .env variables from gatsby-config and gatsby-node, no result ❌
• Cleared node_modules multiple times with fresh dep. installs, no result ❌
• Ran gatsby clean and gatsby develop, no result ❌

Current Suspicions

I have a feeling that there may be a dep. conflict here, when I run npm ls apollo-link I noticed that apollo-boost and gatsby-source-graphql were on different versions for their apollo-link dep.

$ npm ls apollo-link
[email protected] D:\Code\moneill-2020
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]  deduped
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]  deduped
| | `-- [email protected]
| |   `-- [email protected]  deduped
| `-- [email protected]
|   `-- [email protected]  deduped
`-- [email protected]
  +-- [email protected]
  `-- [email protected]
    `-- [email protected]  deduped

Could this be a problem? If so, how can I resolve this?

Actual result

$ npm run dev

> [email protected] dev D:\Code\moneill-2020
> gatsby develop

success open and validate gatsby-configs - 0.030s
success load plugins - 1.032s
success onPreInit - 0.030s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.022s
success copy gatsby files - 0.055s
success onPreBootstrap - 0.021s
success createSchemaCustomization - 0.008s

 ERROR #11321  PLUGIN

"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:

Unexpected end of JSON input

  ServerParseError: Unexpected end of JSON input

  - JSON.parse

  - index.ts:131 
    [moneill-2020]/[apollo-link-http-common]/src/index.ts:131:23 

  - task_queues.js:97 processTicksAndRejections
    internal/process/task_queues.js:97:5

  - From previous event:

  - api-runner-node.js:534 Promise.catch.decorateEvent.pluginName
    [moneill-2020]/[gatsby]/src/utils/api-runner-node.js:534:9   

  - From previous event:

  - api-runner-node.js:533 
    [moneill-2020]/[gatsby]/src/utils/api-runner-node.js:533:14  

  - timers.js:461 processImmediate
    internal/timers.js:461:21

  - From previous event:

  - api-runner-node.js:525 
    [moneill-2020]/[gatsby]/src/utils/api-runner-node.js:525:13

  - From previous event:

  - api-runner-node.js:441 module.exports
    [moneill-2020]/[gatsby]/src/utils/api-runner-node.js:441:3

  - source-nodes.ts:97 _default
    [moneill-2020]/[gatsby]/src/utils/source-nodes.ts:97:9

  - source-nodes.ts:24 sourceNodes
    [moneill-2020]/[gatsby]/src/services/source-nodes.ts:24:9

  - interpreter.js:707 Interpreter.exec
    [moneill-2020]/[xstate]/lib/interpreter.js:707:27

  - interpreter.js:210 Interpreter.execute
    [moneill-2020]/[xstate]/lib/interpreter.js:210:22

  - interpreter.js:230 Interpreter.update
    [moneill-2020]/[xstate]/lib/interpreter.js:230:18

  - interpreter.js:131 
    [moneill-2020]/[xstate]/lib/interpreter.js:131:23

  - scheduler.js:60 Scheduler.process
    [moneill-2020]/[xstate]/lib/scheduler.js:60:13

  - scheduler.js:44 Scheduler.schedule
    [moneill-2020]/[xstate]/lib/scheduler.js:44:14

  - interpreter.js:127 Interpreter.send
    [moneill-2020]/[xstate]/lib/interpreter.js:127:29

  - interpreter.js:825 actor.id
    [moneill-2020]/[xstate]/lib/interpreter.js:825:23


warn The gatsby-source-graphql plugin has generated no Gatsby nodes. Do you need it?
success Checking for changed pages - 0.002s
success source and transform nodes - 9.424s
warn `createResolvers` passed resolvers for type `WP_MediaItem` that doesn't exist in the schema. Use `createTypes` to add the type before adding resolvers.
success building schema - 0.299s
info Total nodes: 36, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.005s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.073s
success update schema - 0.034s
success write out redirect data - 0.005s
success onPostBootstrap - 0.004s
info bootstrap finished - 13.808s
success onPreExtractQueries - 0.008s

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "wp" on type "Query".

If you don't expect "wp" to exist on the type "Query" it is most likely a typo.
However, if you expect "wp" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "wp" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "Query":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src\pages\index.js:31:5

failed extract queries from components - 0.363s
success write out requires - 0.040s
success run page queries - 0.062s - 3/3 48.62/s

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


D:\Code\moneill-2020\src\pages\index.js
  31:5  error  Cannot query field "wp" on type "Query"  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)


File: src\pages\index.js

failed Building development bundle - 6.626s

Environment

$ gatsby info --clipboard

  System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
  Binaries:
    Node: 12.19.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (85.0.564.70)
  npmPackages:
    gatsby: ^2.19.7 => 2.24.73
    gatsby-image: ^2.2.41 => 2.4.21
    gatsby-plugin-react-helmet: ^3.1.22 => 3.3.14
    gatsby-plugin-sharp: ^2.6.40 => 2.6.40
    gatsby-plugin-styled-components: ^3.1.19 => 3.3.14
    gatsby-source-filesystem: ^2.1.48 => 2.3.34
    gatsby-source-graphql: ^2.7.6 => 2.7.6
    gatsby-transformer-sharp: ^2.3.14 => 2.5.17
  npmGlobalPackages:
    gatsby-cli: 2.12.107

Package.json

{
  "name": "moneill-website-2020",
  "private": true,
  "description": "A new website for Mark O'Neill for 2020",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "dev": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "apollo-boost": "^0.4.9",
    "babel-plugin-styled-components": "^1.10.7",
    "dotenv": "^8.2.0",
    "gatsby": "^2.19.7",
    "gatsby-image": "^2.2.41",
    "gatsby-plugin-react-helmet": "^3.1.22",
    "gatsby-plugin-sharp": "^2.6.40",
    "gatsby-plugin-styled-components": "^3.1.19",
    "gatsby-source-filesystem": "^2.1.48",
    "gatsby-source-graphql": "^2.7.6",
    "gatsby-transformer-sharp": "^2.3.14",
    "graphql-tag": "^2.11.0",
    "react": "^16.12.0",
    "react-apollo": "^3.1.5",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "react-responsive-carousel": "^3.1.51",
    "styled-components": "^5.0.1"
  },
  "devDependencies": {
    "prettier": "^1.19.1"
  }
}

[vladar]

Hi @christopher-talke !

This error means that the client fails to parse the server response. Have you tried running the same GraphQL query against your remote server manually? Do you see the expected result?

Not sure if apollo-link version mismatch is causing this. I wish I could say more but there is no .env file in your repo, so I can't run it locally.

[christopher-talke]

Hi @vladar

I ended up figuring this out, after running gatsby build --verbose I found that it started throwing SERVER ERROR 500 NO RESPONSE errors. The GraphQL Server was operating correctly in the sense that I could query it, however, the schema was completely broken and was not visible even in the GraphQL playground for Wordpress using the WPGraphQL Plugin.

Reinstalling all the plugins, updating wordpress fixed the issue.

Thank you for taking the time to provide your feedback!

[JSinkler713]

I had to change a wordpress setting at the bottom of my WPGraphQL General Settings. Needed to check the box for Enable Public Introspection down at the bottom. I changed this and it worked for me with a similar error.