amplify-js: DataStore max subscriptions reached error

Describe the bug I found an easy and reliable method of reproducing “MaxSubscriptionsReachedError” error which is coming from AppSync. This is a React Native project.

To Reproduce This is the most explicit ways I could figured out to reproduce the bug.

Updated repro methods: https://github.com/aws-amplify/amplify-js/issues/7036#issuecomment-746942585

1. Setup Auth and DataStore on your app. 2. Login and wait for syncing process is to finish. (I’d use Hub.listen('datastore') to wait for syncQueriesReady event to trigger) 3. On your physical device, off the WiFi. 4. Logout. 5. Turn WiFi on. 6. Repeat steps 2 to 6. Depends on your schema, you may need to do this up to 10 times until it hits the max subscription error. In my case, I would only need to repeat 5 times as my schema contains 7 models with 21 subscriptions.

Expected behavior Max subscription reached error shouldn’t happen. When this happens, the app is unable to receive any incoming changes from the server anymore.

Code Snippet I don’t have any project samples that I can share at the moment.

Screenshots Here’s a screenshot of what I get.

System:
    OS: macOS 10.15.5
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 53.96 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.3.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 86.0.4240.80
    Safari: 13.1.1
  npmGlobalPackages:
    @aws-amplify/cli: 4.29.5
    ios-deploy: 1.10.0
    npm: 6.14.8
    react-native-cli: 2.0.1

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] iPad
• OS: [e.g. iOS8.1] iOS 13
• React Native