GraphQL Typegen causes infinite loop of Fast Refresh

[kota65535]

I'm stuck in an infinite loop of Fast Refresh when I enabled type-checking in the way discussed in #37983 with GraphQL Typegen.

1. Dev server begins to watch gatsby-types.d.ts (This is due to the type-checking)
2. I change any file
3. Fast refresh runs and gatsby-types.d.ts is re-created
4. Because gatsby-types.d.ts is changed, Fast Refresh runs and then gatsby-types.d.ts is re-created
5. Because gatsby-types.d.ts is changed, Fast Refresh runs and then gatsby-types.d.ts is re-created
6. ...

[kota65535]

Sorry, I resolved it myself again.
Simply adding watchOptions for webpack config solved the problem.

import {GatsbyNode} from 'gatsby';

// cf. https://www.gatsbyjs.com/docs/how-to/custom-configuration/add-custom-webpack-config/
export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = async ({ actions }) => {
  actions.setWebpackConfig({
    watchOptions: {
      ignored: [`${__dirname}/src/gatsby-types.d.ts`]
    },
    plugins: [new ForkTsCheckerWebpackPlugin()]
  });
};

[kota65535]

Ah, this solution is not perfect.
Ignored files are not reloaded from the filesystem even if it's changed.
This means the type checker also does not recognize the change of gatsby-types.d.ts when I update a static GraphQL query.

The only thing I come up with is to compare old and new gatsby-types.d.ts content and not update if their contents are the same.

gatsby/packages/gatsby/src/utils/graphql-typegen/ts-codegen.ts

Line 163 in 8c9b0d4

await fs.outputFile(filename, result)

[kota65535]

A new problem. Because type-checking by fork-ts-checker-webpack-plugin precedes to GraphQL Typgen, once I delete gatsby-types.d.ts, the compile error prevents re-creation of gatsby-types.d.ts.
To solve this, apply the plugin except when the stage is develop-html as follows:

import { GatsbyNode } from 'gatsby';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';

// cf. https://www.gatsbyjs.com/docs/how-to/custom-configuration/add-custom-webpack-config/
export const onCreateWebpackConfig: GatsbyNode['onCreateWebpackConfig'] = async ({ actions, stage }) => {
  actions.setWebpackConfig({
    plugins: stage == 'develop-html' ? [] : [new ForkTsCheckerWebpackPlugin()]
  });
};

[kota65535]

I'm going to close this and start a new one in Ideas / Feature Request category.