Incorrect __typename Generation on Custom Type

[jkeczan]

Before opening, please confirm:

• I have installed the latest version of the Amplify CLI (see above), and confirmed that the issue still persists.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

How did you install the Amplify CLI?

npm

If applicable, what version of Node.js are you using?

18.18.2

Amplify CLI Version

12.10.1

What operating system are you using?

Mac

Amplify Codegen Command

codegen

Describe the bug

When we run Amplify codegen setup for Angular, we are getting incorrect __typename generation. Currently, on a single type only, we are getting __typename: string instead of __typename: 'TypeName'

Expected behavior

When we generate Angular Code with Codegen, the __typename should be set to the name of the custom type it belongs too

Reproduction steps

Run Amplify CodeGen with the schema listed below.

GraphQL schema(s)

# Put schemas below this line

getWidgets: [WidgetDefnition]

enum WidgetType {
    ReportingLocationTrendsWidget
    ReportingLocationTimeSeriesWidget
    ReportingLocationKPIGaugeWidget
    ReportingLocationMultiTrendGraphWidget
    GaugeLocationsWidget
}

enum FlowDirection {
    IN
    OUT
}

interface Widget {
    id: ID
    order: Int
    widget_type: WidgetType
    name: String
    intent_id: String # if associated to an intent
    rows: String
    columns: String
}

enum WidgetType {
    ReportingLocationTrendsWidget
    ReportingLocationTimeSeriesWidget
    ReportingLocationKPIGaugeWidget
    ReportingLocationMultiTrendGraphWidget
    GaugeLocationsWidget
}

union WidgetDefinition = ReportingLocationKPIGaugeWidget | ReportingLocationMultiTrendGraphWidget

type ReportingLocationKPIGaugeWidget implements Widget {
    id: ID
    order: Int
    widget_type: WidgetType
    name: String
    intent_id: String
    rows: String
    columns: String

    capability_id: String
    transformer_id: String
    series_key: String
    aggregator: TimeSeriesWidgetAggregator
    gaugeType: KPIGaugeType,
    min: Float,
    max: Float
}

type GaugeLocationsWidget implements Widget {
    id: ID
    order: Int
    widget_type: WidgetType
    name: String
    intent_id: String
    rows: String
    columns: String

    flow_direction: FlowDirection
    locations: [GaugeLocation!]!
}

type GaugeLocation {
    name: String
    label: String
    offset: Int
    color: String
}

enum TimeSeriesWidgetTimeUnit {
    HOUR 
    DAY 
    WEEK 
    MONTH
    YEAR 
}

enum TimeSeriesWidgetAggregator {
    MAX 
    MIN 
    AVG
}

enum KPIGaugeType {
    NUMBER_VALUE
    GAUGE
}

enum DashboardWidgetLayout {
    CLASSIC
    GRID
}

enum FlowDirection {
    IN
    OUT
}

Log output

# Put your logs below this line

✔ Generated GraphQL operations successfully and saved at src/graphql
✔ Code generated successfully and saved in file src/app/services/api.service.ts

Additional information

Right now, everything compiles and deploys correctly if we manually modify api.service.ts to update

__typename: string --> __typename: 'GaugeLocation'

This is working correctly for our other 75+ types and inputs but this one set is causing the issue.

.graphqlconfig.yml

projects:
  clientapp:
    schemaPath: ./amplify/backend/api/clientapp/build/schema.graphql
    includes:
      - src/graphql/**/*.graphql
    excludes:
      - ./amplify/**
      - src/app/services/api.service.ts
    extensions:
      amplify:
        codeGenTarget: angular
        generatedFileName: src/app/services/api.service.ts
        docsFilePath: src/graphql
        maxDepth: 5
extensions:
  amplify:
    version: 3

api.service

{
            __typename: "GaugeLocationsWidget";
            id?: string | null;
            order?: number | null;
            widget_type?: WidgetType | null;
            name?: string | null;
            intent_id?: string | null;
            rows?: string | null;
            columns?: string | null;
            flow_direction?: FlowDirection | null;
            locations?: Array<{
              __typename: string; <--------Issue is here, should be __typename: "GaugeLocation"
              name?: string | null;
              label?: string | null;
              offset?: number | null;
              color?: string | null;
            } | null> | null;
          }

[jkeczan]

An update:

When we isolate GaugeLocation as the only type in the Union, the corresponding code in api.service is generated correctly. However, as soon as we add 2nd type to the Union it fails.

If we remove GaugeLocation from the union altogether, all types in the union generate successfully.

The only difference between GaugeLocation and the rest of the type definitions is it has a complex type for one of its properties.