React-apollo: Multiple subscriptions, one component

[notadamking]

Is it currently possible to subscribe to multiple queries in one component? I have tried combining the two subscriptions in multiple ways and it seems subscriptions are only allowed to have one query. How are multiple subscriptions meant to be handled?

For example, I have a chat application that I would like to be able to subscribe to all chat updates (add, remove, edit), not just one, all from the same component. My original intention was to use three separate subscriptions, in the same way you would use three separate queries, in one component, but I quickly found that this isn't really possible with the current API. I have settled for combining all three subscriptions into a single subscription that is called whenever a comment in the chat is updated in any way. A chatUpdate is published with an 'action' property: 'add', 'remove', or 'edit', which leads to my updateQueries of the subscribeToMore method looking like this:

const update = subscriptionData.data.chatUpdate;
if (update.action === 'add') {
    const newComment = update.comment;

    if (!previousResult.comments) {
        return newComment;
    }

    return {
        comments: [
             newComment,
             ...previousResult.comments,
        ]
    };
} else if (update.action === 'delete') {
    const deletedComment = update.comment;

    const remainingComments = previousResult.comments.filter((comment) => {
        return comment.id !== deletedComment.id;
    });

    return {
        comments: remainingComments
    };
} else if (update.action ==='edit') { 
   ...
}

While this is working fine now, it seems there should be a simpler API for this kind of thing.

[helfer]

@adamjking3 I thought we implemented it such that you can call subscribeToMore as many times as you want with different subscriptions, and it should just work. What part didn't work for you?

[AlexLeung]

@adamjking3 I have multiple subscriptions working right now. Also for a chat system :)

componentWillReceiveProps(nextProps) {
    const component = this;
    // we don't resubscribe on changed props, because it never happens in our app
    if (!this.subscription && !nextProps.loading) {
        this.subscription = [
            this.props.data.subscribeToMore({
                document: onMessageSent,
                variables: {},
                updateQuery: (previousResult, { subscriptionData }) => {
                    const newMessage = subscriptionData.data.messageSent;
                    /* code that handles new message event */
                    return {};
                },
            }),
            this.props.data.subscribeToMore({
                document: onConversationCreated,
                variables: {},
                updateQuery: (previousResult, { subscriptionData }) => {
                    const newConversation = subscriptionData.data.conversationCreated;
                    /* code that handles new conversation event */
                    return {};
                }
            })
        ];
    }
}

If you'd like I can include the graphql documents as well. They're just typical subscription queries.
Also check this out: https://janikvonrotz.ch/2016/11/28/reactive-subscriptions-with-apollo-and-react/

[cesarsolorzano]

Closing up old issues.