aws-amplify / aws-amplify/amplify-data

API.graphql returns incorrect type for promise result

Open
#427 5 comments 0 reactions 0 assignees View on GitHub
bug GraphQL
Dominant language
TypeScript
Stars
18
Forks
23
Avg merge
26m
Merged PRs (30d)
1

Description

### Before opening, please confirm:

- [X] I have [searched for duplicate or closed issues](https://github.com/aws-amplify/amplify-js/issues?q=is%3Aissue+) and [discussions](https://github.com/aws-amplify/amplify-js/discussions).
- [X] I have read the guide for [submitting bug reports](https://github.com/aws-amplify/amplify-js/blob/main/CONTRIBUTING.md#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 | Observable`.

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

```javascript
// 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>).then((result) => {
// below typescript error for errorType, see screenshot
console.log(result.errors?.errorType);
});
```

![image](https://user-images.githubusercontent.com/8622243/152078647-01f11d8d-b3f7-4797-80a4-0143d2b3310a.png)

### 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_

Contributor guide

Open the contributing guide

Research direction

Start with the API.graphql entry point and the GraphQLResult type while reproducing the TypeScript error from the supplied snippet. Done means the returned type permits the reported errorInfo and errorType attributes without the caller's cast, with the behavior covered by an appropriate test.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, react, typescript
Domain
api
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.