[Amplify-SDK][Javascript] Cannot establish a real time subscription connection: ConnectionDisrupted

Questions

• How to subscribe to an AppSync Real-time endpoint via Amplify SDK? The Amplify SDK guide didn't work for me.
• Is there any (other?) guide or library should I look into for subscribe to an AppSync Real-time endpoint ? (I don't need the data to be persistent on my use case)

Main details

• client.graphql({ query: subscriptions.onCreateTodo }).subscribe(callBack) stuck between Connecting and ConnectionDisrupted stage

• Goal: subscribe to an AppSync Real-time endpoint
• The same setup can do GraphQL mutation normally
• Note: AppSync SDK and AWS console guide seems to miss many things.
  • Example: AWS Console told us to use Amplify.configure({...$MY_PARAMS}); but you'd need to load the config from a file instead of arbitrary object like in the example.

More details:

ref guide: https://docs.amplify.aws/javascript/build-a-backend/graphqlapi/subscribe-data/#set-up-a-real-time-subscription

• Code

import { Amplify } from 'aws-amplify';
import amplifyConfig from '.aws-export.js';
import { generateClient } from 'aws-amplify/api';
import * as subscriptions from './graphql/subscriptions';
import { CONNECTION_STATE_CHANGE, ConnectionState } from 'aws-amplify/api';
import { Hub } from 'aws-amplify/utils';

Amplify.configure(amplifyConfig);
const client = generateClient();

// Subscribe to creation of Todo
const createSub = client
  .graphql({ query: subscriptions.onCreateTodo })
  .subscribe({
    next: ({ data }) => console.log(data),
    error: (error) => console.warn(error)
  });

Hub.listen('api', (data) => {
  const { payload } = data;
  console.log(data);
  if (payload.event === CONNECTION_STATE_CHANGE) {
    const connectionState = payload.data.connectionState;
    console.log(connectionState);
  }
});

Output

{
  channel: 'api',
  payload: {
    event: 'ConnectionStateChange',
    data: {
      provider: [AWSAppSyncRealTimeProvider],
      connectionState: 'Connecting'
    },
    message: 'Connection state is Connecting'
  },
  source: 'PubSub',
  patternInfo: []
}
Connecting
{
  channel: 'api',
  payload: {
    event: 'ConnectionStateChange',
    data: {
      provider: [AWSAppSyncRealTimeProvider],
      connectionState: 'ConnectionDisrupted'
    },
    message: 'Connection state is ConnectionDisrupted'
  },
  source: 'PubSub',
  patternInfo: []
}
ConnectionDisrupted