title: Vue Apollo query and subscription trying to connect to wrong port
body: <p>I have a Vue2 application in which I defined Vue Apollo with subscription. Back-end is working fine on http://localhost:4000</p>
  <p>main.js looks like this:</p>
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  import './plugins/base'
  import './plugins/chartist'
  import './plugins/vee-validate'
  import './plugins/vue-world-map'
  import vuetify from './plugins/vuetify'
  import i18n from './i18n'
  
  import ApolloClient from 'apollo-boost'
  import VueApollo from 'vue-apollo'
  
  import { HttpLink } from 'apollo-link-http'
  import { InMemoryCache } from 'apollo-cache-inmemory'
  
  import { split } from 'apollo-link'
  import { WebSocketLink } from 'apollo-link-ws'
  import { getMainDefinition } from 'apollo-utilities'
  
  const httpLink = new HttpLink({
    // You should use an absolute URL here
    uri: 'http://localhost:4000/graphql',
  })
  
  // Create the subscription websocket link
  const wsLink = new WebSocketLink({
    uri: 'ws://localhost:4000/subscriptions',
    options: {
      reconnect: true,
    },
  })
  
  
  // using the ability to split links, you can send data to each link
  // depending on what kind of operation is being sent
  const link = split(
    // split based on operation type
    ({ query }) =&gt; {
      const definition = getMainDefinition(query)
      return definition.kind === 'OperationDefinition' &amp;&amp;
        definition.operation === 'subscription'
    },
    wsLink,
    httpLink
  )
  
  // Create the apollo client
  const apolloClient = new ApolloClient({
    link,
    cache: new InMemoryCache(),
    connectToDevTools: true,
  })
  
  
  Vue.use(VueApollo)
  
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
  })
  
  Vue.config.productionTip = false
  
  new Vue({
    apolloProvider,
    router,
    store,
    vuetify,
    i18n,
    render: h =&gt; h(App),
  }).$mount('#app')
  </code></pre>
  <p>component looks like this:</p>
  <pre><code>...
  import { gql } from &quot;apollo-boost&quot;;
  export default {
    name: &quot;DashboardDashboard&quot;,
  
    apollo: {
      newItems: {
        // Apollo will store query results in this key in the data properties, so it must match a data property of the same name.
        // below is the &quot;initial&quot; query
        query: gql`
          {
            getUser(email: &quot;micahel@jackson.com&quot;) {
              _id
              first_name
              last_name
            }
          }
        `,
        update(data) {
          // This function returns our QUERY into the data property &quot;items&quot; when the component is loaded.
          return data.getUser;
        },
        subscribeToMore: {
          // below is the subscription query.
          document: gql`
            subscription getUser {
              myschema_mytable {
                _id
                first_name
                last_name
              }
            }
          `,
          updateQuery: (previousResult, { subscriptionData }) =&gt; {
            return subscriptionData.data; // This returns our SUBSCRIPTION into the data property &quot;items&quot; when there is an update
          },
        },
      },
    },
  
    data() {
      return {
        newItems: null
     }
    }
  }
  ...
  </code></pre>
  <p>package.json looks like this:</p>
  <pre><code>{
    &quot;name&quot;: &quot;vuetify-material-dashboard-pro&quot;,
    &quot;version&quot;: &quot;2.1.0&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;dev&quot;: &quot;vue-cli-service serve --open&quot;,
      &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
      &quot;build&quot;: &quot;vue-cli-service build&quot;,
      &quot;lint&quot;: &quot;vue-cli-service lint&quot;,
      &quot;i18n:report&quot;: &quot;vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'&quot;,
      &quot;now-start&quot;: &quot;vue-cli-service serve&quot;,
      &quot;test:e2e&quot;: &quot;vue-cli-service test:e2e&quot;,
      &quot;test:unit&quot;: &quot;vue-cli-service test:unit&quot;
    },
    &quot;dependencies&quot;: {
      &quot;apollo-boost&quot;: &quot;^0.4.9&quot;,
      &quot;core-js&quot;: &quot;^3.6.2&quot;,
      &quot;graphql&quot;: &quot;^15.6.0&quot;,
      &quot;vue&quot;: &quot;^2.6.11&quot;,
      &quot;vue-apollo&quot;: &quot;^3.0.8&quot;,
      &quot;vue-i18n&quot;: &quot;^8.15.3&quot;,
      &quot;vue-router&quot;: &quot;^3.1.3&quot;,
      &quot;vuetify&quot;: &quot;^2.2.6&quot;,
      &quot;vuex&quot;: &quot;^3.1.2&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@vue/cli-plugin-babel&quot;: &quot;^4.1.2&quot;,
      &quot;@vue/cli-plugin-e2e-cypress&quot;: &quot;^4.1.2&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;^4.1.2&quot;,
      &quot;@vue/cli-plugin-unit-jest&quot;: &quot;^4.1.2&quot;,
      &quot;@vue/cli-service&quot;: &quot;^4.1.2&quot;,
      &quot;@vue/eslint-config-standard&quot;: &quot;^5.0.1&quot;,
      &quot;@vue/test-utils&quot;: &quot;1.0.0-beta.30&quot;,
      &quot;apollo-link-ws&quot;: &quot;^1.0.20&quot;,
      &quot;apollo-utilities&quot;: &quot;^1.3.4&quot;,
      &quot;babel-core&quot;: &quot;7.0.0-bridge.0&quot;,
      &quot;babel-eslint&quot;: &quot;^10.0.3&quot;,
      &quot;babel-jest&quot;: &quot;^24.9.0&quot;,
      &quot;eslint&quot;: &quot;^6.8.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^8.3.0&quot;,
      &quot;eslint-config-vuetify&quot;: &quot;^0.4.1&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^6.1.2&quot;,
      &quot;sass&quot;: &quot;^1.24.3&quot;,
      &quot;sass-loader&quot;: &quot;^8.0.0&quot;,
      &quot;subscriptions-transport-ws&quot;: &quot;^0.9.19&quot;,
      &quot;vee-validate&quot;: &quot;^3.2.2&quot;,
      &quot;vue-chartist&quot;: &quot;^2.2.1&quot;,
      &quot;vue-cli-plugin-i18n&quot;: &quot;^0.6.0&quot;,
      &quot;vue-cli-plugin-vuetify&quot;: &quot;^2.0.3&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.11&quot;,
      &quot;vue-world-map&quot;: &quot;^0.1.1&quot;,
      &quot;vuetify-loader&quot;: &quot;^1.4.3&quot;
    }
  }
  </code></pre>
  <p>on the web browser console I am getting this error message (twice)</p>
  <pre><code>POST http://localhost:8080/graphql 405 (Method Not Allowed)
  POST http://localhost:8080/graphql 405 (Method Not Allowed)
  </code></pre>
  <p>Why is it trying to connect to port 8080 when it is defined as 4000 ?</p>
  <p>Thank you!</p>