Subscription Not Detecting Creations / Deletions in Client - React Native

[ChristopherGabba]

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

GraphQL API

Amplify Version

v6

Amplify Categories

api

Backend

Amplify Gen 2

Environment information

  System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 856.75 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.4.0 - ~/.nvm/versions/node/v23.4.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 11.1.0 - ~/.nvm/versions/node/v23.4.0/bin/npm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Safari: 17.6
  npmPackages:
    %name%:  0.1.0 
    @aws-amplify/backend: ^1.11.0 => 1.14.0 
    @aws-amplify/backend-cli: ^1.4.5 => 1.4.9 
    @aws-amplify/react-native: ^1.1.6 => 1.1.7 
    @aws-amplify/rtn-web-browser: ^1.1.1 => 1.1.1 
    @aws-appsync/utils: ^1.12.0 => 1.12.0 
    @aws-sdk/client-cognito-identity-provider: ^3.743.0 => 3.744.0 
    @aws-sdk/client-sso-oidc: ^3.716.0 => 3.744.0 (3.693.0, 3.637.0, 3.624.0, 3.621.0)
    @aws-sdk/client-sts: ^3.716.0 => 3.744.0 (3.693.0, 3.624.0, 3.621.0)
    @aws-sdk/types: ^3.714.0 => 3.734.0 (3.387.0, 3.398.0, 3.692.0, 3.609.0)
    @babel/core: ^7.20.0 => 7.26.8 (7.26.9)
    @babel/plugin-proposal-export-namespace-from: ^7.18.9 => 7.18.9 
    @babel/plugin-proposal-optional-chaining: ^7.0.0 => 7.21.0 
    @babel/plugin-transform-arrow-functions: ^7.0.0 => 7.25.9 
    @babel/plugin-transform-nullish-coalescing-operator: ^7.0.0 => 7.26.6 
    @babel/plugin-transform-shorthand-properties: ^7.0.0 => 7.25.9 
    @babel/plugin-transform-template-literals: ^7.0.0 => 7.26.8 
    @babel/preset-env: ^7.20.0 => 7.26.8 
    @babel/runtime: ^7.20.0 => 7.26.7 
    @config-plugins/ffmpeg-kit-react-native: ^9.0.0 => 9.0.0 
    @expo-google-fonts/m-plus-1p: ^0.2.3 => 0.2.3 
    @expo-google-fonts/montserrat: ^0.2.3 => 0.2.3 
    @expo/config-plugins: ~9.0.14 => 9.0.15 
    @expo/metro-runtime: ~4.0.1 => 4.0.1 
    @gorhom/bottom-sheet: ^5.0.1 => 5.1.1 
    @react-native-async-storage/async-storage: 1.23.1 => 1.23.1 (1.24.0)
    @react-native-community/netinfo: 11.4.1 => 11.4.1 
    @react-native-menu/menu: ^1.1.0 => 1.2.2 
    @react-navigation/bottom-tabs: ^6.3.2 => 6.6.1 
    @react-navigation/native: ^6.0.2 => 6.1.18 
    @react-navigation/native-stack: ^6.0.2 => 6.11.0 
    @sentry/react-native: ~6.3.0 => 6.3.0 
    @shopify/flash-list: 1.7.3 => 1.7.3 
    @types/i18n-js: 3.8.2 => 3.8.2 
    @types/jest: ^29.2.1 => 29.5.14 
    @types/lodash.filter: ^4.6.9 => 4.6.9 
    @types/node: ^22.10.5 => 22.13.1 (20.17.17)
    @types/react: ~18.3.12 => 18.3.18 
    @types/react-test-renderer: ^18.0.0 => 18.3.1 
    @typescript-eslint/eslint-plugin: ^5.59.0 => 5.62.0 
    @typescript-eslint/parser: ^5.59.0 => 5.62.0 
    ContextAPIMixpanel:  0.0.1 
    MixpanelDemo:  0.0.1 
    SimpleMixpanel:  0.0.1 
    apisauce: 3.1.0 => 3.1.0 
    aws-amplify: ^6.11.0 => 6.12.3 
    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 ()
    aws-cdk: ^2.174.0 => 2.178.1 
    aws-cdk-lib: ^2.174.0 => 2.178.1 
    babel-jest: ^29.2.1 => 29.7.0 
    buffer: ^6.0.3 => 6.0.3 (4.9.2, 5.7.1)
    cheerio: 1.0.0-rc.12 => 1.0.0-rc.12 
    constructs: ^10.3.0 => 10.4.2 
    date-fns: ^4.1.0 => 4.1.0 
    esbuild: ^0.21.1 => 0.21.5 (0.23.1)
    eslint: 8.17.0 => 8.17.0 
    eslint-config-prettier: 9.1.0 => 9.1.0 
    eslint-config-standard: 17.0.0 => 17.0.0 
    eslint-plugin-import: 2.26.0 => 2.26.0 
    eslint-plugin-n: ^15.0.0 => 15.7.0 
    eslint-plugin-promise: 6.6.0 => 6.6.0 
    eslint-plugin-react: 7.37.3 => 7.37.3 
    eslint-plugin-react-native: 4.0.0 => 4.0.0 
    eslint-plugin-reactotron: ^0.1.2 => 0.1.6 
    expo: ~52.0.36 => 52.0.36 
    expo-application: ~6.0.2 => 6.0.2 
    expo-blur: ~14.0.3 => 14.0.3 
    expo-build-properties: ~0.13.2 => 0.13.2 
    expo-clipboard: ~7.0.1 => 7.0.1 
    expo-constants: ~17.0.7 => 17.0.7 (17.0.5)
    expo-contacts: ~14.0.5 => 14.0.5 
    expo-dev-client: ~5.0.12 => 5.0.12 
    expo-device: ~7.0.2 => 7.0.2 
    expo-file-system: ~18.0.11 => 18.0.11 
    expo-font: ~13.0.4 => 13.0.4 
    expo-haptics: ~14.0.1 => 14.0.1 
    expo-image: ~2.0.6 => 2.0.6 
    expo-image-picker: ~16.0.6 => 16.0.6 
    expo-linear-gradient: ~14.0.2 => 14.0.2 
    expo-linking: ~7.0.5 => 7.0.5 
    expo-localization: ~16.0.1 => 16.0.1 
    expo-secure-store: ~14.0.1 => 14.0.1 
    expo-share-intent: ^3.2.0 => 3.2.1 
    expo-sharing: ~13.0.1 => 13.0.1 
    expo-splash-screen: ~0.29.22 => 0.29.22 
    expo-status-bar: ~2.0.1 => 2.0.1 
    expo-store-review: ~8.0.1 => 8.0.1 
    expo-updates: ~0.26.19 => 0.26.19 
    expo-video: ~2.0.5 => 2.0.5 
    expo-video-metadata: ^1.5.0 => 1.5.0 
    expo-video-thumbnails: ~9.0.3 => 9.0.3 
    ffmpeg-kit-react-native: ^6.0.2 => 6.0.2 
    i18n-js: 4.5.1 => 4.5.1 
    jest: ^29.2.1 => 29.7.0 
    jest-expo: ~52.0.4 => 52.0.4 
    libphonenumber-js: ^1.11.19 => 1.11.19 (1.9.47)
    libphonenumber-js-core:  undefined (1.0.0)
    libphonenumber-js-max:  undefined (1.0.0)
    libphonenumber-js-min:  undefined (1.0.0)
    libphonenumber-js-mobile:  undefined (1.0.0)
    libphonenumber-js/build:  undefined ()
    libphonenumber-js/core:  undefined ()
    libphonenumber-js/max:  undefined ()
    libphonenumber-js/max/metadata:  undefined ()
    libphonenumber-js/min:  undefined ()
    libphonenumber-js/min/metadata:  undefined ()
    libphonenumber-js/mobile:  undefined ()
    libphonenumber-js/mobile/examples:  undefined ()
    libphonenumber-js/mobile/metadata:  undefined ()
    lodash: ^4.17.21 => 4.17.21 
    lodash.filter: ^4.6.0 => 4.6.0 
    lottie-react-native: 7.1.0 => 7.1.0 
    mixpanel-react-native: ^3.0.8 => 3.0.8 
    mixpanelexpo:  1.0.0 
    mobx: 6.13.5 => 6.13.5 
    mobx-react-lite: 4.0.5 => 4.0.5 
    mobx-state-tree: 7.0.1 => 7.0.1 
    onesignal-expo-plugin: ^2.0.3 => 2.0.3 
    patch-package: 6.4.7 => 6.4.7 
    postinstall-prepare: 1.0.1 => 1.0.1 
    prettier: 2.8.8 => 2.8.8 (2.3.2, 1.19.1)
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    react-native: 0.76.7 => 0.76.7 
    react-native-blurhash: ^2.0.2 => 2.1.0 
    react-native-boost: ^0.5.3 => 0.5.3 
    react-native-compressor: ^1.8.24 => 1.10.3 
    react-native-device-info: ^10.13.2 => 10.14.0 
    react-native-gesture-handler: ~2.20.2 => 2.20.2 
    react-native-get-random-values: ^1.11.0 => 1.11.0 
    react-native-ios-context-menu: 3.0.0 => 3.0.0 
    react-native-ios-utilities: 5.0.0 => 5.0.0 
    react-native-mime-types: ^2.5.0 => 2.5.0 
    react-native-mmkv: ^2.12.2 => 2.12.2 
    react-native-onesignal: ^5.2.5 => 5.2.8 
    react-native-reanimated: ~3.16.1 => 3.16.7 
    react-native-safe-area-context: 4.12.0 => 4.12.0 
    react-native-screens: ~4.4.0 => 4.4.0 
    react-native-static-safe-area-insets: ^2.2.0 => 2.2.0 
    react-native-url-polyfill: ^2.0.0 => 2.0.0 
    react-native-vision-camera: ^4.6.3 => 4.6.4 
    react-native-vision-camera-face-detector: ^1.7.2 => 1.8.1 
    react-native-volume-manager: ^2.0.7 => 2.0.8 
    react-native-webview: 13.12.5 => 13.12.5 
    react-native-worklets-core: ^1.5.0 => 1.5.0 
    react-native-youtube-iframe: ^2.3.0 => 2.3.0 
    react-test-renderer: 18.2.0 => 18.2.0 (18.3.1)
    reactotron-core-client: ^2.8.13 => 2.9.7 
    reactotron-mst: ^3.1.7 => 3.1.11 
    reactotron-react-js: ^3.3.11 => 3.3.16 
    reactotron-react-native: ^5.0.5 => 5.1.12 
    ts-jest: ^29.1.1 => 29.2.5 
    ts-node: ^10.9.2 => 10.9.2 
    tsx: ^4.9.4 => 4.19.2 
    typescript: ~5.3.3 => 5.3.3 (4.4.4, 4.9.5)
    uuid: ^11.0.5 => 11.0.5 (9.0.1, 8.3.2, 3.3.2, 7.0.3)
    zeego: ^1.10.0 => 1.10.0 
  npmGlobalPackages:
    corepack: 0.30.0
    eas-cli: 15.0.12
    npm: 11.1.0

Describe the bug

I subscribe to a messages like so:

useEffect(() => {
    if (!userStore.currentUser) return
    const client = generateClient<Schema>({ authMode: "userPool" })
    const sub = client.models.Message.observeQuery({
      filter: {
        and: [
          { senderId: { eq: userStore.currentUser.id } },
          { viewedTimestamp: { attributeExists: false } },
        ],
      },
      selectionSet: [...messageSelectionSet],
    }).subscribe({
      next: ({ items, isSynced }) => {
        console.log(
          `Detected [${items.length}] messages are awaiting me to view:`,
          //   JSON.stringify(items, null, 4),
        )
      },
      error: ({ error }) =>
        console.log("Create subscriptions error", JSON.stringify(error.errors, null, 4)),
    })

    return () => {
      sub.unsubscribe()
    }
  }, [userStore.currentUser?.id])

Upon loading, I see the logs: "Detected [4] messages awaiting me to view". but from that point on, I'm not seeing the logs appear when things are viewed or deleted. The other user on the client side will call client.models.Message.create({...}) and create a message correctly.

Expected behavior

I would expect that if a message is created by another user with me as the sender, I would immediately get a new log appearing that says: "Detected [5] messages are awaiting me to view". But nothing happens client side.

Reproduction steps

Here is a schema:

const schema = a.schema({
  User: a
    .model({
      id: a.id().required(),
      birthdate: a.string().required(),
      email: a.email().required(),
      firstName: a.string().required(),
      lastName: a.string().required(),
      username: a.string().required(),
      sentMessages: a.hasMany("Message", "senderId"),
      receivedMessagess: a.hasMany("Message", "receiverId"),
    })
    .secondaryIndexes((index) => [
      index("email").name("byEmail").queryField("listUsersByEmail"),
    ])
    .authorization((allow) => [allow.publicApiKey().to(["read"]), allow.authenticated()]),

  Message: a
    .model({
      id: a.id().required(),
      contents: a.string(),
      receiverId: a.id().required(),
      receiver: a.belongsTo("User", "receiverId"),
      senderId: a.id().required(),
      sender: a.belongsTo("User", "senderId"),
      viewedTimestamp: a.datetime()
    })
    .secondaryIndexes((index) => [
      index("senderId")
        .name("bySenderId")
        .queryField("listMessagesBySenderId")
      index("receiverId").name("byReceiverId").queryField("listMessagesByReceiverId"),
    ])
  .authorization((allow) => [allow.publicApiKey().to(["read"]), allow.authenticated()]),
})

export type Schema = ClientSchema<typeof schema>

Code Snippet

Shown above.

Log output

// Put your logs below this line

aws-exports.js

N/A

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

Hey @ChristopherGabba 👋 Long time, no see! Good to hear from you 😄

Not sure if this behavior is exclusive to React Native but I'll spin up an app to try and reproduce this issue.

In the meantime, can you verify a few things?

1. I noticed that the subcription is filtering for viewedTimestamp but that field doesn't appear on the Message model.
   Is this schema up to date?

2. Can you retrieve the expected data by making the filter less restrictive? Just as a sanity check.

3. Are you able to reproduce this behavior by subscribing and creating/delete records in the AppSync console?

[ChristopherGabba]

@chrisbonifacio hey Chris, always appreciate the support!

1. Yes, I accidentally deleted that when I was simplifying the schema for replicating, good catch! I fixed it!
2. I just did that using this, and it did not work:

useEffect(() => {
    if (!userStore.currentUser) return
    const client = generateClient<Schema>({ authMode: "userPool" })
    const sub = client.models.Message.observeQuery({
      filter: { receiverId: { eq: userStore.currentUser.id } }, // I also tried various other filters with the same result (I also tried leaving filter blank but that resulted in a crash)
      selectionSet: [...messageSelectionSet],
    }).subscribe({
      next: ({ items, isSynced }) => {
          console.log("UPDATE DETECTED", items.length, isSynced)
      },
      error: ({ error }) =>
        console.log("Create subscriptions error", JSON.stringify(error.errors, null, 4)),
    })

    return () => {
      sub.unsubscribe()
    }
  }, [userStore.currentUser?.id])

I basically get:

    UPDATE DETECTED 3 true

on mount, but it never runs again. With another logged in user I run a client.models.Message.create({ ... }) with receiverId set to this particular user, and I would expect to immediately see a log appear UPDATE DETECTED 4 true or whatever, but I never get that.

3. I have not tried in the AppSync console but I can. I am creating a DynamoDB node with another client, which should effectively be doing the same thing right?