amplify-js: DataStore unable to work.

Describe the bug Unable to get DataStore save data.

To Reproduce Steps to reproduce the behavior:

  1. create a new reactjs app create-react-app newapp
  2. add amplify and graphql api with the following schema
enum PostStatus {
  ACTIVE
  INACTIVE
}

type Post @model {
  id: ID!
  title: String!
  rating: Int!
  status: PostStatus!
}
  1. run amplify codegen models
  2. run amplify push and wait for it to finish
  3. refer to the create datastore in the documentation and create a function onCreatePost
  4. run yarn start
  5. see the reactjs page, open chrome console. wait for the waiting
[WARN] 44:02.180 DataStore - Sync error subscription failed Connection failed: {"errors":[{"message":"Validation error of type FieldUndefined: Field '_lastChangedAt' in type 'Post' is undefined @ 'onCreatePost/_lastChangedAt'"},{"message":"Validation error of type FieldUndefined: Field '_version' in type 'Post' is undefined @ 'onCreatePost/_version'"},{"message":"Validation error of type FieldUndefined: Field '_deleted' in type 'Post' is undefined @ 'onCreatePost/_deleted'"},{"message":"Validation error of type FieldUndefined: Field '_version' in type 'Post' is undefined @ 'onCreatePost/_version'"},{"message":"Validation error of type FieldUndefined: Field '_lastChangedAt' in type 'Post' is undefined @ 'onCreatePost/_lastChangedAt'"},{"message":"Validation error of type FieldUndefined: Field '_deleted' in type 'Post' is undefined @ 'onCreatePost/_deleted'"}]}

and the error:

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

Expected behavior DataStore and new Post should be created.

Screenshots If applicable, add screenshots to help explain your problem.

Screenshot 2019-12-09 21 32 19 Screenshot 2019-12-09 21 35 24

Environment
npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages
npx: installed 1 in 1.428s

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 167.82 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.16.0 - ~/.nvm/versions/node/v8.16.0/bin/node
    Yarn: 1.19.2 - /usr/local/bin/yarn
    npm: 6.13.2 - ~/.nvm/versions/node/v8.16.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 78.0.3904.108
    Firefox: 68.3.0
    Safari: 13.0.3
  npmPackages:
    @aws-amplify/core: ^2.2.0 => 2.2.0 
    @aws-amplify/datastore: ^1.0.2 => 1.0.2 
    @testing-library/jest-dom: ^4.2.4 => 4.2.4 
    @testing-library/react: ^9.3.2 => 9.3.2 
    @testing-library/user-event: ^7.1.2 => 7.1.2 
    react: ^16.12.0 => 16.12.0 
    react-dom: ^16.12.0 => 16.12.0 
    react-scripts: 3.3.0 => 3.3.0 
  npmGlobalPackages:
    @aws-amplify/cli: 4.5.0
    aws-cdk: 1.18.0
    create-react-app: 3.3.0
    create-react-native-app: 2.0.2
    eslint-config-airbnb: 18.0.1
    expo-cli: 3.9.1
    expo: 35.0.1
    firebase-tools: 7.9.0
    gatsby-cli: 2.8.16
    jsforce: 1.9.3
    mocha: 6.2.2
    npm: 6.13.2
    react-devtools: 4.2.1
    react-native-git-upgrade: 0.2.7
    react-native-rename: 2.4.1
    react-native: 0.61.2
    serve: 11.2.0
    serverless: 1.59.1

Smartphone (please complete the following information):

  • Device: MacBook Pro (15-inch, 2017)
  • OS: macOS Mojave 10.14.6
  • Browser Chrome
  • Version 78.0.3904.108

Additional context

Sample code

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = ‘DEBUG’; in your app.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 6
  • Comments: 31 (6 by maintainers)

Most upvoted comments

I ran into this issue when adding DataStore to an existing API.

Ultimately I needed to run amplify update api and follow the prompts to update the conflict resolution strategies (https://aws-amplify.github.io/docs/js/datastore#conflict-resolution) so that the API had this support and my mutations were updated to have these fields:

_version
_deleted
_lastChangedAt

I ran into this issue when adding DataStore to an existing API.

Ultimately I needed to run amplify update api and follow the prompts to update the conflict resolution strategies (https://aws-amplify.github.io/docs/js/datastore#conflict-resolution) so that the API had this support and my mutations were updated to have these fields:

_version
_deleted
_lastChangedAt

You could also add this you the transform.conf.json directly: { "Version": 5, "ResolverConfig": { "project": { "ConflictHandler": "AUTOMERGE", "ConflictDetection": "VERSION" } } }

This information must be included to the documentation! It’s pretty hard to guess… Or “@versioned” should generate it.

@rakannimer I selected optimistic concurrency per the conflict resolution docs on the DataStore page. Do that and run amplify push and it will update your mutations to include those fields.

I will also add the note here that I’ve filed an issue with being able fully use the DataStore after upgrading the API. That issue is being tracked here: https://github.com/aws-amplify/amplify-js/issues/4588

Just a warning: don’t forget to update your models when adding the Datastore, otherwise you get errors saying that version doesn’t exist (because your models need to be updated)

I skip the model update so get the error, need to run again amplify update API to take care of my models, below an example from the todolist example

datastore

You select interactively which models to update (all of them), then your schema.graphql (if you use graphql) will have all the necessary to run flawlessly

And as IssacTrvino mention: think in advance if you will use DataStore, because if you add later, you need to clean the table and reinsert all of the items again

Fixed the issue with: . Amplify update API . Enable Datastore for the whole API

Hey @kevinold

I’m getting the same error here, missing _version _deleted and _lastChangedAt.

What did you set the conflict resolution to to fix it ?

I ran into this issue when adding DataStore to an existing API. Ultimately I needed to run amplify update api and follow the prompts to update the conflict resolution strategies (https://aws-amplify.github.io/docs/js/datastore#conflict-resolution) so that the API had this support and my mutations were updated to have these fields:

_version
_deleted
_lastChangedAt

You could also add this you the transform.conf.json directly: { "Version": 5, "ResolverConfig": { "project": { "ConflictHandler": "AUTOMERGE", "ConflictDetection": "VERSION" } } }

This information must be included to the documentation! It’s pretty hard to guess… Or “@versioned” should generate it.

So once I updated via amplify-cli amplify update api , then enable DataStore for entire GraphQL , I had to remove my items from the dynamo db table and reinsert them via DataStore instead of GraphQL, the Fields were now included and ready to roll. Thanks

DataStore.save does not like to save the first record.

For me, this saves 1 record:

window.LOG_LEVEL = "DEBUG";

async function main() {
  await DataStore.save(
    new Session({
      user: `Hello`
    })
  );
  await DataStore.save(
    new Session({
      user: `Hola`
    })
  );
}

main();

Running update and adding conflict resolution did not work in may case. _version was added but not _lastChangedAt or _deleted

@undefobj I think the point missed for the case of @ykbryan was that, since this is a functional React component, it should mention that invoking DataStore should be either within a useEffect hook or as an event handler function, as the component needs to mount.

The React component lifecycle should be respected.

Thanks for the reply !

It did not work for my case, I’ll try to setup a simple repro and maybe open another issue, or I’ll stick to using vanilla GraphQL.

It sounds like you don’t have a syncable API setup. Can you do the following:

  • Create react app
  • Inside that directory run npx amplify-app with the schema above
  • npm run amplify-modelgen inside that directory
  • npm i @aws-amplify/core @aws-amplify/datastore
  • npm run amplify-push
  • Run your app code