Amplify-js: TypeScript ^3.8.3 errors with DataStore.query(Post)

[ericclemmons]

Describe the bug

DataStore.query(Post) has a TypeScript error:

15:19 Argument of type 'typeof Post' is not assignable to parameter of type 'PersistentModelConstructor<Readonly<{ id: string; } & Record<string, any>>>'.
  Types of property 'copyOf' are incompatible.
    Types of parameters 'mutator' and 'mutator' are incompatible.
      Type 'void | Readonly<{ id: string; } & Record<string, any>>' is not assignable to type 'void | Pick<DeepWritable<Post>, "title" | "comments" | "rating" | "status">'.
        Type 'Readonly<{ id: string; } & Record<string, any>>' is not assignable to type 'void | Pick<DeepWritable<Post>, "title" | "comments" | "rating" | "status">'.
          Type 'Readonly<{ id: string; } & Record<string, any>>' is missing the following properties from type 'Pick<DeepWritable<Post>, "title" | "comments" | "rating" | "status">': title, rating, status
    13 |
    14 |    useEffect(() => {
  > 15 |        DataStore.query(Post).then(console.log);
       |                        ^
    16 |    }, []);
    17 |
    18 |    return (

To Reproduce

1. yarn create next-app datastore

2. Convert to TypeScript:

   1. touch tsconfig.json

   2. yarn add --dev typescript @types/react @types/node

   3. mv pages/index.{js,tsx}

3. amplify init

   ❯ amplify init
   Note: It is recommended to run this command from the root of your app directory
   ? Enter a name for the project next-datastore
   ? Enter a name for the environment dev
   ? Choose your default editor: Visual Studio Code
   ? Choose the type of app that you're building javascript
   Please tell us about your project
   ? What javascript framework are you using react
   ? Source Directory Path:  src
   ? Distribution Directory Path: out
   ? Build Command:  npm run-script build
   ? Start Command: npm run-script start
   

4. amplify add api

   enum PostStatus {
   ACTIVE
   INACTIVE
   }
   
   type Post @model {
   id: ID!
   title: String!
   comments: [Comment] @connection(name: "PostComments")
   rating: Int!
   status: PostStatus!
   }
   
   type Comment @model {
   id: ID!
   content: String
   post: Post @connection(name: "PostComments")
   }
   

5. amplify push

6. amplify codegen models

Expected behavior

Expected this to be fixed with https://github.com/aws-amplify/amplify-js/issues/4827.

Screenshots

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Memory: 1003.93 MB / 16.00 GB
    Shell: 5.7.1 - /usr/local/bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 81.0.4044.113
    Firefox: 68.6.1
    Safari: 13.1
  npmPackages:
    @types/node: ^13.11.1 => 13.11.1
    @types/react: ^16.9.34 => 16.9.34
    aws-amplify: unstable => 3.0.7
    next: 9.3.5 => 9.3.5
    react: 16.13.1 => 16.13.1
    react-dom: 16.13.1 => 16.13.1
    typescript: ^3.8.3 => 3.8.3
  npmGlobalPackages:
    @aws-amplify/cli: 4.18.0
    create-react-app: 3.1.1
    npm: 6.9.0
    pure-prompt: 1.10.3

[ericclemmons]

Related: https://github.com/aws-amplify/amplify-js/pull/5032

[manueliglesias]

Investigating, for now, can you try

const posts = await DataStore.query<Post>(Post)

[ericclemmons]

@manueliglesias Confirmed DataStore.query<Post> and DataStore.observe<Post> both work well.

[rush86999]

typscript 4.1.3, this issue is still present, the above recommendations did not work. typescript is throwing linting errors similar to the above.