GraphQL does not seem to be working on templates

[insipx]

Node Version : v8.4.0
npm version: v5.3.0
OS: ArchLinux uname -r: 4.12.8-2-ARCH

Trying to query stuff from siteMetadata in one of my templates: https://github.com/ScrantonHacks/website/tree/master/src/templates/SocialShare
but it keeps coming back as undefined. Tried asking in the Gatsby discord, we couldn't seem to figure it out. My GraphQL query comes back fine in the GraphIQL

Not sure what the problem is.

gatsby-config.js

const autoprefixer = require('autoprefixer')

module.exports = {
  siteMetadata: {
    title: 'Scranton Hacks',
    hackathonDate: 'Date: TBA',
    hackYear: '2017',
    sponsorEmail: 'sponsorship@scrantonhacks.com',
    hackathonLocation: 'University of Scranton Byron',
    social: {
      facebook_link: 'https://facebook.com',
      twitter_link: 'https://twitter.com',
      instagram_link: 'https://instagram.com' 
    }
  },
  pathPrefix: '/gatsby-starter-grommet',
  plugins: [
    {
      resolve: 'custom-sass-loader',
      options: {
        postCssPlugins: [
          autoprefixer({
            browsers: ['last 2 versions'],
          })
        ]
      }
    }
  ],
}

package.json

{
  "name": "ScrantonHacks",
  "description": "Website for ScrantonHacks University of Scranton Club",
  "version": "0.1.0-alpha",
  "author": "Andrew Plaza <aplaza@liqudthink.net>",
  "bugs": {
    "url": "https://github.com/ScrantonHacks/website/issues"
  },
  "scripts": {
    "dev": "gatsby develop",
    "develop": "gatsby develop",
    "build": "gatsby build",
    "clean": "git clean -xfd .cache public/",
    "serve": "yarn run clean && yarn run build && gatsby serve",
    "deploy": "yarn run build -- --prefix-paths && gh-pages -d public"
  },
  "dependencies": {
    "autoprefixer": "^7.1.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "gatsby": "^1.1.0",
    "gatsby-link": "^1.3.2",
    "grommet": "^1.5.0",
    "node-sass": "^4.5.2",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-background-video-player": "^0.3.0",
    "react-dom": "^15.6.1",
    "react-fontawesome": "^1.6.1",
    "react-mailchimp-subscribe-scrantonhacks": "^1.0.1",
    "react-parallax": "^1.4.4",
    "rimp": "^0.1.4",
    "sass-loader": "^4.1.1",
    "typed.js": "^2.0.5"
  },
  "devDependencies": {
    "gh-pages": "^1.0.0"
  },
  "homepage": "https://github.com/alampros/gatsby-starter-grommet#readme",
  "keywords": [
    "scranton",
    "ScrantonHacks",
    "hackathon",
    "gatsby",
    "starter",
    "gatsby-starter"
  ],
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ScrantonHacks/website.git"
  }
}

have not modified any other config files.

[KyleAMathews]

Any console error?

[insipx]

@KyleAMathews no console errors, just the console.logs

however, on some refreshes i do get an 'invariant violation'

 Error: Invariant Violation: /home/insi/Projects/ScrantonHacks/website/src/templates/SocialShare/SocialShare.js not found in the store components: {"/home/insi/Projects/ScrantonHacks/website  /src/layouts/index.js":{"componentPath":"/home/insi/Projects/ScrantonHacks/website/src/layouts/index.js"},"/home/insi/Projects/ScrantonHacks/website/.cache/dev-404-page.js":{"componentPath"  :"/home/insi/Projects/ScrantonHacks/website/.cache/dev-404-page.js","query":"query Dev404Page {\n  allSitePage(filter: {path: {ne: \"/dev-404-page/\"}}) {\n    totalCount\n    edges {\n        node {\n        path\n      }\n    }\n  }\n}\n"},"/home/insi/Projects/ScrantonHacks/website/src/pages/404.js":{"componentPath":"/home/insi/Projects/ScrantonHacks/website/src/pages/404.js"  },"/home/insi/Projects/ScrantonHacks/website/src/pages/index.js":{"componentPath":"/home/insi/Projects/ScrantonHacks/website/src/pages/index.js"}}

[markmichon]

I might me misunderstanding, but it looks as though you're treating the templates more as components or pages and not "page templates." I think templates will only perform the queries if they go through a create action like createPage in the gatsby-node.js file. See the www directory of this repo, one of the more complex starters like the material design, or the most recent (part4) tutorial for specifics on how that works.

I'm not sure if components can make their own queries, but what you might want to do is write them to take in the data, and then perform the query on a page (like index, about, etc) where you can then pass the queried data down to that component.

[insipx]

@markmichon you are correct, I was using that wrong. Making the query from the index.js page fixed it.

Although, the documentation is confusing, since it describes graphQL queries being made from pages/templates/layouts

[KyleAMathews]

pages/templates/layouts

templates are "page templates". If the docs don't make that clear, we'd appreciate a PR making the distinction clearer!