Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessing siteMetadata (gatsby-config.js) #1781

Closed
kbariotis opened this issue Aug 12, 2017 · 8 comments

Comments

@kbariotis
Copy link
Contributor

commented Aug 12, 2017

I have added a property siteUrl in gatsby-config.js and I am trying to access it in two places.

  1. layouts/index.js: where I need to set OG tags, etc..
  2. templates/blog-post.js: where I need to set share urls

What's the preferred way to access it in these places?

Thank you! Great work btw! 😎

@danoc

This comment has been minimized.

Copy link
Contributor

commented Aug 12, 2017

Hi @kbariotis – just ran into this myself and came here to find an answer. 😃

After poking around I've realized that it can be queried like this:

{
  site {
    siteMetadata {
      siteURL
      siteName
    }
  }
}

A corresponding gatsby-config.js would look like this:

module.exports = {
  siteMetadata: {
    siteURL: 'https://danoc.me/',
    siteName: 'Daniel O\'Connor',
  },
};

A little more info here:
https://www.gatsbyjs.org/docs/migrating-from-v0-to-v1/#configtoml-is-now-gatsby-configjs

@kbariotis

This comment has been minimized.

Copy link
Contributor Author

commented Aug 13, 2017

Thank you @danoc ! Is there a working example?

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2017

Search the example sites. We query siteMetadata a number of times.

@luketeaford

This comment has been minimized.

Copy link

commented Aug 14, 2017

I have searched the example sites and don't understand how siteMetadata is used. For example, in the starter site it looks to me like src/layouts/index.js has a hardcoded title. I am working around this like so:

import GatsbyConfig from '../../gatsby-config

<Helmet
  title={GatsbyConfig.siteMetadata.title}

That feels like it's not what is intended. I also read the migration guide and attempted to export a query as a constant. I get errors that props is not defined.

@oliverbenns

This comment has been minimized.

Copy link
Member

commented Aug 15, 2017

What is the benefit of using graphql for this? I'm also importing like @luketeaford as it's clear and simple, though I'm not sure on the consequences of doing so.

@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Aug 15, 2017

gatsby-config.js is used in node so trying to import it into the browser could potentially pull in very large node libraries depending on what else you add to your gatsby-config.js

If you want to import a metadata module, I'd suggest using a different file from gatsby-config.js e.g. data.yaml or whatever.

@Undistraction

This comment has been minimized.

Copy link
Contributor

commented Oct 15, 2017

Got to say I find the docs for this very confusing - in the tutorial you hard-code the title direct from the metadata, but what is really needed is a way to define different metadata for different pages. Last time I checked, using the same title and description across multiple pages is an SEO disaster. Obviously Helmet provides a nice solution for updating meta on the fly but it would make sense to me to offer a mechanism for defining all meta in a separate metadata.json or similar. At the moment I'm adding a pages prop on the metadata object in the Gatsby config and declaring per-page meta there, but it makes more sense to just load directly into the page from a json/yml file.

It seems to me that something that is as fundamental a metadata would benefit from having a simple api included. This kind of standardisation makes moving between projects much easier.

Rather than the site metadata query resolving to an object taken from within gatsby-config.js it should pull in a config.yml file containing a keyed list of pages. Something like:

pages:
  - 
    id:   home
    title:   Site / Home Page
    description:  The home page of the site
    keywords: home, site
  - 
    id:   about
    title:   Site / About Page
    description:  The about page of the site
    keywords: about, site

global: 
  siteName: Example,
  startYear: 2017 // For copyright smallprint.
@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Dec 19, 2017

Closing out older issues — please open a new issue if you need more help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.