React Apollo: Using Subscriptions

subscribe-to-more.ts

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

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

    useEffect(() => {
        subscribeToMore({
            document: messageAddedSubscription,
            updateQuery: (prev, { subscriptionData }) => {
                if (!subscriptionData.data) return prev;
                const newChat = subscriptionData.data.messageAdded;

                return {
                    messages: [...prev.messages, newChat],
                };
            },
        });
    }, []);

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