React-apollo: No documentation for resubscribe, unsubscribe in useSubscription hook

Created on 9 Oct 2019  路  3Comments  路  Source: apollographql/react-apollo

Hello!
I wrote a Notification service for my application, and use a subscription to a new notification for the user, according to the selected topics.

After changing the topics for the user, it is logical to resubscribe to notifications with new parameters, but nowhere in the documentation for useSubscription hook there is no mention or example for such a common scenario.

I ask you to help with the documentation if I missed it or with an example of how I can implement my plan.

import gql from 'graphql-tag'
import { useSubscription } from '@apollo/react-hooks';

export const SUBSCRIBE_NOTIFICATIONS = gql`
    subscription notification( $filter: NotificationFilter, $mutations: [String]) {
        notification(filter: $filter, mutations: $mutations) {
            mutation
            node {            
                id
                timestamp
                ttl
                ttlAt
                app
                title
                body
            }
        }
    }
`
...
const onSubscriptionData = ({client, subscriptionData: {data: { notification: { mutation, node }}}}) => { ... };

const notificationSubscription = useSubscription(SUBSCRIBE_NOTIFICATIONS, {
            // shouldResubscribe: ?????,
            client: apolloNotificationsClient,
            onSubscriptionData: onSubscriptionData,
        }
    );
...

Version
@apollo/react-hooks: 3.1.1

Most helpful comment

If you need more control you could use it programmatically e.g:

export const useSomeSubscription = (marketId: string): OrderbookData => {
  const [data, setData] = useState(<OrderbookData>{ bids: [], asks: [] })
  const client = useApolloClient()

  useEffect(() => {
    const observer = client.subscribe<OrderBook, OrderBookVariables>({
      query: ORDERBOOK_SUBSCRIPTION,
      variables: {
        marketId,
      },
    })

    const subscription = observer.subscribe(({ data }) => {
      console.log('SUBSCRIBE received', data)
      setData(data);
    })

    return () => subscription.unsubscribe()
  }, [marketId])

  return data
}

All 3 comments

I found the code for useSubscription, but I don't see a way to access the underlying subscription object that is used to unsubscribe:

https://github.com/trojanowski/react-apollo-hooks/blob/master/src/useSubscription.ts

Would also very much appreciate help with this issue :)

If you need more control you could use it programmatically e.g:

export const useSomeSubscription = (marketId: string): OrderbookData => {
  const [data, setData] = useState(<OrderbookData>{ bids: [], asks: [] })
  const client = useApolloClient()

  useEffect(() => {
    const observer = client.subscribe<OrderBook, OrderBookVariables>({
      query: ORDERBOOK_SUBSCRIPTION,
      variables: {
        marketId,
      },
    })

    const subscription = observer.subscribe(({ data }) => {
      console.log('SUBSCRIBE received', data)
      setData(data);
    })

    return () => subscription.unsubscribe()
  }, [marketId])

  return data
}
Was this page helpful?
0 / 5 - 0 ratings