When working on a Gastby app, I came across this error when running
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.