Datastore issues. Created item in AppSync console, now Datastore won't sync.

[trevorkirchner]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• [X] I have removed any sensitive information from my code snippets and submission.

App Id

d2eg9d3k4jtgr1

Region

us-east-1

Environment name

amplify-servo-app

Figma File Version (if applicable)

No response

Amplify CLI Version

No response

If applicable, what version of Node.js are you using?

11.0.2

What operating system are you using?

Windows

Browser type?

Google Chrome

Describe the bug

I am creating an app in React JS and I am having issues with the DataStore API working correctly in my app.

I have components in Figma, and from scratch in their own components folder so that they aren't overwritten from pulls. I don't believe there are issues with my code, but the issues happens when I run a mutation in the AppSync console.

I wanted to create 'Dummy' data to put in the app for testing purposes. Basically a bunch of made up users in a USER dynamodb table.

I am able to create the users no problem and see them when I query them in the AppSync console, or directly look at the items in the dynamodb console. The problem is, when I've done this, DataStore just stops working on my app. It only loads local data.

The first time I did this, I was able to fix it by changing "import { DataStore } from 'aws-amplify';" to "import { DataStore } from '@aws-amplify/datastore';" in my components utilizing datastore and poof, it worked again. So now I created the users again, but the issue came back. DataStore will not sync no matter how I import DataStore or any of the other fixes I have seem work for people that have had DataStore issues.

I am fairly new to dynamodb, graphql, and datastore, but so far despite this issue, I am really happy with the results and functionality I have been able to incorporate with these, so I don't wan to change them.

Any help on resolving his DataSore issue would be greatly appreciated!

Expected behavior

await DataStore.query, await DataStore.save are no syncing. Even on figma created components that I have not changed code on, this issue persists and will not sync with the cloud, only stay local.

Reproduction steps

1. App and DataStore work fine, no issues.
2. I create items in AppSync console.
3. I can query and see items are in fact stored in the dynamodb table.
4. Go back to the app, and and can't see the new data.
5. Try running DataStore.save or DataStore.query and they only pull or create local data. No syncing.
6. I changed the way DataStore is imported, worked once, doesn't work now.
7. Tried a handful of other "fixes" that worked for others that faced similar problems, but still can't get it to work.

Project Identifier

08a7c7f0d8ddc71dd3658efcf1a4a4bc

Additional information

No response

[chrisbonifacio]

Hi @trevorkirchner 👋 thanks for raising this issue.

Can you share an example of what a record looks like that was created in the AppSync console? And, on the client side, please share any DataStore errors that might be logged to the console or network tab under graphql

[trevorkirchner]

This what I ran to create the made up user: mutation MyMutation { update1: createUSERS(input: {ACTIVE: true, CITY: "Austin, TX", COST_CENTER: "50793", COUNTRY: "United States", CREATE_DATE: "2023-03-08", DEPARTMENT: "Information Technology", EMAIL: "John.Thompson@AZ.com", EMPLOYEE_ID: 65214893, EMPLOYMENT_START_DATE: "2011-12-07", FIRST_NAME: "John", LAST_NAME: "Thompson", LEGAL_HOLD: true, LOOKUP: 2, MANAGER: "Adams, William", PRID: "ksqe515", TITLE: "Chief Information Officer"}) }

This is a new error that I got from creating that item in the USERS table: [WARN] 49:24.221 DataStore - Skipping incoming subscription. Messages: Cannot return null for non-nullable type: 'AWSDateTime' within parent 'USERS' (/onCreateUSERS/createdAt) Cannot return null for non-nullable type: 'AWSDateTime' within parent 'USERS' (/onCreateUSERS/updatedAt) Cannot return null for non-nullable type: 'Int' within parent 'USERS' (/onCreateUSERS/_version) Cannot return null for non-nullable type: 'AWSTimestamp' within parent 'USERS' (/onCreateUSERS/_lastChangedAt)

This is something that pops up from Amplify.Logger.LOG_LEVEL = 'DEBUG' [DEBUG] 53:44.624 AWSAppSyncRealTimeProvider - subscription message from AWS AppSync RealTime: {"type":"ka"}

[chrisbonifacio]

There are some missing required fields on the records created through AppSync.

Make sure that all your records have a value for createdAt, updatedAt, _version (set this to 1, it is then managed by AppSync), and _lastChangedAt

These missing fields are preventing DataStore from being able to sync the records

[trevorkirchner]

@chrisbonifacio thank you for getting back to me so quickly!

Even if they auto populate after it is created? See AppSync response below:

{ "data": { "listUSERS": { "items": [ { "updatedAt": "2023-03-22T14:49:24.372Z", "id": "145472e2-466d-4a1f-8630-9bd2db0dd885", "createdAt": "2023-03-22T14:49:24.372Z", "_version": 1, "_lastChangedAt": 1679496564395, "_deleted": null, "TITLE": "Chief Information Officer", "PRID": "ksqe515", "MANAGER": "Adams, William", "LOOKUP": 2, "LEGAL_HOLD": true, "LAST_NAME": "Thompson", "FULL_NAME": null, "FIRST_NAME": "John", "EMPLOYMENT_TERM_DATE": null, "EMPLOYMENT_START_DATE": "2011-12-07", "EMPLOYEE_ID": 65214893, "EMAIL": "John.Thompson@AZ.com", "DEPARTMENT": "Information Technology", "CREATE_DATE": "2023-03-08", "COUNTRY": "United States", "COST_CENTER": "50793", "CITY": "Austin, TX", "ACTIVE": true } ] } } }

I have even gone and deleted the previously created records incase there was an issue with them syncing, but then all DataStore functions stop working. I can't even save data from the app then.

[chrisbonifacio]

As long as the records are created through DataStore, those fields should be populated. AppSync handles the timestamps and versioning fields required for DataStore to work.

This is only usually a problem when manually putting items in DynamoDB.

So, even after clearing all the records DataStore is still having issues syncing? Are the errors in the console any different? Might be worth clearing the local indexedDB data as well.

[trevorkirchner]

I normally create, edit records in DataStore, but since I was adding bulk, I created them in the actual appsync console. The first time I did this, they actually synced and I could see them for a bit, but then the second time I couldn't see them.

I deleted all the recordes created in the appsync console from the dynamodb console and I ran "await DataStore.clear();"

I am getting this error when going to other pages even though I cleared it about 30 min ago:

datastore.ts:1483 Uncaught (in promise) Error: DataStoreStateError: Tried to execute DataStore.query() while DataStore was "Clearing". This can only be done while DataStore is "Started" or "Stopped". To remedy: Ensure all calls to stop() and clear() have completed first. If this is not possible, retry the operation until it succeeds.

[chrisbonifacio]

Is there any code calling DataStore.query? Might've called clear while that was running. Does it work if you try again?

If that doesn't work, might have to clear indexedDB from the browser dev tools. Inspect the page -> Application -> indexedDB -> Delete amplify_datastore -> refresh page

[trevorkirchner]

Sorry, let me explain better. I have await DataStore.query() in a function that I am calling from a button on a test/utility page. On other pages, I have useEffect functions getting querying data, so when I go to those pages, they run, which prompts that error.

Here is an example of a one of the functions getting USER data for a table displayed on that page.

useEffect(() => { async function fetchUsers() { const models = await DataStore.query(USERS); console.log(models); setUsers(models); } fetchUsers(); }, []);

[chrisbonifacio]

Oh okay, I think I understand now. So even just navigating to these pages results in that error as they query on mount. Can you share how you might be configuring Amplify and/or DataStore?

I'm also curious what amplify packages and versions you might have installed, so if you could share that from your package.json file please do 🙏

[trevorkirchner]

I tried deleting datastore from the indexdb, which cleared the local storage, but it is still not syncing. Here is my package.json:

{ "name": "amplify-servo-app", "version": "0.1.0", "private": true, "dependencies": { "@aws-amplify/ui-react": "^4.4.1", "aws-amplify": "^5.0.21", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.7.1", "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

[chrisbonifacio]

Thank you! Could you also share any instances of Amplify.configure and/or DataStore.configure in your app?

[trevorkirchner]

This is in my App.js file. But I only added this after the issues started. As for DataStore.configure, I can't find a place where I have that in the code. Is there a specific place it should be or I should look?

import awsConfig from "./aws-exports"; import { Amplify } from "aws-amplify"; Amplify.configure({ config: { awsConfig } });

[chrisbonifacio]

The configuration was added after the issues started? 🤔 that would mean that DataStore was in offline mode because there was no graphql endpoint to send mutations to and sync from.

I recommend changing the config to this

Amplify.configure(awsConfig)

I would expect that nesting to cause configuration errors in the console like this

[trevorkirchner]

Now that I look, I did have Amplify.configure(awsconfig); in my index.js file. I made the change in my App.js file and it still is not syncing.

I haven't seen anything in documentation that says to put DataStore.configure anywhere in the app?

[trevorkirchner]

I have not seen that error either. It is just weird that everything worked fine until I created entries in the AppSync console.

[chrisbonifacio]

Make sure there's only one instance of Amplify.configure.

DataStore.configure is only required if not using Amplify.configure.

Are you still running into the same error regarding query being called while DataStore is clearing?

[trevorkirchner]

Oh okay, it's only in the index.js file now. I am not running into that issue anymore, but I have tried to use one of my create forms that utilizes datastore.save and it is still only saving locally.

[chrisbonifacio]

Any errors from DataStore in the console? If you check the Network tab in the dev tools, do you see any graphql requests that are failing? Or even if they are 200 status codes, maybe there are Unauthorized responses?

[trevorkirchner]

Here are a bunch of 200 codes currently:

Here are responses from my DEBUG:

When I refresh the browser, I get this Datastore error:

[aka334]

any update on this?

[dpilch]

The error indicates that invalid data was entered into AppSync.

Can't serialize value (/syncREQUESTS/items[2]/REQUEST_TYPE) : Invalid input for Enum 'REQUESTTYPE'."

You will need to remove or update these records in order for DataStore to sync successfully.

I would recommend using the data manager on Studio to enter test data.

[trevorkirchner]

I removed the records and am no longer getting that error. But DataStore is still not syncing. I tried creating a user in my form that was built in the Amplify/figma combo, that used to work and sync, and still nothing. Only stays local.

[chrisbonifacio]

@trevorkirchner what's the latest error/warning from DataStore? Sorry to ask again, we're just going to have to knock each one out until you're unblocked 😅 thanks for bearing with us thus far.

[trevorkirchnerID]

I’m actually not getting any datastore errors now, but I am not seeing anything from datastore in the console no matter what I try to run (ex: datastore.save or datastore.query)

[trevorkirchner]

^ That was from another account on my phone. Didn't realize I was logged into another account when I opened github from the email attachment from my mobile email.

[trevorkirchner]

This morning, I tried creating an item in the Amplify data manager console and it has not synced to my app. I deleted the DataStore IndexedDB in the dev tools and refreshed. Closed the app. Restarted the app. Nothing. I have no idea how it went from syncing perfectly fine with whatever action I ran to not doing anything now. It's like DataStore is turned off.

[dpilch]

You are certain there are no errors or warnings in the console? It is odd that we wouldn't see anything. Do you have window.LOG_LEVEL = 'DEBUG' set in your app?

What about the mutation and sync requests in the network tab? Do you see anything odd in the responses?

[trevorkirchner]

When I put that in my App.js file, I see this:

[trevorkirchner]

As for anything odd in the network responses, nothing that really stands out, but then again, I'm not 100% sure what I should be looking for.

[trevorkirchner]

I also just noticed that in the Amplify Data Manager console it is still saying syncing after over 30 min. And the dev console there had this error.

[guy-a]

Hey @trevorkirchner, can you try this npm i aws-amplify@5.0.15 ?

[trevorkirchner]

@guy-a I tried it, and it still isn't syncing. Tried making an item in my app and in the amplify data manager and data is not syncing to the dynamodb. I've checked the configuration of the API in amplify, appsync, my app. I don't see a glaring issue. This is very puzzling

[trevorkirchner]

So I created an item (user) in the USER table in AppSync and I can see it when I go to the DynamoDB console and look at the table items.

I even went a step further and created the below function attached to a button on the page, which runs a normal graphql query of listUSERs and it actually brings back the newly created user data.

function getUsers() { API.graphql(graphqlOperation(listUSERS)) .then(response => console.log(response)) .catch(error => console.log(error)); }

So a normal graphql query works and connects to appsync, but DataStore will not. I can also not see that user in in the Amplify Studio Data Content window.

[trevorkirchner]

I am still stuck on this issue. Any help is greatly appreciated!

[chrisbonifacio]

Thanks for providing more info. It is very unusual that API works and not DataStore. I think in order to fully understand what might be misconfigured here, we might need to troubleshoot your front end code.

Is this a public repository or a private one you can invite either myself or @dpilch to that we can clone locally and try ourselves?

If not, we could at least try recreating your backend and plug it into one of our test apps if you run amplify diagnose --send-report and provide us with the project identifier that is output.

[chrisbonifacio]

Hi @trevorkirchner, following up in case you're still running into any issues. If so, please see my previous comment for steps that will help us unblock you.

[chrisbonifacio]

Hi 👋 Closing this as we have not heard back from you. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with any information previously requested by our team members so we can re-open this issue and be better able to assist you.

Thank you!

[trevorkirchner]

Hey @chrisbonifacio sorry for the late response, I was travelling. I was able to get it corrected last night. I copied my schema, ran amplify remove api, pushed, created the api again, added my old schema text, pushed, created some test data in Amplify Studio data manager, pulled, and everything seems back to normal. Thank you for your help regardless!