aws-amplify / aws-amplify/amplify-codegen
Wrong type for codegen models for items with AWSJSON in their fields (DataStore)
- 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
Assessment
This issue has not been assessed yet.