API.graphql returns incorrect type for promise result

[Nicktho]

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

React

Amplify APIs

GraphQL API

Amplify Categories

api

Environment information

# Put output below this line
  System:
    OS: macOS 11.3.1
    CPU: (8) arm64 Apple M1
    Memory: 126.09 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.3.0 - /opt/homebrew/bin/node
    npm: 7.15.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Firefox Developer Edition: 97.0
    Safari: 14.1
  npmPackages:
    @aws-amplify/api-graphql: ^2.2.19 => 2.2.19 
    @aws-amplify/auth: ^4.3.20 => 4.3.20 
    @aws-amplify/core: ^4.3.12 => 4.3.12 
    @emotion/react: ^11.7.0 => 11.7.1 
    @emotion/styled: ^11.6.0 => 11.6.0 (10.3.0)
    @mui/system: ^5.2.3 => 5.2.3 
    @mui/types: ^7.1.0 => 7.1.0 
    @react-aria/label: ^3.2.1 => 3.2.1 
    @storybook/addon-actions: ^6.4.14 => 6.4.14 
    @storybook/addon-essentials: ^6.4.14 => 6.4.14 
    @storybook/addon-links: ^6.4.14 => 6.4.14 
    @storybook/builder-webpack5: ^6.4.14 => 6.4.14 
    @storybook/manager-webpack5: ^6.4.14 => 6.4.14 
    @storybook/preset-create-react-app: ^4.0.0 => 4.0.0 
    @storybook/react: ^6.4.14 => 6.4.14 
    @testing-library/jest-dom: ^5.15.1 => 5.16.1 
    @testing-library/react: ^11.2.7 => 11.2.7 
    @testing-library/user-event: ^12.8.3 => 12.8.3 
    @types/jest: ^27.4.0 => 27.4.0 
    @types/node: ^16.11.20 => 16.11.20 (14.18.9)
    @types/react: ^17.0.38 => 17.0.38 
    @types/react-dom: ^17.0.11 => 17.0.11 
    @typescript-eslint/eslint-plugin: ^4.33.0 => 4.33.0 (5.10.1)
    aws-amplify: ^4.3.12 => 4.3.12 
    emotion-normalize: ^11.0.1 => 11.0.1 
    emotion-reset: ^3.0.1 => 3.0.1 
    eslint: ^7.32.0 => 7.32.0 (8.7.0)
    eslint-config-airbnb: ^19.0.2 => 19.0.2 (18.2.1)
    eslint-config-airbnb-typescript: ^12.3.1 => 12.3.1 
    eslint-plugin-jest: ^24.7.0 => 24.7.0 (25.7.0)
    eslint-plugin-jsx-a11y: ^6.5.1 => 6.5.1 
    eslint-plugin-react: ^7.27.1 => 7.27.1 
    eslint-plugin-react-hooks: ^4.3.0 => 4.3.0 
    eslint-plugin-testing-library: ^3.10.2 => 3.10.2 (5.0.4)
    formik: ^2.2.9 => 2.2.9 
    react: ^17.0.2 => 17.0.2 
    react-confetti: ^6.0.1 => 6.0.1 
    react-dom: ^17.0.2 => 17.0.2 
    react-router-dom: ^6.0.2 => 6.1.1 
    react-scripts: ^5.0.0 => 5.0.0 
    swr: ^1.1.2 => 1.1.2 
    swr-immutable:  0.0.1 
    swr-infinite:  0.0.1 
    typescript: ^4.5.2 => 4.5.3 
    web-vitals: ^1.1.2 => 1.1.2 
    webpack: ^5.67.0 => 5.67.0 (4.46.0)
  npmGlobalPackages:
    @aws-amplify/cli: 7.6.2
    aws-cdk: 1.132.0
    create-next-app: 11.0.1
    create-react-app: 4.0.3
    n: 7.1.0
    npm: 7.15.1
    pure-prompt: 1.16.0
    vercel: 23.0.1

Describe the bug

API.graphql() return type is Promise<GraphQLResult> | Observable<object>.

Although, when using amplify the errors object on a GraphQLResult does not conform to the type GraphQLError[] as defined by GraphQLResult.

The following properties exist on the errors object that are not in the type : errorInfo, errorType.

Expected behavior

I expect the type returned by API.graphql() to allow the addition of the errorInfo and errorType attributes so that I can act on them in a typescript project using amplify.

Reproduction steps

1. npm install aws-amplify
2. import API from aws-amplify
3. Make a call to graphql and try to act on errorInfo and errorType

Code Snippet

// Put your code below this line.
(API.graphql({
  query: someQuery,
  // we have to narrow the type as it can return an Observable for subscriptions
}) as Promise<GraphQLResult<object>>).then((result) => {
  // below typescript error for errorType, see screenshot
  console.log(result.errors?.errorType);
});

Log output

// Put your logs below this line
Property 'errorType' does not exist on type 'GraphQLError[]'.ts(2339)

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

[ebisbe]

I was searching for the exact same thing. @Nicktho Did you define a custom graphql type?

[jimblanc]

We have published an RFC on our plan for improving TypeScript support in Amplify JS & would love to get your feedback & suggestions!

RFC: Amplify JS TypeScript Improvements

[cwomack]

With the release of the latest major version of Amplify (aws-amplify@>6), this issue should now be resolved! Please refer to our release announcement, migration guide, and documentation for more information.