TL;DR

gatsby-transformer-sharpとgatsbyのバージョンが合っていないのが原因でした。
Gatsbyが2.12.1以上ならgatsby-transformer-sharpを2.3.7以上にすれば直ります。

症状

TypeScriptなしで立ち上げたGatsbyJSのプロジェクトに、コード中のGraphQLから型を生成をするgatsby-plugin-graphql-codegenを入れたところ、生成された型定義ファイルでDuplicate identifierエラーが頻発しました。

ERROR in /Users/some_user/some-project/graphql-types.ts(2786,13):
TS2300: Duplicate identifier 'GatsbyImageSharpFixedFragment'.

ERROR in /Users/some_user/some-project/graphql-types.ts(2786,13):
TS2300: Duplicate identifier 'GatsbyImageSharpFixed_TracedSvgFragment'.

ERROR in /Users/some_user/some-project/graphql-types.ts(2786,13):
TS2300: Duplicate identifier 'GatsbyImageSharpFixed_WithWebpFragment'.
...

原因と対処

生成された型定義ファイルを見てみると、宣言が重複していることが分かりました。

hoge.ts

export type GatsbyImageSharpFixedFragment = Pick<ImageSharpFixed, 'base64' | 'width' | 'height' | 'src' | 'srcSet'>;

export type GatsbyImageSharpFixed_TracedSvgFragment = Pick<ImageSharpFixed, 'tracedSVG' | 'width' | 'height' | 'src' | 'srcSet'>;

...

export type GatsbyImageSharpFixedFragment = Pick<ImageSharpFixed, 'base64' | 'width' | 'height' | 'src' | 'srcSet'>;

export type GatsbyImageSharpFixed_TracedSvgFragment = Pick<ImageSharpFixed, 'tracedSVG' | 'width' | 'height' | 'src' | 'srcSet'>;
...

ここのタイプ名はGraphQLの型に対応するはずなので、試しにgrepしてみます。

$ grep -r 'fragment GatsbyImageSharpFixed' ./

結果は以下のようになりました。

.//node_modules/gatsby-transformer-sharp/fragments.js:  fragment GatsbyImageSharpFixed on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/fragments.js:  fragment GatsbyImageSharpFixed_tracedSVG on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/fragments.js:  fragment GatsbyImageSharpFixed_withWebp on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/fragments.js:  fragment GatsbyImageSharpFixed_withWebp_tracedSVG on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/fragments.js:  fragment GatsbyImageSharpFixed_noBase64 on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/fragments.js:  fragment GatsbyImageSharpFixed_withWebp_noBase64 on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/src/fragments.js:  fragment GatsbyImageSharpFixed on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/src/fragments.js:  fragment GatsbyImageSharpFixed_tracedSVG on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/src/fragments.js:  fragment GatsbyImageSharpFixed_withWebp on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/src/fragments.js:  fragment GatsbyImageSharpFixed_withWebp_tracedSVG on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/src/fragments.js:  fragment GatsbyImageSharpFixed_noBase64 on ImageSharpFixed {
.//node_modules/gatsby-transformer-sharp/src/fragments.js:  fragment GatsbyImageSharpFixed_withWebp_noBase64 on ImageSharpFixed {
.//.cache/fragments/image-sharp-fragments.js:  fragment GatsbyImageSharpFixed on ImageSharpFixed {
.//.cache/fragments/image-sharp-fragments.js:  fragment GatsbyImageSharpFixed_tracedSVG on ImageSharpFixed {
.//.cache/fragments/image-sharp-fragments.js:  fragment GatsbyImageSharpFixed_withWebp on ImageSharpFixed {
.//.cache/fragments/image-sharp-fragments.js:  fragment GatsbyImageSharpFixed_withWebp_tracedSVG on ImageSharpFixed {
.//.cache/fragments/image-sharp-fragments.js:  fragment GatsbyImageSharpFixed_noBase64 on ImageSharpFixed {
.//.cache/fragments/image-sharp-fragments.js:  fragment GatsbyImageSharpFixed_withWebp_noBase64 on ImageSharpFixed {

これを見る限り、画像を処理するgatsby-transformer-sharpが怪しそうです。
複数のファイルに同じ型宣言があるのが怪しいので、試しに.cacheから型を生成しないようにしてみます。

gatsby-config.js


module.exports = {
  /* ... */
  plugins: [
    /* ... */
    {
      resolve: `gatsby-plugin-graphql-codegen`,
      options: {
        documentPaths: [
          './src/**/*.{ts,tsx}',
          // './.cache/fragments/*.js',
          './node_modules/gatsby-*/**/*.js'
        ]
      },
    },
    `gatsby-plugin-ts`
  ],
}

こうするとエラーが解消されました。.cache/fragments/image-sharp-fragments.jsが原因のようです。
そもそも、.cache以下を何故含んでいるのか不思議だったのでgatsby-transformer-sharpのリポジトリを見ていると、GatsbyJSが以前.cacheに一部のファイルをコピーして参照していることが分かりました( https://github.com/d4rekanguok/gatsby-typescript/pull/25 )。
ここでgatsby-transform-sharpを見てみると、https://github.com/gatsbyjs/gatsby/pull/19933 で.cacheへのコピーをやめたことが分かりました。コミットログを見る限り2.3.7でGatsbyJSの仕様変更に対応したようです( https://github.com/gatsbyjs/gatsby/compare/gatsby-transformer-sharp@2.3.6...gatsby-transformer-sharp@2.3.7 )。筆者のバージョンは2.3.6だったので、2.3.7以上にあげたら無事解決しました。

gatsby-plugin-graphql-codegenが生成した型定義で"Duplicate identifier"が出るときの対処

TL;DR

症状

原因と対処