Flutterでgraphql_codegenとfreezedを併用するとfreezedの型定義が正常に生成されない問題

2022年08月22日 15:36:45

解決法

ルートディレクトリのbuild.yaml (なければ作成)に、以下を追加する。

これにより、セパレータを任意の文字列に変更できる。

targets:
  $default:
    builders:
      graphql_codegen:
        options:
          namingSeparator: "__"

例えば、graphql_codegenでFetchFugaという名称でfugaに一覧を格納したデータを取得するクエリを定義し、flutter buildすると、デフォルト設定だと Query$FetchFuga$fuga といった型が生成される。

# fuga.graphql
query FetchFuga {
  fuga {
    data
  }
}

これをfreezedで使用する場合、

@freezed
class HogeState with _$HogeState {
  const factory HogeState({
    Query$FetchFuga$fuga? fuga,
  }) = _HogeState;
}

いった形になるが、これをflutter buildで生成すると、型名称内の$をfreezedが正常に解釈できず、fuga という型名称として定義してしまう (最後の$以降が型名称と解釈される)。

本来の型名はQuery$FetchFuga$fugaなのに、freezedはfuga として定義してしまうため、アプリ内部で型不一致が発生する。