Proposal to add a new hook useSubscribeToMore

I’ve opened a issue with a question about an alternative alternative to query.subscribeToMore (#122). But if it’s not possible i thinks this proposal will help.

I’m using this custom hooks that I made. But I think this can be a part of this awesome library. 😜. What do you think @trojanowski?

useSubscribeToMore.js

import { useEffect, useState } from 'react';
import { useSubscription } from 'react-apollo-hooks';

export function useSubscribeToMore(query, { document, updateQuery }) {
  const [data, setData] = useState(query.data);

  const handleSubscriptionData = (options) => {
    setData((prevData) => {
      const nextData = updateQuery(prevData, options);
      if (nextData === undefined) {
        return prevData;
      }
      return nextData;
    });
  };

  const subscription = useSubscription(document, {
    onSubscriptionData: handleSubscriptionData,
  });

  useEffect(() => {
    setData(query.data);
  }, [query.data]);

  return {
    ...query,
    data,
    subscription,
  };
}

Usage eg: messagesExample.js

import React from 'react';
import gql from 'graphql-tag';
import { useQuery } from 'react-apollo-hooks';
import { useSubscribeToMore } from './useSubscribeToMore';

const MESSAGE_FRAGMENT = gql`
  fragment Message on Message {
    id
    body
    createdAt
  }
`; 

const MESSAGE_QUERY = gql`
  query {
    messages {
      ...Message
    }
  }
  ${MESSAGE_FRAGMENT}
`;

const MESSAGE_SUBSCRIPTION =  gql`
  subscription {
    messageAdded {
      ...Message
    }
  }
  ${MESSAGE_FRAGMENT}
`;

export function Messages() {
  const messageQuery = useQuery(MESSAGE_QUERY);
  const { data, loading, error } = useSubscribeToMore(messageQuery, {
      document: MESSAGE_SUBSCRIPTION,
      updateQuery: (data, { subscriptionData }) => {
        if (!subscriptionData.data) {
          return void 0;
        }

        return { 
          ...prev,
          messages: [ ...prev.messages, subscriptionData.data.messageAdded],
        };
      }
  });

  if (loading) {
    return (<p>Loading...</p>);
  }

  if (error) {
    return (<p>Something is wrong, try again...</p>);
  }

  return (
    <div>
      {data.messages.map(({ id, body, createdAt }) => (
        <div key={id}>
          <p>{body}</p>
          <time>{createdAt}</time>
          <hr />
        </div>
      ))}
    </div>
  );
}

[trojanowski]

@RodolfoSilva there is a problem with this solution - it doesn’t save the updated data to the Apollo cache, so you’d see outdated data if the component unmounted and mounted again. useSubscription hook has builtin support for updating the cache with subscription data with the onSubscriptionData option. It works similar to the update option for mutation. messagesExample.js can be rewritten that way with it:

const { data, error, loading } = useSubscription(MESSAGE_SUBSCRIPTION, {
  onSubscriptionData: ({ client, subscriptionData }) => {
    // Client is an instance of Apollo client.
    // It has cache proxy method used in the `update` option in mutations.
    // Please look at: https://www.apollographql.com/docs/react/essentials/mutations#update
    const cachedMessages = client.readQuery({
      query: MESSAGE_QUERY
    });
    cachedMessages.messages.push(subscriptionData.messageAdded);
    client.writeQuery({
      query: MESSAGE_QUERY,
      data: cachedMessages,
    })
  }
});

[fbartho]

@IsaacTrevino this library is in maintenance mode. It existed to add hooks support to Apollo, and is no longer necessary when you’re using modern Apollo!