AWSJSON containing Array is typed as string but comes out as Array from DataStore

[caridavidson]

Before opening, please confirm:

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

JavaScript Framework

Vue3

Amplify APIs

GraphQL API, DataStore

Amplify Categories

api

Environment information

# Put output below this line

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 3.61 GB / 7.60 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 19.1.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.3 - /usr/local/bin/npm
  npmPackages:
    @aws-amplify/ui-vue: ^3.1.7 => 3.1.7 
    @babel/core: ^7.12.16 => 7.20.5 
    @babel/eslint-parser: ^7.12.16 => 7.19.1 
    @quasar/extras: ^1.0.0 => 1.15.9 
    @quasar/quasar-ui-qcalendar: ^4.0.0-beta.16 => 4.0.0-beta.16 
    @types/debounce: ^1.2.1 => 1.2.1 
    @types/gapi: ^0.0.44 => 0.0.44 
    @types/lodash: ^4.14.191 => 4.14.191 
    @types/lodash.debounce: ^4.0.7 => 4.0.7 
    @typescript-eslint/eslint-plugin: ^5.4.0 => 5.45.0 
    @typescript-eslint/parser: ^5.4.0 => 5.45.0 
    @vue/cli-plugin-babel: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-eslint: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-router: ~5.0.0 => 5.0.8 
    @vue/cli-plugin-typescript: ~5.0.0 => 5.0.8 
    @vue/cli-service: ~5.0.0 => 5.0.8 
    @vue/eslint-config-typescript: ^9.1.0 => 9.1.0 
    @vueuse/core: ^9.10.0 => 9.10.0 (7.5.5)
    application-name:  0.0.1 
    aws-amplify: ^5.0.13 => 5.0.13 
    core-js: ^3.8.3 => 3.26.1 
    csvtojson: ^2.0.10 => 2.0.10 
    eslint: ^7.32.0 => 7.32.0 
    eslint-plugin-vue: ^9.9.0 => 9.9.0 
    fuse: ^0.4.0 => 0.4.0 
    fuse.js: ^6.6.2 => 6.6.2 
    gapi: ^0.0.3 => 0.0.3 
    lodash: ^4.17.21 => 4.17.21 
    pinia: ^2.0.29 => 2.0.29 
    quasar: ^2.11.6 => 2.11.6 
    sass: 1.32.12 => 1.32.12 
    sass-loader: ^12.0.0 => 12.6.0 
    throttle-typescript: ^1.1.0 => 1.1.0 
    turndown: ^7.1.1 => 7.1.1 
    typescript: ~4.5.5 => 4.5.5 
    uuid: ^9.0.0 => 9.0.0 (3.4.0, 8.3.2)
    v-network-graph: ^0.8.1 => 0.8.1 
    vue: ^3.2.13 => 3.2.45 
    vue-class-component: ^8.0.0-0 => 8.0.0-rc.1 
    vue-cli-plugin-quasar: ~5.0.1 => 5.0.1 
    vue-draggable-next: ^2.1.1 => 2.1.1 
    vue-eslint-parser: ^9.1.0 => 9.1.0 (8.3.0)
    vue-plugin-load-script: ^2.1.1 => 2.1.1 
    vue-router: ^4.1.6 => 4.1.6 
  npmGlobalPackages:
    @aws-amplify/cli: 10.5.1
    amplify: 0.0.11
    corepack: 0.15.1
    n: 9.0.1
    npm: 8.19.3
    yarn: 1.22.19

Describe the bug

There were already a couple of tickets about this, but the problem seems to still exist.

I'm using an AWSJSON type in my graphQL model.
I have given it a value of Array
The code that is generated returns a model with type string | null
The object that is returned from DataStore is an Array<Record>

This makes it difficult / cumbersome to convert to/from JSON without errors.

Expected behavior

If the value is meant to be a JSON string, then it should be a JSON string.
If the value is an array or object, then it should be typed appropriately in the model that is generated.

Reproduction steps

1. create graphQL model using AWSJSON
2. amplify codegen
3. put data in the form of a list into it (it might happen on Objects too, but I'm not sure)

Code Snippet

// Put your code below this line.
// GraphQL model
type Workspace @model @auth(rules: [
    { allow: owner, ownerField: "owners" }
]) {
  id: ID!
  owners: [String]!
  notes: AWSJSON
}

// Model generated
type LazyWorkspace = {
  readonly [__modelMeta__]: {
    identifier: ManagedIdentifier<Workspace, 'id'>;
    readOnlyFields: 'createdAt' | 'updatedAt';
  };
  readonly id: string;
  readonly notes?: string | null;
  readonly createdAt?: string | null;
  readonly updatedAt?: string | null;
}

Log output

Using this block for the output of what's coming out of the DataStore

// Put your logs below this line
{
    "id": "7e54a2e9-7025-4f26-abbe-09509b6b5030",
    "owners": [
        "google_xxxx"
    ],
    "title": "New Workspace",
    "notes": [
        {
            "details": {
                "value": "foo"
            },
            "type": "string"
        }
    ],
    "createdAt": "2023-02-21T16:11:22.499Z",
    "updatedAt": "2023-02-21T16:19:34.835Z",
    "_version": 3,
    "_lastChangedAt": 1676996374868,
    "_deleted": null
}

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

[chrisbonifacio]

Hi @caridavidson thank you for raising this issue. This sounds like a typescript issue.

Can you please share an example of the error/issue you're seeing when attempting to convert the notes field to/from JSON?

I tried creating a WorkSpace in a new app and did not run into issues using JSON.stringify for the notes field.

ex:

const workSpace = await DataStore.save(
      new Workspace({
        owners: [user.attributes!.email],
        notes: JSON.stringify([
          {
            details: {
              value: "foo",
            },
            type: "string",
          },
        ]),
      })
    );

I then tried querying a WorkSpace for its notes but the type seems to be string | null | undefind. I'm not sure where the Array<Record> type is coming from.

If DataStore is returning the data as an Array<Record>, can you override the type to a string instead? Would that be a valid workaround for the time being?

[caridavidson]

Overriding the type to string would be a workaround, I agree, and it's what I've done. But I still figured you'd want to know about the bug.. Casting to any is at least working for the moment....

the errors I get depend on how I try to deal with the problem:

When casting"
Conversion of type 'string | null | undefined' to type 'Block[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Type 'string' is not comparable to type 'Block[]'.ts(2352)

If uncasted:
No overload matches this call.

[chrisbonifacio]

@caridavidson Yes, this is definitely worth mentioning. The team is currently working on improving the TS developer experience around GraphQL and DataStore so this very helpful. I will mention this issue to the team for consideration towards the current work.

Lastly, for that issue regarding casting, can you try casting the value like so? as unknown as Block[]

[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

[caridavidson]

I've moved on from this and have a workaround. It seems odd to close an issue just because the reporter doesn't respond when the bug still exists.

…

On Fri, 24 Mar 2023, 19:44 Chris Bonifacio, ***@***.***> wrote: Reopened #11013 <#11013>. — Reply to this email directly, view it on GitHub <#11013 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALMF45FQUI3ZVS64XIKPLUDW5XTP3ANCNFSM6AAAAAAVEMMJNM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[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.

As a note, we still haven't been able to reproduce this. Let us know if you continue to experience this @caridavidson after upgrading to v6 of Amplify.