DataStore - Sync error subscription failed Connection failed

Describe the bug I’m following the React DataStore setup documentation, and after it’s working, I add the @auth directive following the tutorial here: https://aws-amplify.github.io/docs/cli-toolchain/graphql?sdk=js

The 3 buttons work (New, Query > 4, and Delete All). But the first time after clicking any of them, the following warning appears:

DataStore - Sync error subscription failed Connection failed: {"errors":[{"message":"Validation error of type MissingFieldArgument: Missing field argument owner @ 'onCreatePost'"}]}

And after 5 seconds, the app crashes with this error repeated 5 times:

AWSAppSyncRealTimeProvider.ts:506 Uncaught TypeError: Cannot read property 'observer' of undefined
    at AWSAppSyncRealTimeProvider._timeoutStartSubscriptionAck (AWSAppSyncRealTimeProvider.ts:506)
    at AWSAppSyncRealTimeProvider.ts:318

Here is a screenshot of the detailed stack trace from React:

I can click the buttons many times before the app crashes and confirm that all 3 buttons are working as expected.

To Reproduce Here is the schema. I basically copy/pasted from the tutorial.

enum PostStatus {
    ACTIVE
    INACTIVE
}

type Post
        @model
        @auth(
            rules: [
                { allow: owner, operations: [ create, read, update, delete] },

                # self reference to allow members of the group
                { allow: groups, groupsField: "id", operations: [ read ]}
            ]
        )
{
    id: ID!
    title: String!
    comments: [Comment] @connection(name: "PostComments")
    owner: String!
    rating: Int!
    status: PostStatus!
}
type Comment
        @model
        @auth(
            rules: [
                { allow: owner, operations: [ create, read, update, delete] },

                # self reference to allow members of the group
                { allow: groups, groupsField: "id", operations: [ read ]}
            ]
        )
{
    id: ID!
    content: String
    owner: String!
    post: Post @connection(name: "PostComments")
}

I’m using Cognito for authentication, with the withAuthenticator HOC.

Here is my onCreate function, which is slightly modified from the tutorial since the owner is hard-coded there, so mine uses the AWS Amplify Auth class currentAuthenticatedUser() function to get the username. Based on everything I’ve read in the docs, this is the expected field for owner.

const onCreate = async () => {
    const user = await Auth.currentAuthenticatedUser();
    const rating = ~~(Math.random() * 7) + 1;
    const post = new Post({
        title: `New title ${Date.now()}`,
        rating,
        owner: user.username,
        status: PostStatus.ACTIVE,
    });
    console.log({title: post.title, rating: post.rating});
    DataStore.save(post);
};

const onDeleteAll = () => DataStore.delete(Post, Predicates.ALL);

const onQuery = async () => {
    const posts = await DataStore.query(Post, c => c.rating('gt', 4));
    console.log(posts.map(({title, rating}) => ({title, rating})));
};

Expected behavior I expect the ValidationError to not happen because the field owner would be properly passed to the subscription API. Note that I am not explicitly using the subscribe API so this is something happening behind the scenes when I use DataStore save, delete, or query.

Environment

  System:
    OS: macOS 10.15.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 8.69 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v10.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 79.0.3945.88
    Firefox: 71.0
    Safari: 13.0.4
  npmPackages:
    @aws-amplify/core: ^2.2.0 => 2.2.0 
    @aws-amplify/datastore: ^1.0.2 => 1.0.2 
    @fortawesome/fontawesome-svg-core: ^1.2.26 => 1.2.26 
    @fortawesome/pro-regular-svg-icons: ^5.12.0 => 5.12.0 
    @fortawesome/pro-solid-svg-icons: ^5.12.0 => 5.12.0 
    @fortawesome/react-fontawesome: ^0.1.8 => 0.1.8 
    @sentry/browser: ^5.10.2 => 5.10.2 
    @testing-library/cypress: ^5.0.2 => 5.0.2 
    @testing-library/jest-dom: ^4.2.4 => 4.2.4 
    @testing-library/react: ^9.4.0 => 9.4.0 
    @testing-library/react-hooks: ^3.2.1 => 3.2.1 
    @testing-library/user-event: ^7.2.0 => 7.2.1 
    @types/jest: ^24.0.23 => 24.0.23 
    @types/node: ^12.12.20 => 12.12.20 
    @types/react: ^16.9.16 => 16.9.16 
    @types/react-dom: ^16.9.4 => 16.9.4 
    @typescript-eslint/eslint-plugin: ^2.12.0 => 2.12.0 
    @typescript-eslint/parser: ^2.12.0 => 2.12.0 
    amplify-app: ^2.6.0 => 2.6.0 
    aws-amplify: ^2.2.0 => 2.2.0 
    aws-amplify-react: ^3.1.1 => 3.1.1 
    core-js: ^3.5.0 => 3.5.0 
    cypress: ^3.8.0 => 3.8.0 
    date-fns: ^2.8.1 => 2.8.1 
    date-fns-timezone: ^0.1.4 => 0.1.4 
    deep-object-diff: ^1.1.0 => 1.1.0 
    element-scroll-polyfill: ^1.0.1 => 1.0.1 
    eslint-config-prettier: ^6.7.0 => 6.7.0 
    eslint-plugin-cypress: ^2.8.1 => 2.8.1 
    eslint-plugin-jest: ^23.1.1 => 23.1.1 
    eslint-plugin-jest-dom: ^1.4.2 => 1.4.2 
    eslint-plugin-prettier: ^3.1.2 => 3.1.2 
    eslint-plugin-react-hooks: ^2.3.0 => 2.3.0 
    husky: ^3.1.0 => 3.1.0 
    ini: ^1.3.5 => 1.3.5 
    inquirer: ^7.0.1 => 7.0.1 
    jest-localstorage-mock: ^2.4.0 => 2.4.0 
    jest-mock-console: ^1.0.0 => 1.0.0 
    lint-staged: ^9.5.0 => 9.5.0 
    local-storage: ^2.0.0 => 2.0.0 
    lodash: ^4.17.15 => 4.17.15 
    node-sass: ^4.13.0 => 4.13.0 
    platform: ^1.3.5 => 1.3.5 
    prettier: ^1.19.1 => 1.19.1 
    prop-types: ^15.7.2 => 15.7.2 
    react: ^16.12.0 => 16.12.0 
    react-dom: ^16.12.0 => 16.12.0 
    react-router: ^5.1.2 => 5.1.2 
    react-router-dom: ^5.1.2 => 5.1.2 
    react-scripts: 3.3.0 => 3.3.0 
    react-test-renderer: ^16.12.0 => 16.12.0 
    regenerator-runtime: ^0.13.3 => 0.13.3 
    sass-lint: ^1.13.1 => 1.13.1 
    sass-lint-auto-fix: =0.21.0 => 0.21.0 
    source-map-explorer: ^2.1.2 => 2.1.2 
    spark-md5: ^3.0.0 => 3.0.0 
    typescript: ^3.7.3 => 3.7.3 
    uuid: ^3.3.3 => 3.3.3 
    validator: ^12.1.0 => 12.1.0 
  npmGlobalPackages:
    @aws-amplify/cli: 4.6.0
    browser-sync: 2.26.7
    npm-check-updates: 4.0.1
    npm: 6.13.4
    sass: 1.23.7

Additional context Just a note that I’m not using most of those libs in the code, yet. I added them preemptively in setting up the project.

Sample code See above.

[Amplifiyer]

Looks same as aws-amplify/amplify-cli#3048. There is a fix #4617 for this and we will release as soon as possible.

[github-actions[bot]]

This issue has been automatically locked since there hasn’t been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.