Datastore returning old version on app startup and then shortly updating

[itsramiel]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• 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 Version

v6

Amplify Categories

No response

Backend

Amplify CLI

Environment information

# Put output below this line
  System:
    OS: macOS 14.3.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 2.30 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 123.0.6312.124
    Safari: 17.3.1
  npmPackages:
    @aws-amplify/react-native: ^1.0.28 => 1.0.28
    @azure/core-asynciterator-polyfill: ^1.0.2 => 1.0.2
    @babel/core: ^7.20.0 => 7.24.4
    @babel/preset-env: ^7.20.0 => 7.24.4
    @babel/runtime: ^7.20.0 => 7.24.4
    @react-native-async-storage/async-storage: ^1.23.1 => 1.23.1
    @react-native-community/netinfo: ^11.3.1 => 11.3.1
    @react-native/babel-preset: 0.73.21 => 0.73.21
    @react-native/eslint-config: 0.73.2 => 0.73.2
    @react-native/metro-config: 0.73.5 => 0.73.5
    @react-native/typescript-config: 0.73.1 => 0.73.1
    @types/react: ^18.2.6 => 18.2.79
    @types/react-test-renderer: ^18.0.0 => 18.0.7
    HelloWorld:  0.0.1
    aws-amplify: ^6.0.28 => 6.0.28
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    babel-jest: ^29.6.3 => 29.7.0
    eslint: ^8.19.0 => 8.57.0
    jest: ^29.6.3 => 29.7.0
    prettier: 2.8.8 => 2.8.8
    react: 18.2.0 => 18.2.0
    react-native: 0.73.7 => 0.73.7
    react-native-get-random-values: ^1.11.0 => 1.11.0
    react-test-renderer: 18.2.0 => 18.2.0
    typescript: 5.0.4 => 5.0.4
  npmGlobalPackages:
    @aws-amplify/cli: 12.11.1
    corepack: 0.23.0
    eas-cli: 7.3.0
    npm: 10.2.4
    yarn: 1.22.21

Describe the bug

When I update a model record locally in the app and then I reload(in development) or close and open the app(in release) the app, the datastore returns an older version of the record and then updates to the latest version.

Expected behavior

The expected behavior is that when I reload the app or open it from a closed state the record version I should receive immediately should be at least the same version that I had before I did the reload/closed the app since the records are persisted.

Reproduction steps

1. Initialize a new amplify with default datastore project following the guide
2. paste the following in your App.tsx:

import '@azure/core-asynciterator-polyfill';
import {DataStore} from 'aws-amplify/datastore';
import {Button, View} from 'react-native';

import {Todo} from './src/models';
import {useEffect} from 'react';
import {Amplify} from 'aws-amplify';
import amplifyconfig from './src/amplifyconfiguration.json';
import {ConsoleLogger} from 'aws-amplify/utils';

Amplify.configure(amplifyconfig);
ConsoleLogger.LOG_LEVEL = 'WARN';

function App() {
  useEffect(() => {
    DataStore.observeQuery(Todo).subscribe(snaptshot => {
      const todo = snaptshot.items[0];
      console.log("todo's name from observe:", todo.name);
    });
  }, []);

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Button
        title="create post"
        onPress={async () => {
          await DataStore.save(
            new Todo({
              name: '1',
              description: 'desc',
            }),
          );
        }}
      />
      <Button
        title="update post"
        onPress={async () => {
          let todo = (await DataStore.query(Todo))[0];
          console.log("todo's name before update:", todo.name);
          await DataStore.save(
            Todo.copyOf(todo, updated => {
              updated.name = String(Number(updated.name) + 1);
            }),
          );
          todo = (await DataStore.query(Todo))[0];
          console.log("todo's name after update:", todo.name);
        }}
      />
    </View>
  );
}

export default App;

3. create a record by pressing create record
4. update the record
5. reload the app
6. notice how the observeQuery first returns an old todo name and then correct todo name

Check here the screen recording:

Screen.Recording.2024-04-19.at.10.22.20.AM.mov

Notice that every time I reload the app I get a version older but in the last one I got a way old version