Amplify-js: How are local DataStores connected to existing AppSync endpoints?

[lukevandekieft]

* Which Category is your question related to? *
DataStore

* What AWS Services are you utilizing? *
AppSync

* Provide additional details e.g. code snippets *
I've successfully created a local DataStore using the Amplify tutorial but have been unable to connect & sync it to an existing AppSync application. The instructions mainly mention the import block:

import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);

This setup was successful for AppSync on its own but not DataStore. Could you give me more detail on _how_ and _where_ the connection between a local DataStore and a hooked up AppSync app is established? Thank you!

[wilcoschoneveld]

I have the same question.

I have set up my app using:

import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);

But it looks like my calls to DataStore.save are not synced with the backend. I see the data in IndexedDB in the browser but not in DynamoDB on AWS.

Thanks!

[manueliglesias]

Hi @lukevandekieft

I've successfully created a local DataStore using the Amplify tutorial but have been unable to connect & sync it to an existing AppSync application.

Could you give me more detail on how and where the connection between a local DataStore and a hooked up AppSync app is established?

The local DataStore uses the AppSync API specified in the aws-exports.js file. One important thing to mention here is that, for now, it assumes the API was provisioned/created with the npx amplify-app command (since that command creates datasources with "Enable data source versioning" as true and the queries/mutations/subscriptions required by the DataStore)

[gabehollombe-aws]

@manueliglesias For adding DataStore to existing projects, is it sufficient to just run amplify update api and go through the CLI menu to enable conflict detection for the API? Similar to what @dabit3 shows here: https://github.com/dabit3/amplify-datastore-example#adding-datastore-to-an-existing-graphql-api

[Rjgoolsby]

@gabehollombe-aws I spent the last 3 days trying to get Datastore to sync online and the only way I could get this to work was to start a new project

npx amplify-app@latest --platform javascript --framework vue
npm run amplify-modelgen
amplify init
amplify add auth
amplify push

I still can't get it to work in a existing project by using amplify update api. The datastore saves to the IndexedDb but it won't sync with DynamoDb. At a loss right now. So basically it seems like if you already have an AppSync project your only option is to create a "new api" and migrate your data. I hope someone comes along and corrects me or show me what I'm doing wrong.

[kwoxford]

Same here

[undefobj]

@kwoxford @Rjgoolsby @gabehollombe @wilcoschoneveld @lukevandekieft
For existing Amplify projects you will indeed need to make them a "sync-enabled" API so that the proper fields come back from the AppSync endpoint and also so that it properly uses the sync operation in it's resolver. If you run amplify update api you'll see this in the advanced settings when asked to enable conflict detection and resolution.

We are also going to add a new step to amplify update api where you can do this in a single step rather than walking through the other advanced options. You can track the progress of that PR here: https://github.com/aws-amplify/amplify-cli/pull/3495

[Rjgoolsby]

@undefobj OK. That makes sense. I would've never figured that out. Thanks for the help!

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[ericclemmons]

Confirmed that https://github.com/aws-amplify/amplify-cli/pull/3495 gets DataStore + API syncing!

1. amplify add api

2. amplify update api

   ❯ amplify update api
   ? Please select from one of the below mentioned services: GraphQL
   ? Select from the options below
     Walkthrough all configurations
     Update auth settings
   ❯ Enable DataStore for entire API
   

3. amplify push
4. 🎉

[brataaaan]

@ericclemmons
Unfortunately still not working for me. Getting error "DataStore - Sync error, subscription failed Subscribe only available for AWS AppSync endpoint".

It is configured in the Amplify.Confirgure({}). Do I have to configure the endpoint also for DataStore.configure(awsconfig) separately? If true, how?

Thank you

[ericclemmons]

@brataaaan No, you shouldn't have to configure DataStore separately. Are you using aws-exports.js that's generated from the CLI?

import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);

If you're still having trouble, feel free to open a new issue with steps to reproduce your exact situation so we can continue there!

[brataaaan]

@ericclemmons thanks only configuring Amplify.configure({}) made the message disappear. Thank you. :-)

[arckdash]

I recently ran into the same issue, but I managed to solve it by simply going to the AWS amplify console, clicking on my application's name, going to Backend Environment tab, when expanding the label: Edit Backend you get a command like

$ amplify pull --appId XXXXXXX --envName XXXX

Note this command must be run in a project that hasn't been initialised with amplify yet, if already did so and u don't mind losing any potential progress you got in there, just delete the amplify folder plus the aws-exports.js or run the command:
$ amplify delete

After running the amplify pull command it'll ask you to choose an AWS profile u will manage to see all the resources that are associated with the given App, such as:

• Auth
• Api
• etc ...
  when the command is done running, simply execute: amplify pull and i'll effectively pull all the backend created from a different project.

Also note to choose Y when the CLI asks you if you want to edit the BE, this will allow you to modify the BE from any FE app, and then you just need to run amplify pull on the corresponding project to keep them synced.

Also if you're using DataStore, you will need to run: amplify codegen models or npm run amplify-modelgen

to create the models in your new project.

Hope this helped :)

[wmadden]

After several days' suffering I discovered:

1. DataStore will fail silently if any of a hundred conditions aren't exactly what it expects. Set Amplify.Logger.LOG_LEVEL = "DEBUG" to get some information about what's happening
2. If you're using the @auth directive you must explicitly add the owner: String field to your models (https://github.com/aws-amplify/amplify-js/issues/5687#issuecomment-631185661)
3. You must add conflict detection (documented here), but that's not enough
4. You will now have _version, _deleted and _lastUpdatedAt fields in your schema but any records in your DynamoDB tables will have these fields blank and DataStore will fail to fetch/subscribe to them. You must manually populate these fields (data types documented here)

I'm documenting this here in the hopes other people will find this information more easily than I did.

To the Amplify team: debugging the DataStore is super difficult. Even once you enable logging, there's no guidance on what to expect. The only error I got was [WARN] 48:14.452 DataStore - subscriptionError Connection failed: {"errors":[{"message":"Validation error of type MissingFieldArgument: Missing field argument owner @ 'onDeletePlant'"}]} - which isn't even an error, it's presented as a warning! (My comment seeking help)

It would help a lot to have more transparency in the inner functioning of DataStore. As opaque as it's presented, I'm pretty hesitant to advocate for its adoption in production apps.