Angular API.service.ts TS2352 errors from codegen

[cybercussion]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

GraphQL API

Amplify Categories

api

Environment information

  System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 14.54 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.12.0 - ~/.asdf/installs/nodejs/16.12.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/16.12.0/bin/yarn
    npm: 9.1.1 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 100.0
  npmPackages:
    @angular-devkit/build-angular: ^14.2.9 => 14.2.9
    @angular/animations: ^14.2.0 => 14.2.10
    @angular/cli: ~14.2.9 => 14.2.9
    @angular/common: ^14.2.0 => 14.2.10
    @angular/compiler: ^14.2.0 => 14.2.10
    @angular/compiler-cli: ^14.2.0 => 14.2.10
    @angular/core: ^14.2.0 => 14.2.10
    @angular/forms: ^14.2.0 => 14.2.10
    @angular/platform-browser: ^14.2.0 => 14.2.10
    @angular/platform-browser-dynamic: ^14.2.0 => 14.2.10
    @angular/router: ^14.2.0 => 14.2.10
    @aws-amplify/api-graphql: ^3.0.1 => 3.0.1
    @aws-amplify/auth: ^5.0.1 => 5.0.1
    @aws-amplify/core: ^5.0.1 => 5.0.1
    @aws-amplify/datastore: ^4.0.1 => 4.0.1
    @aws-amplify/storage: ^5.0.1 => 5.0.1
    @aws-amplify/ui-angular: ^3.0.0 => 3.0.0
    @types/jasmine: ~4.0.0 => 4.0.3
    jasmine-core: ~4.3.0 => 4.3.0
    karma: ~6.4.0 => 6.4.1
    karma-chrome-launcher: ~3.1.0 => 3.1.1
    karma-coverage: ~2.2.0 => 2.2.0
    karma-jasmine: ~5.1.0 => 5.1.0
    karma-jasmine-html-reporter: ~2.0.0 => 2.0.0
    rxjs: ~7.5.0 => 7.5.7 (6.6.7)
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/internal-compatibility:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    tslib: ^2.3.0 => 2.4.1 (1.14.1)
    typescript: ~4.7.2 => 4.7.4
    zen-observable-ts: ^1.1.0 => 1.1.0
    zone.js: ~0.11.4 => 0.11.8
  npmGlobalPackages:
    @angular/cli: 14.2.9
    @aws-amplify/cli: 10.4.1
    corepack: 0.15.1
    npm-check-updates: 16.4.1
    npm: 9.1.1
    sass: 1.56.1

Describe the bug

Error: src/app/API.service.ts:1388:12 - error TS2352: Conversion of type 'Observable<GraphQLResult<any>> | Promise<GraphQLResult<any>>' to type 'Observable<SubscriptionResponse<Pick<__SubscriptionContainer, "onUpdateComment">>>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'Promise<GraphQLResult<any>>' is missing the following properties from type 'Observable<SubscriptionResponse<Pick<__SubscriptionContainer, "onUpdateComment">>>': subscribe, forEach, map, filter, and 4 more.

1388     return API.graphql(
                ~~~~~~~~~~~~
1389       graphqlOperation(statement, gqlAPIServiceArguments)
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ...
1391       SubscriptionResponse<Pick<__SubscriptionContainer, "onUpdateComment">>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1392     >;

These repeat mostly for all GraphQLResults at bottom of file. Fails to compile. I attempted to roll back to older versions but have not made it go away.

Expected behavior

It compiles w/o error.

Reproduction steps

1. Installed Node 16+, Angular 14+, Amplify CLI
2. Created ng new 14Test project
3. amplify init
4. amplify add api
5. Used graphql, boilerplate example
6. performed codegen
7. API.service.ts created
8. add to project
9. ng s -o (serve and open) - fails

I've attempted to roll back to older versions of @aws-amplify/api-graphql but that did not have any effect.

Code Snippet

  OnCreateBlogListener(
    filter?: ModelSubscriptionBlogFilterInput
  ): Observable<
    SubscriptionResponse<Pick<__SubscriptionContainer, "onCreateBlog">>
  > {
    const statement = `subscription OnCreateBlog($filter: ModelSubscriptionBlogFilterInput) {
        onCreateBlog(filter: $filter) {
          __typename
          id
          name
          posts {
            __typename
            nextToken
          }
          createdAt
          updatedAt
        }
      }`;
    const gqlAPIServiceArguments: any = {};
    if (filter) {
      gqlAPIServiceArguments.filter = filter;
    }
    return API.graphql(
      graphqlOperation(statement, gqlAPIServiceArguments)
    ) as Observable<
      SubscriptionResponse<Pick<__SubscriptionContainer, "onCreateBlog">>
    >;
  }

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cybercussion]

Believe I found a old project which uses: "@aws-amplify/api-graphql": "^2.3.6", "@aws-amplify/auth": "^4.5.6", "@aws-amplify/core": "^4.5.6", "zen-observable-ts": "0.8.19", <-- may be the better version vs 1.1.0

[cybercussion]

Ok so rolling back zen-observable-ts fixed graphql.

"@aws-amplify/storage": "^5.0.1", <-- Rolled back to 3.3.4 as this is a major update.  Rework needed.

[cybercussion]

Comment: So going thru this on a new package the modular @aws-amplify/* don't get added to package.json. And pulling down latest zen-observable-ts seems to break current version of graphql. In case someone else runs into this rolling back to 0.8.19 fixed my graphql issues.