blog2020-02-04Gatsby.jsでGraphQLのスキーマから型を生成して利用するTypeScript導入時はコンポーネント内に自分でPropsの型を書いていましたが、全てのコンポーネントでこれを行うと非常に面倒かつ、GraphQLのスキーマとオリジナルの型で二重に型を生成することになるので、自動生成するプラグインを導入してコンポーネントから利用します。gatsby-plugin-graphql-codegenの導入npmでインストールした後、生成するtypesファイルの宛先と監視するディレクトリを指定します。これらはGraphQLのクエリを生成する部分が指定してあればよいので、特に目立った構成変更をしていない自分の場合はREADMEの指定をそのまま利用しました。},出力先fileNameは監視するディレクトリdocumentPathsと同じ場所にしてしまうと自分を参照して無限ループになるので注意。これで、ローカルサーバーを起動した後にクエリに変更を行うとプロジェクト内で使える型データがtypes/graphql-types.tsに吐き出されます。コンポーネント内で型を利用する前回までは自分で型を書いていました。render自動生成した型を使うために、import文を1行書いて型情報を読み込みます。この場合、GraphQLのクエリに名称をつけておくと[Query名]Queryという名称で型情報が出力されます。各Functionの返り値を明確に意識する必要が出てきます。Managerでパスごとに読み込むscriptを変更してパフォーマンス劣化を防ぐ+Adsenseタグの配信方法はてなブログをはじめよう!gensobunyaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。