手順
1. ts-node, typescript, gatsby-plugin-graphql-codegenをインストール
yarn add ts-node typescript gatsby-plugin-graphql-codegen
※ GatsbyでTypeScriptのサポートがデフォルトになったので、gatsby-plugin-typescriptは不要
2. gatsby-node.jsファイルを作成して以下を記述
gatsby-node.js
"use strict"
require("ts-node").register({
compilerOptions: {
module: "commonjs",
target: "esnext",
},
})
exports.createPages = require("./gatsby-node/index").createPages
3. tsconfig.jsonファイルを作成して以下を記述
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "esnext",
"strict": true,
"sourceMap": true,
"noImplicitAny": true,
"esModuleInterop": true,
"jsx": "react",
"lib": ["dom", "esnext"]
},
"include": ["./types/**/*", "./gatsby-node/**/*", "./src/**/*"]
}
4. typesディレクトリを作成して、その配下にgraphql-types.d.tsファイルを作成
5. gatsby-config.jsに以下を記述
gatsby-config.js
plugins: [
...,
{
resolve: `gatsby-plugin-graphql-codegen`,
options: {
fileName: `types/graphql-types.d.ts`,
},
}
]
詳細
TypeScript
メリット
- コンパイルエラーによってJavaScriptではフォローできない、スクリプト実行前の未然検知を可能にする。
- IDEと組み合わせることで型補完やエラーを表示させ開発体験を向上させることができる。
gatsby-plugin-graphql-codegen
- srcディレクトリ内で
import { graphql } from "gatsby"しているファイルの query 定義から、型定義が自動生成されます。 - 自動生成した型定義は
gatsby-config.jsのfileNameで指定したファイルに記述されます。
ディレクトリ構成
gatsby-node
└── index.ts
src
├── components
├── pages
├── styles
├── templates
└── utils
static
types
└── graphql-types.d.ts
.gitignore
.prettierignore
.prettierrc
gatsby-config.js
gatsby-node.js
package.json
package-lock.json
tsconfig.json
yarn.lock
コメント