React Apollo: Using Subscriptions

use-subscription.ts

const Chat = ({user}) => {
    const [addMessage] = useMutation(addMessageMutation);

    const { data } = useQuery(messagesQuery);
    const messages = data ? data.messages : [];

    useSubscription(messageAddedSubscription, {
        onSubscriptionData: ({client, subscriptionData}) => {
            client.writeQuery({
                query: messagesQuery,
                data: {
                    messages: [...messages, subscriptionData.data.messageAdded]
                }
            });
        }
    });

    return (
        <section className="section">
            <div className="container">
                <h1 className="title">Chatting as {user}</h1>
                <MessageList user={user} messages={messages}/>
                <MessageInput onSend={addMessage}/>
            </div>
        </section>
    );
};