AWS amplify datastore wont synchronise with server

Question

So I'm trying to get AWS Amplify's datastore library working with a reactJS web app I'm building. I was sending data to and from the api just fine using the graphql mutations manually, and then I tried to set up DataStore by following this tutorial. Everything is working fine in the client with the indexed DB, but I can't get the data to synchronise with the api. I get the following error in the console:

 DataStore - Data won't be synchronized. No GraphQL endpoint configured. Did you forget `Amplify.configure(awsconfig)`?

I doubled checked, and I'm definitely including my AWS export as so:

import Amplify from "@aws-amplify/core";
import awsExports from "./aws-exports";

Amplify.configure(awsExports);

And the content of the generated ./aws-exports.js is the following:

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-2",
    "aws_appsync_graphqlEndpoint": "https://xxxxxxxxxxxxxx.appsync-api.us-east-2.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-2",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "xxxxxxxxxxxxxx",
    "aws_cognito_identity_pool_id": "us-east-2:xxxxxxxxxxxxx",
    "aws_cognito_region": "us-east-2",
    "aws_user_pools_id": "us-east-2_xxxxxxxxx",
    "aws_user_pools_web_client_id": "xxxxxxxxxxxxxxxxxx",
    "oauth": {}
};


export default awsmobile;

I've double checked the credentials for aws_appsync_graphqlEndpoint and aws_appsync_apiKey and they match the values returned from amplify status in the cli. I've also run amplify push and my Api has a status of No Change. When setting up the api I made sure to enable the conflict resolution too, as specified in the tutorial.

Interestingly, I also tried the following when setting up amplify:

import Amplify from "@aws-amplify/core";
import {DataStore} from "@aws-amplify/datastore";
import awsExports from "./aws-exports";

Amplify.configure(awsExports);
DataStore.configure(awsExports);

This solved the DataStore - Data won't be synchronised error, but I got the following errors instead, and the data still isn't being sent to the api.

DataStore - subscriptionError Subscribe only available for AWS AppSync endpoint
DataStore - Sync error Subscribe only available for AWS AppSync endpoint

Does this mean my API is somehow not configured properly? How Would I go about fixing it?

Answer 1

I have been fiddling with the DataStore syncing for a while in a Angular project. Here is what I think I learned, from my observations or answers posted by others

1. Can't use API key authentication, that does not work. I use Cognito user pool and that works
2. Had to enable Optimistic Concurrency as conflict resolution strategy, but I think it works even with the default Auto Merge, not sure exactly when is the first needed
3. All types need an auto-generated id of type "ID!". Without that, you get errors when the listeners are setup and syncing does not work even for types that have it.
4. Make sure the code is regenerated and pushed, and DataStore stays enabled after each schema change (sometimes that setting may reset)

For troubleshooting, enable tracing (Amplify.Logger.LOG_LEVEL = 'DEBUG') and filter in browser's console for messages that contain "err". If any such messages exist, the entire sync does not work. That is how you can tell if you have one of the issues above.

Another trick is to delete the local amplify-datastore IndexDB in Chrome Dev Tools' Application/Storage. If sync works, it will be re-populated from the DynamoDB table data in the cloud next time you reload your app.

Answer 2

I got the same error when I imported DataStore from aws-amplify instead of @aws-amplify/datastore. It took me a while to figure it out but all I had to do was change the import statement.

So, try changing your import statement from:

import { DataStore } from "aws-amplify";

to:

import { DataStore } from "@aws-amplify/datastore";

Answer 3

This must be a problem, coming up with a recent update. About a week ago I successfully used DataStore (v2.2.8) in an expo app. Yesterday, I started a new expo app project and cannot figure out a way to get the DataStore up and running with sync. Did you try an older version of @aws-amplify/datastore?

Answer 4

Somewhere from between @aws-amplify/datastore version 2.9.6 to 2.9.9 they changed the Amplify Configure. You now need to put your aws-exports in {config: } However, I can not get 2.9.9 to load data, so I'm staying on 2.9.8

2.9.8 and before:

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

2.9.9:

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

Answer 5

In addition to what other people have said. Try removing the node modules & package-lock.json. Then run npm cache clean --force and then npm i. This worked for me with just normal Amplify.configure(config)

Answer 6

In the root of your application, do this:

import { Amplify } from "aws-amplify";
import config from "../src/aws-exports.js";

Amplify.configure({
  ...config,
});

That should fix it for you.