aws-amplify / aws-amplify/amplify-codegen

Wrong type for codegen models for items with AWSJSON in their fields (DataStore)

Open
#396 5 comments 0 reactions 1 assignee Claimed by @chrisbonifacio View on GitHub
bug model-gen p2 type-gen
Dominant language
TypeScript
Stars
59
Forks
64
PR merge metrics
No merged PRs in 30d

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

Authentication, GraphQL API, DataStore, Storage

### Amplify Categories

_No response_

### Environment information

```
# Put output below this line
System:
OS: macOS 12.2.1
CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
Memory: 1.01 GB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
npm: 7.19.0 - {REDACTED}/node_modules/.bin/npm
Watchman: 2022.02.14.00 - /usr/local/bin/watchman
npmPackages:
-: 0.0.1 => 0.0.1
@aws-amplify/ui-react: ^2.8.0 => 2.8.0
@aws-amplify/ui-react-internal: undefined ()
@aws-amplify/ui-react-legacy: undefined ()
@material-ui/core: ^4.12.2 => 4.12.2
@material-ui/icons: ^4.11.2 => 4.11.2
@testing-library/jest-dom: ^5.14.1 => 5.14.1
@testing-library/react: ^11.2.7 => 11.2.7
@testing-library/user-event: ^12.8.3 => 12.8.3
@types/react: ^17.0.19 => 17.0.19
@types/react-dom: ^17.0.9 => 17.0.9
@types/react-router-dom: ^5.3.3 => 5.3.3
@uiw/react-md-editor: ^3.6.3 => 3.6.3
aws-amplify: ^4.3.14 => 4.3.14
bootstrap: ^4.6.0 => 4.6.0
g: ^2.0.1 => 2.0.1
npm: ^7.19.0 => 7.19.0
react: ^17.0.2 => 17.0.2
react-app-rewired: ^2.1.8 => 2.1.8
react-dom: ^17.0.2 => 17.0.2
react-lorem-ipsum: ^1.4.9 => 1.4.9
react-markdown: ^7.0.1 => 7.0.1
react-player: ^2.9.0 => 2.9.0
react-router-dom: ^5.2.0 => 5.2.0
react-scripts: 4.0.3 => 4.0.3
rehype-katex: ^5.0.0 => 5.0.0
remark-math: ^5.1.0 => 5.1.0
source-map-loader: ^3.0.0 => 3.0.0
ts-loader: ^9.2.5 => 9.2.5
typescript: ^4.3.5 => 4.3.5
uuid: ^8.3.2 => 8.3.2 (3.3.2, 3.4.0)
web-vitals: ^1.1.2 => 1.1.2
npmGlobalPackages:
@aws-amplify/cli: 7.6.22
aws-cdk: 2.3.0
corepack: 0.10.0
npm: 8.1.2

```

### Describe the bug

When getting an item that has AWSJSON in its fields, DataStore returns a Typescript JSON object for the AWSJSON field instead of a string.

However, the codegen models for Typescript label the field as a string instead of an object. Therefore, this causes issues since Typescript thinks an object is a string.

### Expected behavior

The codegen models should have labeled AWSJSON fields as objects instead of strings.

### Reproduction steps

(Not tested, hypothesized reproduction steps)
1. Create Schema with a type that has AWSJSON in one of its fields.
2. Use DataStore to query for an item of the above type
3. Log `typeof type.field` and it should return `object` instead of `string`.

### Code Snippet

```
# GraphQL Schema
type Post @model @auth(rules: [
{allow: private, operations: [read]},
]) {
id: ID!
content: AWSJSON
}
```

```javascript
// Put your code below this line.
import Amplify from 'aws-amplify';
import * as models from 'src/models';

// ...

const posts = await Amplify.DataStore.query(models.Post);
console.log(typeof posts[0].content);
// Should give you "object"
console.log("a" + posts[0].content);
// Should give you "a[Object object]"
console.log(posts[0].content);
// Should give you a JSON object

```

```javascript
// src/models/index.d.ts
export declare class Post {
readonly id: string;
readonly content?: string; // <--- this gives errors
readonly createdAt?: string;
readonly updatedAt?: string;
// ...
}
```

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

**Workarounds**

Use `// @ts-ignore` when assigning the value to another place and act as it is a JSON object.

**Other symptoms**

May cause `A cross-origin error was thrown. React doesn’t have access to the actual error object in development.` in React.

May be related to GraphQL Transformer V2 issues: [https://github.com/aws-amplify/amplify-adminui/issues/426](https://github.com/aws-amplify/amplify-adminui/issues/426)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.