GraphQL / createPage issues, templates vs pages?

[alxndr]

I'm experienced with JS but Gatsby is new to me, and this is also my first foray into GraphQL...

I initially built an "SPA" site in React, which fetched CSVs and constructed client-side routes out of the data (hosted on GitHub Pages). Then I added Gatsby (without GraphQL) to build HTML payloads for each page.

(The site documents each concert played by a particular band; it uses the CSV data to generate pages for each concert date, each venue, and each song. Here is the live site: https://almost-dead.net )

Lately I have been trying to convert it to use GraphQL, because with the current setup, it takes a long time to update the data and then publish. However I have run into issues between creating pages in gatsby-node.js and defining the GraphQL queries which each page / component needs... I have managed to get some of the 'dynamic' pages working with gatsby develop, but then I'll break it as I work on the next dynamic page.

Repo & branch: https://github.com/alxndr/almost-dead-net/tree/spike/graphql

I'm attempting to define a URL structure like this:

• Home: / (which lists all Shows, using child components with static queries)
• Songs: /songs (which lists all Songs, also using child components with static queries)
• About: /about (static; no data)
• 'dynamic' pages:
  • ...for each Song: /song/${id}
  • ...for each Venue: /venue/${id}-${name}
  • ...for each Show: /show/${id} and also /show/embed/${id}

I have React components in src/pages/ to correspond to Home / Songs / About, and have been using createPages within gatsby-node.js to add the 'dynamic' pages for each Song / each Venue / each Show.

When I run gatsby develop or gatsby build I see this error:

[...]
success onPreExtractQueries - 0.002s

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Field "eq" is not defined by type "showsCsvFilterInput".

File: src/templates/show.js:154:38



  GraphQLError: Field "eq" is not defined by type "showsCsvFilterInput".

  - query-compiler.js:208 extractOperations
    [almost-dead-net]/[gatsby]/src/query/query-compiler.js:208:20

  - query-compiler.js:167 processQueries
    [almost-dead-net]/[gatsby]/src/query/query-compiler.js:167:45

  - query-compiler.js:78 compile
    [almost-dead-net]/[gatsby]/src/query/query-compiler.js:78:19

  - query-watcher.ts:222 updateStateAndRunQueries
    [almost-dead-net]/[gatsby]/src/query/query-watcher.ts:222:40

  - extract-queries.ts:18 extractQueries
    [almost-dead-net]/[gatsby]/src/services/extract-queries.ts:18:3

  - index.ts:63 bootstrap
    [almost-dead-net]/[gatsby]/src/bootstrap/index.ts:63:3

  - build.ts:82 build
    [almost-dead-net]/[gatsby]/src/commands/build.ts:82:53


failed extract queries from components - 2.700s

When using gatsby build, the command ends here. With gatsby develop it continues to print this warning:

warn The GraphQL query in the non-page component
"/Users/alxndr/workspace/almost-dead-net/src/templates/show-embed.js" will not be run.
warn The GraphQL query in the non-page component
"/Users/alxndr/workspace/almost-dead-net/src/templates/song.js" will not be run.
warn The GraphQL query in the non-page component
"/Users/alxndr/workspace/almost-dead-net/src/templates/venue.js" will not be run.
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery>
(https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component —
https://graphql.org/learn/queries/#fragments

(and then launches the local server)

Then in the browser, the Home page shows this error:

Field "eq" is not defined by type "showsCsvFilterInput".
ERROR #85901

/Users/alxndr/workspace/almost-dead-net/src/templates/show.js:154:38
There was an error in your GraphQL query:

Field "eq" is not defined by type "showsCsvFilterInput".

...if I dismiss the error popup, the Home page works fine (with its child components using Static Queries) as does the /songs page (also using StaticQuery). However the pages I defined using createPages are 404ing.

What's the proper way to define a page with an ID in the URL, which extracts other data related to that ID via GraphQL?

Thanks! —Alexander

[alxndr]

Aha, my issue appears to be that I was not ending my multiple uses of createPage with a semicolon. Leaving out the semicolons confuses GraphQL (?) so that it would complain about the use of {filter: {FIELD: {eq: VALUE}}}, e.g.:

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Field "eq" is not defined by type "showsCsvFilterInput".

File: src/templates/show.js:154:38



  GraphQLError: Field "eq" is not defined by type "showsCsvFilterInput".

  - query-compiler.js:208 extractOperations
    [almost-dead-net]/[gatsby]/src/query/query-compiler.js:208:20

  - query-compiler.js:167 processQueries
    [almost-dead-net]/[gatsby]/src/query/query-compiler.js:167:45

  - query-compiler.js:78 compile
    [almost-dead-net]/[gatsby]/src/query/query-compiler.js:78:19

  - query-watcher.ts:222 updateStateAndRunQueries
    [almost-dead-net]/[gatsby]/src/query/query-watcher.ts:222:40

  - extract-queries.ts:18 extractQueries
    [almost-dead-net]/[gatsby]/src/services/extract-queries.ts:18:3

  - index.ts:63 bootstrap
    [almost-dead-net]/[gatsby]/src/bootstrap/index.ts:63:3

  - build.ts:82 build
    [almost-dead-net]/[gatsby]/src/commands/build.ts:82:53

failed extract queries from components - 1.464s

After I added a semicolon to separate the back-to-back uses of createPage it now successfully builds!