title: Apollo / Graphcool Subscriptions - WebSocket is closed before the connection is established
body: <p>I'm trying to set up a graphcool subscription / websockets as per this tutorial at <a href="https://www.howtographql.com/react-apollo/8-subscriptions/" rel="noreferrer">How To GraphQL</a> but I'm getting the following message:</p>
  
  <blockquote>
    <p>WebSocket connection to
    'wss://subscriptions.graph.cool/v1/###' failed:
    WebSocket is closed before the connection is established.</p>
  </blockquote>
  
  <p>I'm seem to have everything as per the tutorial. Do you have any idea why the websockets connection is not being established?</p>
  
  <hr>
  
  <p>index.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import App from './components/App'
  import registerServiceWorker from './registerServiceWorker'
  import './styles/index.css'
  import { ApolloProvider, createNetworkInterface, ApolloClient } from 'react-apollo'
  import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'
  import { BrowserRouter } from 'react-router-dom'
  import { GC_AUTH_TOKEN } from './constants'
  
  const networkInterface = createNetworkInterface({
    uri: 'https://api.graph.cool/simple/v1/###'
  })
  
  const wsClient = new SubscriptionClient('wss://subscriptions.graph.cool/v1/###', {
    reconnect: true,
    connectionParams: {
       authToken: localStorage.getItem(GC_AUTH_TOKEN),
    }
  })
  
  const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
    networkInterface,
    wsClient
  )
  
  networkInterface.use([{
    applyMiddleware(req, next) {
      if (!req.options.headers) {
        req.options.headers = {}
      }
      const token = localStorage.getItem(GC_AUTH_TOKEN)
      req.options.headers.authorization = token ? `Bearer ${token}` : null
      next()
    }
  }])
  
  const client = new ApolloClient({
    networkInterface: networkInterfaceWithSubscriptions
  })
  
  ReactDOM.render(
    &lt;BrowserRouter&gt;
      &lt;ApolloProvider client={client}&gt;
        &lt;App /&gt;
      &lt;/ApolloProvider&gt;
    &lt;/BrowserRouter&gt;
    , document.getElementById('root')
  )
  registerServiceWorker()</code></pre>
  </div>
  </div>
  </p>
  
  <p>App.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import LinkList from './LinkList'
  import CreateLink from './CreateLink'
  import Header from './Header'
  import Login from './Login'
  import Search from './Search'
  import { Switch, Route, Redirect } from 'react-router-dom'
  
  class App extends Component {
    render() {
      return (
        &lt;div className='center w85'&gt;
          &lt;Header /&gt;
          &lt;div className='ph3 pv1 background-gray'&gt;
            &lt;Switch&gt;
              &lt;Route exact path='/search' component={Search}/&gt;
              &lt;Route exact path='/' component={LinkList}/&gt;
              &lt;Route exact path='/create' component={CreateLink}/&gt;
              &lt;Route exact path='/login' component={Login}/&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default App</code></pre>
  </div>
  </div>
  </p>
  
  <p>LinkList.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import Link from './Link'
  import { graphql, gql } from 'react-apollo'
  
  class LinkList extends Component {
  
    _updateCacheAfterVote = (store, createVote, linkId) =&gt; {
      const data = store.readQuery({ query: ALL_LINKS_QUERY })
  
      const votedLink = data.allLinks.find(link =&gt; link.id === linkId)
      votedLink.votes = createVote.link.votes
  
      store.writeQuery({ query: ALL_LINKS_QUERY, data })
    }
  
    componentDidMount() {
      this._subscribeToNewLinks()
      this._subscribeToNewVotes()
    }
  
  
    render() {
  
      if (this.props.allLinksQuery &amp;&amp; this.props.allLinksQuery.loading) {
        return &lt;div&gt;Loading&lt;/div&gt;
      }
  
      if (this.props.allLinksQuery &amp;&amp; this.props.allLinksQuery.error) {
        return &lt;div&gt;Error&lt;/div&gt;
      }
  
      const linksToRender = this.props.allLinksQuery.allLinks
  
      return (
        &lt;div&gt;
        {linksToRender.map((link, index) =&gt; (
          &lt;Link key={link.id} updateStoreAfterVote={this._updateCacheAfterVote}  index={index} link={link}/&gt;
        ))}
        &lt;/div&gt;
      )
    }
  
    _subscribeToNewLinks = () =&gt; {
      this.props.allLinksQuery.subscribeToMore({
        document: gql`
          subscription {
            Link(filter: {
              mutation_in: [CREATED]
            }) {
              node {
                id
                url
                description
                createdAt
                postedBy {
                  id
                  name
                }
                votes {
                  id
                  user {
                    id
                  }
                }
              }
            }
          }
        `,
        updateQuery: (previous, { subscriptionData }) =&gt; {
          const newAllLinks = [
            subscriptionData.data.Link.node,
            ...previous.allLinks
          ]
          const result = {
            ...previous,
            allLinks: newAllLinks
          }
          return result
        }
      })
    }
  
    _subscribeToNewVotes = () =&gt; {
      this.props.allLinksQuery.subscribeToMore({
        document: gql`
          subscription {
            Vote(filter: {
              mutation_in: [CREATED]
            }) {
              node {
                id
                link {
                  id
                  url
                  description
                  createdAt
                  postedBy {
                    id
                    name
                  }
                  votes {
                    id
                    user {
                      id
                    }
                  }
                }
                user {
                  id
                }
              }
            }
          }
        `,
        updateQuery: (previous, { subscriptionData }) =&gt; {
          const votedLinkIndex = previous.allLinks.findIndex(link =&gt; link.id === subscriptionData.data.Vote.node.link.id)
          const link = subscriptionData.data.Vote.node.link
          const newAllLinks = previous.allLinks.slice()
          newAllLinks[votedLinkIndex] = link
          const result = {
            ...previous,
            allLinks: newAllLinks
          }
          return result
        }
      })
    }
  
  }
  
  export const ALL_LINKS_QUERY = gql`
    query AllLinksQuery {
      allLinks {
        id
        createdAt
        url
        description
        postedBy {
          id
          name
        }
        votes {
          id
          user {
            id
          }
        }
      }
    }
  `
  
  export default graphql(ALL_LINKS_QUERY, { name: 'allLinksQuery' }) (LinkList)</code></pre>
  </div>
  </div>
  </p>