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!
