Gatsby: 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 | /}>
19 | inline-block}>

20 | {data.site.siteMetadata.title}
21 |
22 |
23 | /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.

[snak1t]

@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.

[javlc]

If it helps someone else:

I had the same error as mentioned in this thread, but the point is that my gatsby-config file was correct name, correct location path, etc.

The problem I had was in the about.js page query, I had siteMedatata instead of siteMetadata, in the query.

This was my version of "missing semicolon" and could not debug it.

[mccrodp]

I am getting this just now also, I had ran:
node -v v8.4.0
npm -v 5.3.0
So I ran: npm install npm@latest -g to get npm v 5.6.0, deleted node_modules, re-ran npm install and then gatsby develop and....just stopped. Still getting the error :(

I have NVM installed, so running nvm install 9.5.0 to ensure the correct NPM is used, nvm use 9.5.0 and re-ran npm install --global gatsby-cli and still seeing the error too.

[mccrodp]

🤕 🌴 In my case it was path to my gatsby-config.js that was wrong, make sure it is in the root and not /src/ dir as it was in my case. You see this error when it's in the wrong dir, thanks Kyle!

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

[KyleAMathews]

I added this PR https://github.com/gatsbyjs/gatsby/pull/4101 that checks if your gatsby-config.js is in the src directory and politely tells you to move it to the correct place :-) hopefully that helps people in the future who make this very understandable mistake!

[fahrradflucht]

@KyleAMathews This addresses one issue but for me and a couple of other people the solution was to rename gatsby-config.js to gatsby.config.js an idea why that is? This seems to be against everything that is noted anywhere...

---

Edit:
Sorry for the confusion. This fixed nothing for me. I just didnt get build error anymore because the typescript plugin wasnt found and therefor non of my components got build. Still the same issue...

---

Edit 2:
Solved it! I was importing graphql-tag (primarly for typescript to be happy) since it was a default export I thought I was free to name it gql. But it looks like gatsby's magic breaks when it is not named graphql.

[amitrathik]

🤕 🌴 In my case it was path to my gatsby-config.js that was wrong, make sure it is in the root and not /src/ dir as it was in my case. You see this error when it's in the wrong dir, thanks Kyle!

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

I stumbled into this issue today. Turned out i had the file set to "gatsby.config.js". Once I switched it to gatsby-config.js the error was resolved...

[rfox12]

Does the polite warning occur before any other checks? I didn't notice it and I ran a brand new Gatsby 2.0 and ran into this where I had the config inside src

[donniecode1983]

@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.

Thanks! This helped me out when I ran into this error. I forgot the "-" between gatsby and config