module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: 'タイトル',
    description: '説明分',
  },
}

1. graphqlのインポート
2. GraphQLの実行結果をqueryに格納
3. コンポーネントでGraphQLの結果を受け取り、表示する

import React from "react"

// 1. graphqlのインポート
import { graphql } from "gatsby"

// 3. 2の結果がdataに自動的に渡されてくる
export default ({data}) => {
    //dataの内容を表示してみる
    console.log(data);
    return(
        <div>
            <h1>title:{data.site.siteMetadata.title}</h1>
            <div>description:{data.site.siteMetadata.description}</div>
        </div>
    )
}

// 2.siteMetadataの中からtitleとdescriptionを取得する
export const query = graphql`
    query {
        site {
            siteMetadata {
                title
                description
            }
        }
    }
`

// Header.js
import React from "react"
//1. useStaticQuery、graphqlのインポート
import { useStaticQuery,  graphql } from "gatsby"

export const Header= () => {
  // 2. useStaticQueryを使いgraphqlを実行して、dataに格納
  const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title          
          }
        }
      }
    ` 
  )

  //dataの内容を表示してみる
  console.log(data);

  return (
    // 3. dataの内容を表示する
    <h1>{data.site.siteMetadata.title}</h1>
  )
}

//index.js
import React from "react"
import {Header} from "../components/Header";

export default () => {
    // 4. index.jsでHeaderを表示する
    return(
        <div>
            <Header></Header>
        </div>
    )
}