2022-07-24

Gatsbyでブログ作る④〜GraphQL Typegen

目次

詳しくは公式

Gatsby ではプラグインを使用して様々な機能を使うことができます。 流れとしては下記の通り

  1. npm を使用してプラグインをインストール。
  2. gatsby-config.jsファイルでプラグインを構成。
  3. 必要に応じて、プラグイン機能を使用。

GraphQL Typegen

gatsby-plugin-graphql-codegenが使えるとのことで見に行ったらgatsby-plugin-typegen使ってねって言われていた。

Hi there ? Are you just looking for a way to generate graphql types for your graphql queries? gatsby-plugin-graphql-codegen is what you want. However, other maintainers and I haven't been able to keep this repo up to shape. Please have a look at @cometkim's graphql-plugin-typegen which does almost the same thing & better maintained. Still, ideas & PRs are all welcomed. If you'd like to help maintain this project, please feel free to reach out. Thank you, have a great day
https://github.com/d4rekanguok/gatsby-typescript

と、思っていろいろ調べていたら v4.15.0 でGraphQL Typegenの機能として提供されることとなったのらしいので、そちらを使う。

  1. gatsby develop する
  2. src/gatsby-types.d.ts のファイルが自動生成される

前提条件として gatsby-config.js で graphqlTypegen が true となっている必要があります。

module.exports = {
  graphqlTypegen: true,
}

あとはクエリをかいていきます。

import * as React from 'react'
import { graphql, PageProps } from "gatsby"
import Layout from '../components/layout'

const IndexPage = ({ data }: PageProps<Queries.IndexPageQuery>) => {
  return (
    <Layout>
      <p>{data.site?.siteMetadata?.title}</p>
    </Layout>
  )
}

export const query = graphql`
  query IndexPage {
    site {
      siteMetadata {
        title
      }
    }
  }
`

export default IndexPage

自動型生成がきかなくなるので、コンポーネント名(export default IndexPage)とクエリ名(query IndexPage)は一致させる必要があります。またパスカルケースが推奨されています。 IndexPage の生成した型定義は IndexPageQuery のように Query をつけた名称で使います。 PageProps を import して、引数に { data }: PageProps<Queries.IndexPageQuery> を設定します。これで取得したデータが data に格納されます。実際にデータを表示する時は下記のようになります。

<p>{data.site?.siteMetadata?.title}</p>
© 2019 USA GIJUTSU.