🔎 Syntax Error: Expected Name, found <EOF>

When working on a Gastby app, I came across this error when running gatsby develop.

gatsby develop
 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Syntax Error: Expected Name, found <EOF>.

  GraphQLError: Syntax Error: Expected Name, found <EOF>.

  - graphql-runner.ts:90 GraphQLRunner.parse
    [project]/[gatsby]/src/query/graphql-runner.ts:90:34

  - graphql-runner.ts:173 GraphQLRunner.query
    [project]/[gatsby]/src/query/graphql-runner.ts:173:27

  - create-graphql-runner.ts:57
    [project]/[gatsby]/src/bootstrap/create-graphql-runner.ts:57:8

  - create-pages.js:70 Object.module.exports [as createPages]
    <project-location>/gatsby/create-pages.js:70:33


failed createPages - 0.043s

Only context I had was that error happened at create-pages.js:70:33 which is where the call to createPage method was included. I had a hint from the logs that it was a GraphQLError. So I traced back to which query was used to get data for the createPage method at that line, copied it to a GraphQL IDE and found the error!

Turns out, I missed a } in the GraphQL query responsible to pass data to the createPages API. The error message itself doesn't provide context as to which query had an error in it. And because the GraphQL query was wrapped in a template literal (`), the linting tools couldn't pick that up either. (Webstorm does a phenomenal job in syntax highlighting GraphQL code otherwise.)

I am not ashamed to admit that I spent more time than needed to debug this particular issue. After I found the root cause, I searched for Syntax Error: Expected Name, found <EOF>. and the first search result had the answer. 🙇🏽‍♂️

Lesson learned, while it's satisfying to debug and find the root cause, if you are short on time, nothing wrong in searching the internet for the solution.