【Gatsby.js】gatsby-config.jsで設定したブログのタイトルを表示する

2019-09-04

現在、 Gatsby.jsを使った爆速ブログを作っています。完成次第このブログをWordPressからGatsbyに移行させようと目論んでいます。

今回は、ブログのタイトルを各コンポーネント内に直接記述するのではなく、configファイルから読み込む方法について知ったのでメモします。

gatsby-config.jsでタイトルなどを設定

configファイル内に表示させたい情報を書きます。とりあえずブログタイトルと著者名を入れてみました。

module.exports = {
  siteMetadata: {
    title: 'とおまわりのブログ',
    author: 'とおまわり',
  },
  // 略(プラグインなど)
}

GraphiQLで確認

configファイルを保存したら、一旦停止して再度gatsby developを実行し、http://localhost:8000/___graphql を開きます。

デフォルトで入っているコメントをすべて削除し、下記の通り入力して実行ボタンをクリックします。

query {
  site {
    siteMetadata {
      title
    }
  }
}

実行結果にタイトルが表示されれば成功です。

ヘッダーにタイトルを表示

では今回はヘッダー(header.js)内で、先ほど設定したブログのタイトルを表示してみます。

gatbyから2つ、graphqlとuseStaticQueryをインポートします。

import React from 'react'
import { Link, graphql, useStaticQuery } from 'gatsby'

import headerStyles from './header.module.scss'

const Header = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <header className={headerStyles.header}>
      <h1>
        <Link className={headerStyles.title} to="/">
          {data.site.siteMetadata.title}
        </Link>
      </h1>
    </header>
  )
}

export default Header

やったー。表示されました。

参考元:Gatsby JS – The Great Gatsby Bootcamp [Full Tutorial]