Subscriptions - WebSocket connection to 'ws://localhost:4000/graphql' failed:

Hi, I am running into an issue on my front-end (Vue 2) when trying to connect to the web socket. I’ve tried several browsers and the error is still the same. In the sandbox everything works fine. I am hoping its something small that I overlooked.

Error: WebSocket connection to ‘ws://localhost:4000/graphql’ failed:

Server

const { ApolloServer } = require('apollo-server-express');
const { ApolloServerPluginDrainHttpServer } = require('apollo-server-core');
const express = require('express');
const http = require('http');
const { WebSocketServer } = require('ws');
const { useServer } = require('graphql-ws/lib/use/ws');
const typeDefs = require('./TypeDefs/Schema');
const resolvers = require('./Resolvers/resolvers');
const { makeExecutableSchema } = require('@graphql-tools/schema');
const cors = require('cors')

async function startApolloServer(typeDefs, resolvers) {
    try {
      // Required logic for integrating with Express
    const app = express();
    app.use(cors())
    const httpServer = http.createServer(app);
    
    // SCHEMA
    const schema = makeExecutableSchema({typeDefs, resolvers})

    // Create Web Socket
    const wsServer = new WebSocketServer({
        server: httpServer,
        path: '/graphql'
    });

  //  console.log(`webSock: ${JSON.stringify(wsServer, null, 1)}`);

    const serverCleanup = useServer({schema}, wsServer);

    // Same ApolloServer initialization as before, plus the drain plugin.
    const server = new ApolloServer({
        schema,
        plugins: [
            ApolloServerPluginDrainHttpServer({ httpServer }),
            {async serverWillStart() {
                return {
                    async drainServer() {
                        await serverCleanup.dispose();
                    }
                }
            }}
        ],
      });

      await server.start()
      server.applyMiddleware({ app });
      
      const PORT = 4000;
      // Now that our HTTP server is fully set up, we can listen to it.
      httpServer.listen(PORT, () => {
        console.log(
          `🚀 Query endpoint ready at http://localhost:${PORT}${server.graphqlPath}`
        );
        console.log(
          `🚀 Subscription endpoint ready at ws://localhost:${PORT}${server.graphqlPath}`
        );
      });
    } catch (error) {
      console.error('ERR', error)
    }
}
  

startApolloServer(typeDefs, resolvers);

Client

import Vue from 'vue'
import App from './App.vue'
// import ApolloClient from 'apollo-boost'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import VueApollo from "vue-apollo";
import vuetify from './plugins/vuetify'
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws'
import { split } from 'apollo-link'
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/graphql',
  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 }) => {
    const definition = getMainDefinition(query)
    return definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
  },
  wsLink,
  httpLink
)

const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  connectToDevTools: true
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})


Vue.use(VueApollo) //middleware

Vue.config.productionTip = false

new Vue({
  apolloProvider,
  vuetify,
  render: h => h(App)
}).$mount('#app')

Thanks!

Hello! :wave:
If you are using the graphl-ws protocol for your server then you need to use GraphQlWsLink on the client-side (instead of WebSocketLink) to ensure your subscription protocol is consistent from server to client.

Hope that helps!

2 Likes

Thanks. I am now getting a new error so this is progress!

edit: Fixed the error!

1 Like

Hey @bahlil333
Could you please share the code for your solution? I’m running into the same error. Thanks in advance!

1 Like

I just needed to change the client side. In the imports I had to change the following:

// import { WebSocketLink } from 'apollo-link-ws'
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';

Here’s the entire file just in case.

import Vue from 'vue'
import App from './App.vue'
// import ApolloClient from 'apollo-boost'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client'
import VueApollo from "vue-apollo";
import vuetify from './plugins/vuetify'
import { HttpLink } from 'apollo-link-http';
// import { WebSocketLink } from 'apollo-link-ws'
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';
import { split } from 'apollo-link'
import { getMainDefinition } from 'apollo-utilities';
const httpLink = new HttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:4000/graphql',
})

const wsLink = new GraphQLWsLink(createClient({
  url: 'ws://localhost:4000/graphql',
}));

// Create the subscription websocket link
// const wsLink = new GraphQLWsLink({
//   uri: 'ws://localhost:4000/graphql',
//   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 }) => {
    const definition = getMainDefinition(query)
    return definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
  },
  wsLink,
  httpLink
)

const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  connectToDevTools: true
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})


Vue.use(VueApollo) //middleware

Vue.config.productionTip = false

new Vue({
  apolloProvider,
  vuetify,
  render: h => h(App)
}).$mount('#app')