gatsby-plugin-typegenでTypeScript化したgatsby-node.jsで呼び出したGraphQLにも型を生成するための対策

gatsby-plugin-typegen を使うことで build 時に GraphQL の型生成ができます。
しかし、 gatsby-node.js 側で呼び出した GraphQL に対しての型生成は行われません。
そのためにやったことを紹介します。

そもそも gatsby-node.js をTS化するやり方に関してはGatsby.jsのTypeScript化 2020の記事がわかりやすいです。
（gatsby-node.js側にtsファイルをimportすることによってTypeScript化しています。自分もこのやり方を採用）

ダミーページで GraphQL を呼び出す

アナログな手法なのですが gatsby-node 側で呼ばれないのであればコンポーネントおよびpageディレクトリのファイルで呼び出します。

dammy.tsx

import React, { VFC } from 'react';
import { graphql } from 'gatsby';

const Hoge: VFC = () => {
  return (
    <>
     // 省略されたJSX.Element
    </>
  );
};

// 実際には使わないし引数として受け取ったりしないがdammyとして記載しておく
export const query = graphql`
query HogeTable {
  allHoge {
    edges {
      node {
        data {
          createdAt
          descIconImg
          description
          publicUrl
          fullName
          refFullName
          refUnitName
        }
      }
    }
  }
}
`;

export default Hoge;

この状態で gatsby build に成功すれば 型 HogeTableQuery のような名前で
src/generated/gatsby-types.ts にデフォルト設定として生成されています。

プラグインが gatsby-node.js 側での型生成に対応していない

Gatsby公式サイト - gatsby-plugin-typegenの詳細を見てもnode側の型生成に対応してないことが記載されています。

いつか誰かがコミットしてくれるかもしれないので入れ違いにならないようチェックしてみてください。

gatsby-node.jsに関わるおまけの小ネタ

gatsby-nodeでcreatePagesを使ってページを生成するとページはできているしテンプレートも読み込まれているしTS設定周りとかも何度も確認したけれどページにテンプレートがあたっていない問題にぶち当たったんですが結果としてそれぞれのslugに小さいスペース入っていたことが原因でした。trim()で解決。

gatsby-node/index.ts

createPage({
            path: `/hoge/${slug}`, // string型のslugデータ末尾に小さいスペースが入っていることに気がつかなかったのでページが生成されなかった（おそらく空白スペース入りのURLとしては生成されていた）
            component: testComponent,
            context: {
              post: hogedata,
           },
   });

エラーとして拾われないのでわからなかったけれどソースデータ側でtrimができていなかったりするとこういうこともありますという事例です。