client.js

import React from 'react'
import { Query } from 'react-apollo'
import { all_users_query } from '../graphql/users_queries.graphql'
import { message_created } from '../graphql/message_subscriptions.graphql'
import { SharedNotificationContainer } from '../containers/Notification';
import { notification } from 'antd';
import SubscriptionContainer from '../containers/SubscriptionContainer';

const User = ({user}) => 
  <div>
    Id: { user.id }
    Username: { user.username }
  </div>


const renderUsers = (users, message) =>
  <div className='w-100 flex justify-center'>
    Current Message: { message }
    <div className='w-100' style={{ maxWidth: 400 }}>
      {users.map((user) =>
        <User key={user.id} user={user} />
      )}
    </div>    
  </div>

const UsersList = () => (
  <SubscriptionContainer
    container={SharedNotificationContainer}
    subscription={message_created}
    mapDataToState={
      (_state, data) => (data ? { message: data.messageCreated.message.text } : { message: ''})
    }
    onUpdate={state => {
      state.message && notification.open({
        message: `${state.message} created`,
        description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      });
    }}
  >
    {state => (
      <div>
        <h4>Text: {state.message}</h4>
        {state.message !== '' ? <Query query={all_users_query}>
          {({ loading, error, data }) => {
            if (loading) return "Loading...";
            if (error) return `Error! ${error.message}`;
            if (data.users) return renderUsers(data.users, state.message);
          }}
        </Query> : ''}
      </div>        
    )}
  </SubscriptionContainer>  
);

export default UsersList

SubscriptionContainer.js

import React from 'react';
import { Subscribe } from 'unstated';
import isEqual from 'react-fast-compare';
import { Subscription } from 'react-apollo'

class Event extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const {container, data, mapDataToState, queryType} = this.props;
    console.log(queryType);
    
    if (data) {
      console.log(`MOUNTED ${JSON.stringify(data)}`);
      container.onNewData(mapDataToState(container.state, data))
    }
  }
  shouldComponentUpdate(nextProps) {
    return !isEqual(this.props, nextProps);
  }
  componentDidUpdate() {
    const {container, data, mapDataToState, onUpdate} = this.props;
    console.log(`UPDATED ${JSON.stringify(container)}`);
    console.log(`UPDATED ${JSON.stringify(data)}`);
    container.onNewData(mapDataToState(container.state, data), (state) => {
      onUpdate && onUpdate(state);
    });
  }
  render() {
    const { renderer, container } = this.props;
    return (
      <Subscribe to={[container]}>
        {container => (
          renderer(container.state)
        )}
      </Subscribe>
    )
  }
}
const SubscriptionContainer = ({container, children, subscription, mapDataToState, onUpdate}) => (
  <Subscribe to={[container]}>
    {_container => (
      <Subscription subscription={subscription}>
        {({ loading, error, data }) => {
          if (error) return `Error! ${error.message}`;
          if (data || loading) {
            return <Event 
            container={_container} 
            queryType={subscription.definitions[0].operation}
            data={data} 
            loading={loading} 
            renderer={children}
            onUpdate={onUpdate}
            mapDataToState={mapDataToState} />
          } else return <div>Lol</div>;
        }}
      </Subscription>
    )}
  </Subscribe>
)

export default SubscriptionContainer;