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
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
}
Most helpful comment
If you need more control you could use it programmatically e.g: