GatsbyのsiteMetadataにカスタムデータを追加する

  • Node.js 18.16.0
  • Gatsby 5.8.1

gatsby-config.ts

const config: GatsbyConfig = {
  siteMetadata: {
    siteUrl: "https://example.com",
    title: "Example Blog",
    myCustomData: myCustomData,
  },
  graphqlTypegen: true,
  // ...
}

gatsby-node.ts

export const createSchemaCustomization: GatsbyNode['createSchemaCustomization'] = ({ actions }) => {
  const { createTypes } = actions


  createTypes(`
    type MyCustomData {
      text: String
      flag: Boolean
    }
    type SiteSiteMetadata {
      myCustomData: MyCustomData
    }
  `)
}

mypage.tsx

import * as React from "react"
import {
  graphql,
  PageProps,
} from 'gatsby'
import { GetMyPageQuery } from '../gatsby-types'


const MyPage: React.FC<PageProps<GetMyPageQuery>> = (props) => {
  const data = props.data


  const site = data?.site
  const myCustomData = site?.siteMetadata?.myCustomData
  // ...
}


export const pageQuery = graphql`
  query GetMyPage {
    site {
      siteMetadata {
        myCustomData {
          text
          flag
        }
      }
    }
  }
`


export default MyPage

参考