Multiple subscriptions in connect stopped working after upgrade about amplify-ui HOT 8 CLOSED

            <Connect
              key="CategoriesConnector"
              query={graphqlOperation(listPosts, {
                limit: 100,
              })}
              subscription={graphqlOperation(onCreateOrUpdateOrDelete)}
              onSubscriptionMsg={(prev, {addedPost, editedPost, deletePost}) => {
                console.log(prev);
                if (addedPost) {
                    prev.listPosts.items.push(addedPost);
                } else if (editedPost) {
                    prev.listPosts.items = prev.listPosts.items.map(post => post.id === editedPost.id ? editedPost : post);
                } else if (deletePost) {
                    prev.listPosts.items = prev.listPosts.items.filter(post => post.id !== deletePost.id);
                }
                return prev;
              }}
            >
              {({ data, loading, error }) => {
                if (error) return <h3 key="Error">Error</h3>;
                if (loading || !data) return <h3>No Posts to load</h3>;
                return [
                  data.listPosts.items.map(item => (
                    <PostContainer key={item.id} post={item} />
                  ))
                ];
              }}
            </Connect>

export const onCreateOrUpdateOrDelete = /* GraphQL */ `
  subscription OnCreateOrUpdateOrDelete {
    addedPost {
      id
      date
      data
    }
    editedPost {
      id
      date
      data
    }
    deletePost {
      id
      date
      data
    }
  }
`;

const onSubscriptionMessage = (prevQuery, newData) => {
    if(newData && newData.onDeleteItem) {
      return onRemoveItem(prevQuery, newData);
    }
    if(newData && newData.onCreateItem) {
      return onAddItem(prevQuery, newData);
    }
  };

import * as React from 'react';
import { API, GraphQLResult } from '@aws-amplify/api';
import Observable from 'zen-observable-ts';

export interface IConnectProps {
    mutation?: any;
    onSubscriptionMsg?: (prevData: any) => any;
    query?: any;
    subscription?: any;
}

export interface IConnectState {
    loading: boolean;
    data: any;
    errors: any;
    mutation: any;
}

export class Connect extends React.Component<IConnectProps, IConnectState> {
    public subSubscriptions: Array<Promise<GraphQLResult<object>> | Observable<object>>;
    private mounted: boolean;

    constructor(props) {
        super(props);

        this.state = this.getInitialState();
        this.subSubscriptions = [];
    }

    getInitialState() {
        const { query } = this.props;
        return {
            loading: query && !!query.query,
            data: {},
            errors: [],
            mutation: () => console.warn('Not implemented'),
        };
    }

    getDefaultState() {
        return {
            loading: false,
            data: {},
            errors: [],
            mutation: () => console.warn('Not implemented'),
        };
    }

    async _fetchData() {
        this._unsubscribe();
        this.setState({ loading: true });

        const {
            // @ts-ignore
            query: { query, variables = {} } = {},
            // @ts-ignore
            mutation: { query: mutation, mutationVariables = {} } = {},
            subscription,
            onSubscriptionMsg = prevData => prevData,
        } = this.props;

        let { data, mutation: mutationProp, errors } = this.getDefaultState();

        if (
            !API ||
            typeof API.graphql !== 'function' ||
            typeof API.getGraphqlOperationType !== 'function'
        ) {
            throw new Error(
                'No API module found, please ensure @aws-amplify/api is imported'
            );
        }

        const hasValidQuery =
            query && API.getGraphqlOperationType(query) === 'query';
        const hasValidMutation =
            mutation && API.getGraphqlOperationType(mutation) === 'mutation';

        const validSubscription = subscription => subscription
            && subscription.query
            && API.getGraphqlOperationType(subscription.query) === 'subscription';

        const validateSubscriptions = (subscription) => {
            let valid = false;
            if(Array.isArray(subscription)) {
               valid = subscription.map(validSubscription).indexOf(false) === -1;
            } else {
               valid = validSubscription(subscription)
            }
            return valid;
        };

        const hasValidSubscriptions = validateSubscriptions(subscription);



        if (!hasValidQuery && !hasValidMutation && !hasValidSubscriptions) {
            console.warn('No query, mutation or subscription was specified correctly');
        }

        if (hasValidQuery) {
            console.log('hasValidQuery');
            try {
                data = null;

                const response = await API.graphql({ query, variables });

                // @ts-ignore
                data = response.data;
            } catch (err) {
                data = err.data;
                errors = err.errors;
            }
        }

        if (hasValidMutation) {
            console.log('hasValidMutation');
            // @ts-ignore
            mutationProp = async variables => {
                const result = await API.graphql({ query: mutation, variables });

                this.forceUpdate();
                return result;
            };
        }

        if (hasValidSubscriptions) {

            const connectSubscriptionToOnSubscriptionMessage = (subscription) => {

                const {query: subsQuery, variables: subsVars} = subscription;

                try {
                    const observable = API.graphql({
                        query: subsQuery,
                        variables: subsVars,
                    });

                    // @ts-ignore
                    this.subSubscriptions.push(observable.subscribe({
                        next: ({value: {data}}) => {
                            const {data: prevData} = this.state;
                            // @ts-ignore
                            const newData = onSubscriptionMsg(prevData, data);
                            if (this.mounted) {
                                this.setState({data: newData});
                            }
                        },
                        error: err => console.error(err),
                    }));

                } catch (err) {
                    errors = err.errors;
                }
            };
            if(Array.isArray(subscription)) {
                subscription.forEach(connectSubscriptionToOnSubscriptionMessage);
            } else {
                connectSubscriptionToOnSubscriptionMessage(subscription)
            }
        }

        this.setState({ data, errors, mutation: mutationProp, loading: false });
    }

    _unsubscribe() {
        const __unsubscribe = subSubscription => {
            if (subSubscription) {
                subSubscription.unsubscribe();
            }
        };
        this.subSubscriptions.map(__unsubscribe);
    }

    async componentDidMount() {
        console.log('Connect - componentDidMount');
        this._fetchData();
        this.mounted = true;
    }

    componentWillUnmount() {
        console.log('Connect - componentWillUnmount');
        this._unsubscribe();
        this.mounted = false;
    }

    componentDidUpdate(prevProps) {
        const { loading } = this.state;

        const { query: newQueryObj, mutation: newMutationObj, subscription: newSubscription} = this.props;
        const { query: prevQueryObj, mutation: prevMutationObj,  subscription: prevSubscription } = prevProps;

        // query
        // @ts-ignore
        const { query: newQuery, variables: newQueryVariables } = newQueryObj || {};
        // @ts-ignore
        const { query: prevQuery, variables: prevQueryVariables } =
        prevQueryObj || {};
        const queryChanged =
            prevQuery !== newQuery ||
            JSON.stringify(prevQueryVariables) !== JSON.stringify(newQueryVariables);

        // mutation
        // @ts-ignore
        const { query: newMutation, variables: newMutationVariables } =
        newMutationObj || {};
        // @ts-ignore
        const { query: prevMutation, variables: prevMutationVariables } =
        prevMutationObj || {};
        const mutationChanged =
            prevMutation !== newMutation ||
            JSON.stringify(prevMutationVariables) !==
            JSON.stringify(newMutationVariables);

        // subscription
        // @ts-ignore
        const { query: newSubsQuery, variables: newSubsVars } = newSubscription || {};
        // @ts-ignore
        const { query: prevSubsQuery, variables: prevSubsVars } = prevSubscription || {};
        const subscriptionChanged =
            prevSubsQuery !== newSubsQuery  ||
            JSON.stringify(prevSubsVars) !==
            JSON.stringify(newSubsVars);

        if (!loading && (queryChanged || mutationChanged || subscriptionChanged)) {
            this._fetchData();
        }
    }

    render() {
        const { data, loading, mutation, errors } = this.state;
        // @ts-ignore
        return this.props.children({ data, errors, loading, mutation }) || null;
    }
}

/**
 * @deprecated use named import
 */
export default Connect;

<Connect
     query={graphqlOperation(listTopics)}
     subscription={[graphqlOperation(onCreateTopic),  graphqlOperation(onDeleteTopic)]}
     onSubscriptionMsg={onSubscriptionMessage}>
{.....}
</Connect>