Relay: [Modern] Attempt to dispose subscription results in error

[svrcekmichal]

Hello, first, thanks for all the great work you guys've done. Lately I'm playing with graphql subscriptions. I'm using relay modern with socket.io and I've been to create few subscriptions which works.

I'm using quite naive solution for now

const subscribes = Object.create({})

const connectSocket = new Promise((resolve, reject) => {
  const socket = io('localhost:4000')
  socket.on('connect', () => {
    socket.on('subscription update', ({ id, data }) => {
      const subscription = subscribes[id];
      if (subscription) {
        subscription.observer.onNext({ data });
      } else {
        console.warn(`Received payload for unregistered hash: ${id}`);
      }
    })
    resolve(socket)
  })
})

let id = 2

function setupSubscription(
  config,
  variables,
  cacheConfig,
  observer,
) {
  const query = config.text
  const localId = id++;
  return connectSocket.then(socket => {
    socket.emit('subscribe', { id: localId , query, variables })
    observer.unsubscribe = () => console.log(id)
    subscribes[localId] = { query, variables, observer };
    return localId
  }).catch(console.error)
}

When I tried to implement disposing of subscriptions, I've runned into following issue.

Uncaught TypeError: result.dispose is not a function
    at RelayObservable.js:105
    at doCleanup (RelayObservable.js:473)
    at Object.unsubscribe (RelayObservable.js:494)
    at RelayObservable.js:349
    at Array.forEach (<anonymous>)
    at RelayObservable.js:348
    at doCleanup (RelayObservable.js:473)
    at Object.unsubscribe (RelayObservable.js:494)
    at doCleanup (RelayObservable.js:470)
    at Object.unsubscribe (RelayObservable.js:494)

Looks this way in component:

componentDidMount(){
    this.addColumnSubscription = AddColumnToBoardSubscription(board.id)
}
componentwillUnmount(){
    this.addColumnSubscription.dispose()
}

This is how subscription looks like:

const subscriptionQuery = graphql`
  subscription AddColumnToBoardSubscription($input: AddColumnToBoardSubscriptionInput!) {
    addColumnToBoardSubscription(input: $input) {
      ...
    }
  }
`

export default function AddColumnToBoardSubscription(globalBoardId) {
  const variables = { input: { globalBoardId } }
  const subscriptionConfig = {
    subscription: subscriptionQuery,
    variables
  }
  return requestSubscription(
    getEnvironment(),
    subscriptionConfig
  )
}

Am I doing something wrong? Or is there some bug? Also, how to setup what should happened when dispose is called? Thanks!

[svrcekmichal]

Found it. What I've been doing wrong is returning Promise in setupSubscription, but it should have been RelayObservable or Disposable.