In production datastore doesn't sync

apoorvmote commented 4 years ago

Describe the bug I manually deployed 3 different react app with

graphql api dynamodb
cognito auth with email
everything default with create-react-app settings
using typescript with react

Everything syncs in development (localhost) but doen't sync in deployed app in both cases amplify app domain & custom domain.

auth works in production but graphql api doesn't sync

I am able to login with email in production but cannot sync.

I deployed manually with

directly from console
using amplify cli to deploy manually

Both cases no queries are made and no mutations are made. Only offline access is avaialble.

Expected behavior If it can sync on development (localhost) then it should also sync in production (amplifyapp domain or custom domain).

apoorvmote commented 4 years ago

In case there is confusion it doesn't sync in react production build on amplify app or custom domain. It does sync on react development build on localhost. I checked the build folder and in build/static/js/mainxxxxchunk.js.map has actual graphql endpoint.

luissombra commented 4 years ago

the same issue here

dan8f commented 4 years ago

Having the same problem with the sync here.

In my case, a React web app created with create-react-app, DataStore does not sync with the cloud when the production version of the app is published but it does sync with development build.

luissombra commented 4 years ago

I ran the command yarn upgrade --latest to update the packages but the problem persists. The versions of my dependencies are as follows:

 "@aws-amplify/analytics": "^3.1.7",
"@aws-amplify/api": "^3.1.7",
"@aws-amplify/auth": "^3.2.4",
"@aws-amplify/core": "^3.2.4",
"@aws-amplify/datastore": "^2.0.8",
"@aws-amplify/interactions": "^3.1.7",
"@aws-amplify/pubsub": "^3.0.8",
"@aws-amplify/storage": "^3.1.7",
"@aws-amplify/ui": "^2.0.2",
"@aws-amplify/xr": "^2.1.7",
"@material-ui/core": "^4.9.11",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.50",
"@material-ui/pickers": "^3.2.10",
"@material-ui/styles": "^4.9.10",
"@testing-library/jest-dom": "^5.5.0",
"@testing-library/react": "^10.0.2",
"@testing-library/user-event": "^10.0.2",
"apexcharts": "^3.18.1",
"autosuggest-highlight": "^3.1.1",
"aws-amplify-react": "^4.1.7",
"font-awesome": "^4.7.0",
"formik": "^2.1.4",
"lodash": "^4.17.15",
"material-ui-chip-input": "^2.0.0-beta.2",
"material-ui-formik-components": "^0.6.1",
"mui-datatables": "^2.6.4",
"promise": "^8.1.0",
"react": "^16.13.1",
"react-apexcharts": "^1.3.7",
"react-dom": "^16.13.1",
"react-google-maps": "^9.4.5",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"react-syntax-highlighter": "^12.2.1",
"react-toastify": "^5.3.2",
"recharts": "^1.6.2",
"tinycolor2": "^1.4.1",
"yup": "^0.28.3"

elorzafe commented 4 years ago

@apoorvmote

I reproduced the issue, meanwhile can you try doing?

Amplify.configure(awsconfig);
DataStore.configure(awsconfig);

We will be root causing the issue to publish a fix soon

luissombra commented 4 years ago

thanks @elorzafe, this solved my problem.

@apoorvmote

I reproduced the issue, meanwhile can you try doing?
Amplify.configure(awsconfig);
DataStore.configure(awsconfig);
We will be root causing the issue to publish a fix soon

apoorvmote commented 4 years ago

@elorzafe

 Amplify.configure(awsconfig);
 DataStore.configure(awsconfig);

Like I said I use typescript and DataStore takes DatastoreConfig

export declare type DataStoreConfig = {
    DataStore?: {
        conflictHandler?: ConflictHandler;
        errorHandler?: (error: SyncError) => void;
        maxRecordsToSync?: number;
        syncPageSize?: number;
        fullSyncInterval?: number;
    };
    conflictHandler?: ConflictHandler;
    errorHandler?: (error: SyncError) => void;
    maxRecordsToSync?: number;
    syncPageSize?: number;
    fullSyncInterval?: number;
};

awsconfig absolutely does not match with DataStoreConfig

I get following error

Type '{ aws_project_region: string; aws_cognito_identity_pool_id: string; aws_cognito_region: string; aws_user_pools_id: string; aws_user_pools_web_client_id: string; oauth: {}; aws_cloud_logic_custom: { ...; }[]; aws_appsync_graphqlEndpoint: string; aws_appsync_region: string; aws_appsync_authenticationType: string; }' has no properties in common with type 'DataStoreConfig'.

elorzafe commented 4 years ago

@apoorvmote I merged a PR with the fix, you could try the unstable version

arnm commented 4 years ago

Is there a workaround until a new version of amplify is released?

Also when will this fix be released? Next release?

apoorvmote commented 4 years ago

And how do I install unstable version? I am searching on google but not finding anything that works.

Edit: There are some solution that maybe working. But I require Typescript solution. If not available then I will wait for next stable release.

elorzafe commented 4 years ago

For install unstable release:

yarn add @aws-amplify/datastore@unstable using yarn

npm install @aws-amplify/datastore@unstable using npm

apoorvmote commented 4 years ago

this is my package.json "@aws-amplify/datastore": "^2.0.8-unstable.33",

I deployed twice. And error still persists. Nothing is syncing. I tested with congnito window.

I uninstalled datastore from package.json and re installed it. And in 2nd deployment everything was skipped because I had it right the first time.

sebboe commented 4 years ago

Same problem in an Angular project.

I tried with: "@aws-amplify/datastore": "^2.0.9" and "@aws-amplify/datastore": "^2.0.10-unstable.2"

No sync with production build. Building with "ionic build --prod".

sebboe commented 4 years ago

@apoorvmote Workaround: adding DataStore in my main.ts with no argument worked for me.

import Amplify, { DataStore } from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);
DataStore.configure();

apoorvmote commented 4 years ago

@sebboe Thanks for the workaround. But it's working for me in react with @aws-amplify/datastore 2.0.9

cnegrisanu commented 4 years ago

@apoorvmote @sebboe @elorzafe Hey guys, this is the closest ticket I found to what I'm currently experiencing. I have a PWA app written in Quasar (Vue framework). I setup the entire CICD with Amplify Vue frontend + AppSync backend + Datastore. I am using git-flow with master, develop and feature branches. They are connected to my Bitbucket account and the pipeline works fine. Pulls from repo, and succesfully deploys the app, both front-end and backend. Like the name of the issue, when I deploy locally, the app works fine and Datastore is doing its job saving locally as well as syncing with the backend Graphql. In the backend I have dev, prod and test envs and I set it up so each feature branch deploys to its own backend. When I try the apps deployed on the amplify domain from different branches, they are working fine with the Datastore but there's no syncing to the Graphql API. I'm using "@aws-amplify/datastore": "^2.0.10". I tried serveral times to remove and re-add the backend, to checkout and pull different envs and re-set them up basically went back and forth through all the documentation...and could not get it to sync. Every time I switch the browser to offline and back online, it never even tries to send the graphql calls like it does on localhost. While I was doing all these tests, somehow... and the stupid thing is I don't know how... I manage to get ONE branch to work..... but all my efforts to replicate the same thing into another branch...were unsuccessful. Please, I need to know what makes the Datastore aware of the backend api and what makes it send those sync calls? I know, I could go through the code but I was hoping this will help others as well. I tried the workarounds posted above and none of them helped. I even tried to clone the "working" branch and deploy it to a different one and still no luck. I've spent my entire last week trying to troubleshoot this. Please help!!!

apoorvmote commented 4 years ago

@cnegrisanu I understand your frustration. But there no "SPECIAL" thing I did to make datastore sync. I use react and it works just like to documentation. I think your's is special case because of your choice of framework/library and you should make separate issue with appropriate code. I am sure aws amplify team will be happy to fix your problem.

doraeball22 commented 4 years ago

@sebboe Thank, it's works for me in my Angular project

// main.ts import PubSub from '@aws-amplify/pubsub'; import API from '@aws-amplify/api'; import awsconfig from './aws-exports'; import Amplify, { DataStore } from 'aws-amplify';

API.configure(awsconfig); PubSub.configure(awsconfig); Amplify.configure(awsconfig); DataStore.configure();

github-actions[bot] commented 3 years ago

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.

aws-amplify / amplify-js

In production datastore doesn't sync #5448

auth works in production but graphql api doesn't sync