Gatsby: Part 4 Tutorial - Cannot query field "siteMetadata" on type "Site" graphql/template-strings

[bradrar]

Description

I am now at part 4 of the gatsby tutorial and I followed the tutorial step by step but at the part of graphQL, this error appeared.

"Cannot query field "siteMetadata" on type "Site" graphql/template-strings"

this error appeared when I tried to put this code in src/pages/about.js:

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default ({ data }) => (
  <Layout>
    <h1>About {data.site.siteMetadata.title}</h1>
    <p>
      We're the only site running on your computer dedicated to showing the best
      photos and videos of pandas eating lots of food.
    </p>
  </Layout>
)

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

Expected result

The error shouldn't appear and I can continue on with the tutorial

Actual result

Failed to compile
./src/pages/about.js
Module Error (from ./node_modules/eslint-loader/index.js):

/home/bradrar/Websites Projects/Gatsby Tutorial/tutorial-part-four/src/pages/about.js
  18:9  error  Cannot query field "siteMetadata" on type "Site"  graphql/template-strings

✖ 1 problem (1 error, 0 warnings)

Environment

gatsby info --clipboard

  System:
    OS: Linux 4.15 Linux Mint 19 (Tara)
    CPU: (4) x64 Intel(R) Core(TM) i3-4005U CPU @ 1.70GHz
    Shell: 4.4.19 - /bin/bash
  Binaries:
    Node: 10.7.0 - /home/linuxbrew/.linuxbrew/bin/node
    Yarn: 1.10.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /home/linuxbrew/.linuxbrew/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 63.0
  npmPackages:
    gatsby: ^2.0.33 => 2.0.41 
    gatsby-plugin-emotion: ^2.0.6 => 2.0.6 
    gatsby-plugin-typography: ^2.2.1 => 2.2.1 
  npmGlobalPackages:
    gatsby-cli: 2.4.5

[dantehemerson]

Maybe you forgot to add this in your gatsby-config.js

  siteMetadata: {
    title: `Title from siteMetadata`,
  }

Note: Every time you update gatsby-config.js you have to restart the development server.

[bradrar]

here is the full code in my gatsby-config.js

module.exports = {
    siteMetadata: {
      title: `Title from siteMetadata`,
    },
    plugins: [
      `gatsby-plugin-emotion`,
      {
        resolve: `gatsby-plugin-typography`,
        options: {
          pathToConfigModule: `src/utils/typography`,
        },
      },
    ],
  }

Exactly the same as the tutorial in gatsby tutorial.

I also tried looking for something missing like a curly braces or comma because most of the time,that is the problem but I see it's not missing any .

[bradrar]

SOLVED!

@dantehemerson Thank you for commenting.

after reading your comment and typing my reply, I just realized my file is named gatsby.config.js
and not gatsby-config.js . After renaming it, it works as intended.

[ilyas-shah]

Sometimes you may forget to restart the gatsby development server because of that you won't be able to see changes in graphiql. Always make sure to restart the gatsby development server. For me, this was the issue.

[NataliaKaneshima]

Hey guy! I have a similar problem, we did everything the tutorial said, also what you guys said, however it still doesn't work

module.exports = {
siteMetadata: {
title: NEW,
author: Coelho

},
pathPrefix: "/blog",
plugins: [
'gatsby-plugin-sass'
]
}

[ghost]

@NataliaKaneshima try wrapping the with single quotes

`module.exports = {

siteMetadata: {
title: 'My website,
description: 'Page meta data description',
author: 'FluidBoxes v1.0 (www.fluidboxes.com)'
},

plugins: ['gatsby-theme-material-ui'],
};`