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

# TL;DR

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

# 症状

TypeScriptなしで立ち上げたGatsbyJSのプロジェクトに、コード中のGraphQLから型を生成をする[gatsby-plugin-graphql-codegen](https://www.gatsbyjs.org/packages/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'.
...
```

# 原因と対処

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

```ts: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`から型を生成しないようにしてみます。

```js: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以上にあげたら無事解決しました。