'ready'-event emitted before 'syncQueriesReady'-event in DataStore - React Native Expo only Android

tobiaskkd commented 1 year ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[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.

JavaScript Framework

React Native

Amplify APIs

DataStore

Amplify Categories

api

Environment information

``` # Put output below this line System: OS: macOS 13.4 CPU: (10) arm64 Apple M1 Pro Memory: 1.06 GB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm Browsers: Chrome: 114.0.5735.106 Firefox: 112.0.1 Safari: 16.5 npmPackages: @aws-amplify/datastore-storage-adapter: ^2.0.9 => 2.0.31 @azure/core-asynciterator-polyfill: ^1.0.2 => 1.0.2 @babel/core: ^7.12.9 => 7.21.8 (7.21.4) @expo/config-plugins: ~6.0.0 => 6.0.1 @expo/react-native-action-sheet: ^4.0.1 => 4.0.1 @react-native-async-storage/async-storage: 1.17.11 => 1.17.11 @react-native-community/netinfo: 9.3.7 => 9.3.7 @react-native-community/slider: 4.4.2 => 4.4.2 @react-native-picker/picker: 2.4.8 => 2.4.8 @react-navigation/bottom-tabs: ^6.5.2 => 6.5.7 @react-navigation/native: ^6.1.1 => 6.1.6 @react-navigation/native-stack: ^6.9.7 => 6.9.12 @react-navigation/stack: ^6.3.16 => 6.3.16 @sentry/react-native: 4.13.0 => 4.13.0 @shopify/flash-list: 1.4.0 => 1.4.0 @stripe/stripe-react-native: 0.23.3 => 0.23.3 @tsconfig/react-native: ^2.0.3 => 2.0.3 @types/aws-lambda: ^8.10.110 => 8.10.115 @types/jest: ^29.2.5 => 29.5.1 @types/lodash: ^4.14.192 => 4.14.194 @types/react: ~18.0.27 => 18.0.38 (18.0.37) @types/react-native: ^0.70.8 => 0.70.13 @types/react-native-vector-icons: ^6.4.12 => 6.4.13 @types/react-test-renderer: ^18.0.0 => 18.0.0 @typescript-eslint/eslint-plugin: ^5.53.0 => 5.59.2 @typescript-eslint/parser: ^5.53.0 => 5.59.5 HelloWorld: 0.0.1 ReactNativeRootToast: 0.0.1 amazon-cognito-identity-js: ^6.1.2 => 6.2.0 aws-amplify: ^5.2.5 => 5.2.5 aws-lambda: ^1.0.7 => 1.0.7 babel-plugin-module-resolver: ^4.1.0 => 4.1.0 babel-plugin-transform-remove-console: ^6.9.4 => 6.9.4 dotenv: ^16.0.3 => 16.0.3 eslint: ^8.34.0 => 8.40.0 eslint-config-airbnb: ^19.0.4 => 19.0.4 eslint-config-airbnb-typescript: ^17.0.0 => 17.0.0 eslint-config-prettier: ^8.6.0 => 8.8.0 eslint-import-resolver-typescript: ^3.5.3 => 3.5.5 eslint-plugin-import: ^2.27.5 => 2.27.5 eslint-plugin-jsx-a11y: ^6.7.1 => 6.7.1 eslint-plugin-prettier: ^4.2.1 => 4.2.1 eslint-plugin-react: ^7.32.2 => 7.32.2 eslint-plugin-react-hooks: ^4.6.0 => 4.6.0 expo: ^48.0.16 => 48.0.16 expo-apple-authentication: ~6.0.1 => 6.0.1 expo-application: ~5.1.1 => 5.1.1 expo-av: ~13.2.1 => 13.2.1 expo-blur: ~12.2.2 => 12.2.2 expo-build-properties: ~0.6.0 => 0.6.0 expo-constants: ~14.2.1 => 14.2.1 expo-dev-client: ~2.2.1 => 2.2.1 expo-device: ~5.2.1 => 5.2.1 expo-file-system: ~15.2.2 => 15.2.2 expo-font: ~11.1.1 => 11.1.1 expo-gl: ~12.4.0 => 12.4.0 expo-haptics: ~12.2.1 => 12.2.1 expo-linking: ~4.0.1 => 4.0.1 expo-notifications: ~0.18.1 => 0.18.1 expo-screen-orientation: ~5.1.1 => 5.1.1 expo-splash-screen: ~0.18.2 => 0.18.2 expo-sqlite: ~11.1.1 => 11.1.1 expo-status-bar: ~1.4.4 => 1.4.4 expo-system-ui: ~2.2.1 => 2.2.1 expo-updates: ~0.16.4 => 0.16.4 jwt-decode: ^3.1.2 => 3.1.2 liquidjs: ^10.4.0 => 10.7.1 lodash: ^4.17.21 => 4.17.21 lottie-react-native: 5.1.4 => 5.1.4 nativewind: ^2.0.11 => 2.0.11 prettier: ^2.8.4 => 2.8.8 prettier-plugin-tailwindcss: ^0.2.2 => 0.2.8 react: 18.2.0 => 18.2.0 react-native: 0.71.8 => 0.71.8 react-native-blurhash: ^1.1.10 => 1.1.10 react-native-date-picker: ^4.2.9 => 4.2.13 react-native-email-link: ^1.14.3 => 1.14.5 react-native-gesture-handler: ~2.9.0 => 2.9.0 react-native-purchases: ^5.14.0 => 5.14.0 react-native-reanimated: ~2.14.4 => 2.14.4 react-native-render-html: ^6.3.4 => 6.3.4 react-native-root-toast: ^3.3.1 => 3.4.1 react-native-safe-area-context: 4.5.0 => 4.5.0 react-native-screens: ~3.20.0 => 3.20.0 react-native-svg: 13.4.0 => 13.4.0 react-native-swiper: ^1.6.0 => 1.6.0 react-native-uuid: ^2.0.1 => 2.0.1 react-native-vector-icons: ^9.2.0 => 9.2.0 rn-vertical-slider: ^3.1.0 => 3.1.0 sentry-expo: ~6.1.0 => 6.1.1 tailwindcss: ^3.2.4 => 3.3.2 typescript: ^4.9.4 => 4.9.5 npmGlobalPackages: copyfiles: 2.4.1 corepack: 0.12.1 eas-cli: 3.13.3 firebase-tools: 11.9.0 npm: 8.15.0 typescript: 4.9.4 ```

Describe the bug

When launcing our app we are waiting for DataStore to finish syncing before rendering the content to keep the JS Thread clear. To do so we are waiting for the 'ready'-event to be emitted from DataStore. It works perfectly fine on iOS. However, the event is emitted before 'syncQueriesReady' on Android after around 80 ms. As a result the sync takes up to 1 minute on Android and rendering the content takes even longer since it is dependant on the data from DataStore.

Expected behavior

According to the Amplify DataStore documentation the 'ready'-event should be emitted after the 'syncQueriesReady'-event. Namely when DataStore as a whole is ready. From documentation: "Dispatched when DataStore as a whole is ready, at this point all data is available".

Reproduction steps

Show splashscreen on startup
Run DataStore.start() after user is signed in automatically
Subscribe to DataStore events using Amplify Hub
Set loading state to false when 'ready'-event is emitted to remove splashscreen

Code Snippet

// Put your code below this line.
  useEffect(() => {
    const dataStoreListener = Hub.listen(
      'datastore',
      async ({ payload: { event } }) => {
        consoleLogger(`Datastore event: ${event}`)
        if (event === 'ready') {
          consoleLogger('Datastore ready!')
          setIsLoading(false)
          consoleLogger(`Datastore took ${Date.now() - datastorestarttime}ms`)
        }
        if (event === 'storageSubscribed') {
          consoleLogger(`Datastore started`)
          datastorestarttime = Date.now()
        }
      }
    )
    return () => {
      dataStoreListener()
    }
  }, [])

Log output

``` // Put your logs below this line LOG Datastore event: storageSubscribed LOG Datastore started LOG Datastore event: networkStatus LOG Datastore event: outboxStatus LOG Datastore event: ready LOG Datastore ready! LOG Datastore took 72ms LOG Datastore event: subscriptionsEstablished LOG Datastore event: syncQueriesStarted LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: modelSynced LOG Datastore event: syncQueriesReady ```

aws-exports.js

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

const awsmobile = {
    "aws_project_region": "eu-west-3",
    "aws_appsync_graphqlEndpoint": "https://xxx.appsync-api.eu-west-3.amazonaws.com/graphql",
    "aws_appsync_region": "eu-west-3",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    "aws_cloud_logic_custom": [
        {
            "name": "stripeApi",
            "endpoint": "https://xxx.execute-api.eu-west-3.amazonaws.com/dev",
            "region": "eu-west-3"
        },
        {
            "name": "Utils",
            "endpoint": "https://xxx.execute-api.eu-west-3.amazonaws.com/dev",
            "region": "eu-west-3"
        }
    ],
    "aws_cognito_identity_pool_id": "eu-west-3:xxx,
    "aws_cognito_region": "eu-west-3",
    "aws_user_pools_id": "eu-west-xxx",
    "aws_user_pools_web_client_id": "xxx",
    "oauth": {
        "domain": "xxx.auth.eu-west-3.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "xxx://tabs/home/",
        "redirectSignOut": "xxx://signout/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_AND_IDENTITY_POOLS",
    "aws_cognito_username_attributes": [
        "EMAIL"
    ],
    "aws_cognito_social_providers": [],
    "aws_cognito_signup_attributes": [
        "EMAIL"
    ],
    "aws_cognito_mfa_configuration": "OFF",
    "aws_cognito_mfa_types": [
        "SMS"
    ],
    "aws_cognito_password_protection_settings": {
        "passwordPolicyMinLength": 8,
        "passwordPolicyCharacters": []
    },
    "aws_cognito_verification_mechanisms": [
        "EMAIL"
    ],
    "aws_user_files_s3_bucket": "xxx-dev",
    "aws_user_files_s3_bucket_region": "eu-west-3"
};

export default awsmobile;

Manual configuration

DataStore.configure({
  storageAdapter: ExpoSQLiteAdapter,
  errorHandler: (error) => errorLogger(error),
  fullSyncInterval: 60 * 60 * 24 * 7, // 1 week
})

Additional configuration

No response

Mobile Device

Google Pixel 7

Mobile Operating System

Android 13

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

chrisbonifacio commented 1 year ago

Hi @tobiaskkd 👋 thanks for raising this issue. While we reproduce this issue, we noticed that you are using the SQLite adapter and that the package version is a little behind the current version. Do you mind upgrading it and letting us know if it makes a difference in the behavior you're seeing?

@aws-amplify/datastore-storage-adapter: ^2.0.9 => 2.0.31

tobiaskkd commented 1 year ago

Hi @tobiaskkd 👋 thanks for raising this issue. While we reproduce this issue, we noticed that you are using the SQLite adapter and that the package version is a little behind the current version. Do you mind upgrading it and letting us know if it makes a difference in the behavior you're seeing?

@aws-amplify/datastore-storage-adapter: ^2.0.9 => 2.0.31

Hi @chrisbonifacio

Thanks for your feedback! I upgraded the package to @aws-amplify/datastore-storage-adapter@^2.0.36 but unfortunately it did not make any change. BR Tobias

Akash-T2S commented 11 months ago

Facing the same issue frequently even in amplify version 4.3.14

david-mcafee commented 9 months ago

Just unassigned this from me so that this can be picked up for reproduction (cc @chrisbonifacio)

aws-amplify / amplify-js