Tutorial Part 4 - Unknown field `siteMetadata` on type `Site`

[kildareflare]

Followed the tutorial step by step. And I get the following error related to the graph query.

  GraphQL Error Unknown field `siteMetadata` on type `Site`
  file: C:/Code/Projects/bss3/prt4-data/src/layouts/index.js

  1 |
  2 |   query LayoutQuery {
  3 |     site {
> 4 |       siteMetadata {
    |       ^
  5 |         title
  6 |       }
  7 |     }
  8 |   }

As per tutorial, this is defined in gatsby-config.js which is in the root.

Repeated more than once, starting from scratch.
npm: 5.4.2
node: 6.11.3

[kildareflare]

I resolved this by including the following line in layouts\index.js
import graphql from 'graphql'

But, weirdly, if I then remove that line, it still works....

[KyleAMathews]

Perhaps you didn't restart gatsby develop after adding gatsby-config.js? The schema doesn't get rebuilt until then so any queries to siteMetadata would fail.

[sebastienfi]

import graphql from 'graphql' doesn't seems either required nor a good idea as it will include a 400Kb file to your build. Kyle's suggestion is the way to go!

[tcjcodes]

I had the same issue- my project was fine but had to upgrade my version of npm to the latest 5.5.1, delete and re-install node_modules. I already had node v6.11.4 installed. Works now!

[martinpsz]

Followed part 4 instructions exactly...in fact, I copied and pasted them and restarted gatsby develop. Received the following error:

×
TypeError: Cannot read property 'site' of undefined
new _default
src/layouts/index.js:20
17 | >
18 | <Link to={/}>
19 | <g.H3 marginBottom={rhythm(2)} display={inline-block}>

20 | {data.site.siteMetadata.title}
21 | </g.H3>
22 |
23 | <Link className={linkStyle} to={/about/}>

Any ideas on how to fix. Have latest version 8.9.1 of node and 5.5.1 of npm.

[KyleAMathews]

If you log the data what do you get? What happens when you try the same query in graphiql?

[martinpsz]

This is the error that shows up when enter "gatsby develop":

GraphQL Error There was an error while compiling your site's GraphQL queries.
Invariant Violation: GraphQLParser: Unknown field siteMetadata on type Site. Source: document AboutQuery file: GraphQL request.

Haven't explored graphiql.

[KyleAMathews]

What is the path to your gatsby-config.js? Could you paste it here?

[martinpsz]

gatsby-config.js is located on the same level as my 'src' file. The files are .cache, .vscode, node_modules, public, src, .gitignore, gatsby.config.js and so on. This is the path:
~/Desktop/tutorial-part-four/gatsby.config.js

[martinpsz]

Hi Kyle,

Any thoughts on how I can address the issue I raised?

Thanks for your work on Gatsby JS. I am new to static site generators and am looking forward to working with Gatsby.

[kildareflare]

Hi @martinpsz , this is probably not your problem, since you are following the tutorial. However for future reference...

When I see that error, 9 times out of 10 it is because another graphQL query in my app is broken and does not compile. E.g. my app pulls data from prismic. If I have not formatted it correctly, I will see the error you are seeing. What I do then, is start graphiql and format the query until it works. And then update the query in my source to match.

you could start by checking that your metadata query works.
You can find graphiql here: localhost:8000/___graphql

CTRL + SPACE will show a list of possible fields
CTRL + ENTER will run the query

[kildareflare]

@martinpsz have you got any further with this?

[Jaikant]

@martinpsz I hit this precise issue, when a different query failed.
The query failed because the JSON was malformed. JSON does not support trailing commas.

[ro-abramov]

@martinpsz I think its too late, but I still want to reply. Maybe someone else find it useful. The point is that you name your file gatsby.config.js and not gatsby-config.js. Have the same issue, and after renaming everything works as expected.