GraphQLで取得したデータに型をつける
# プラグインの導入
yarn add gatsby-plugin-typegen
# プラグインの設定を追記
code:gatsby-plugin.js
module.exports = {
siteMetadata: {
title: "keisukesan",
},
plugins: [
"gatsby-plugin-emotion",
{
resolve: gatsby-plugin-typegen,
options: {
outputPath: src/__generated__/gatsby-types.d.ts
}
},
],
};
# gitignoreします
code:.gitignore
node_modules/
.cache/
public
__generated__
# 型の生成
gatsby develop時に自動で生成されます
# 型の適用
1. クエリに名前をつけます
2. PageProps型を利用します
3. GatsbyTypesから型をとってきます
型名はクエリ名 + Query の文字列になります
* 型を生成するため反映に少し時間がかかります。
なかなか反映されないときは gatsby developを再度実行 && エディタの再起動など試してください
code:index.tsx
import * as React from "react"
import {graphql, PageProps} from "gatsby";
// markup
const IndexPage = ({ data }: PageProps<GatsbyTypes.TopPageQuery>) => {
return (
<main>
<p>hello gatsby</p>
{JSON.stringify(data)}
</main>
)
}
export const query = graphql`
query TopPage {
site {
siteMetadata {
siteUrl
title
}
}
}
`
export default IndexPage
dataに型が効いてることが確認できると思います。