Setting Up Apollo Server with subscriptions-transport-ws?

Question

It seems like I have my server set up according to the Apollo docs at http://dev.apollodata.com/tools/apollo-server/setup.html. In my server/main.js file:

//SET UP APOLLO INCLUDING APOLLO PUBSUB
const executableSchema = makeExecutableSchema({
    typeDefs: Schema,
    resolvers: Resolvers,
    connectors: Connectors,
    logger: console,
});

const GRAPHQL_PORT = 8080;
const graphQLServer = express();

// `context` must be an object and can't be undefined when using connectors
graphQLServer.use('/graphql', bodyParser.json(), apolloExpress({
    schema: executableSchema,
    context: {}, //at least(!) an empty object
}));

graphQLServer.use('/graphiql', graphiqlExpress({
    endpointURL: '/graphql',
}));

graphQLServer.listen(GRAPHQL_PORT, () => console.log(
    `GraphQL Server is now running on http://localhost:${GRAPHQL_PORT}/graphql`
));
//SET UP APOLLO INCLUDING APOLLO PUBSUB

It prints out "GraphQL Server is now running on http://localhost:8080/graphql" to the terminal log indicating that the server was successfully initialized.

But at the top of my main_layout component, when I run this code:

import { Client } from 'subscriptions-transport-ws';
const wsClient = new Client('ws://localhost:8080');

...I get this console message:

WebSocket connection to 'ws://localhost:8080/' failed: Connection closed before receiving a handshake response

What am I missing?

Answer 1

You need to create a dedicated websocket server. It will run on a different port and the code to set it up is provided on the subscriptions-transport-ws package.

Take a look on the following code from GitHunt-API example: https://github.com/apollostack/GitHunt-API/blob/master/api/index.js#L101-L134

Also you would see that this code is dependent on a class called SubscriptionManager. It is a class from a package called graphql-subscriptions also by the apollo team, and you can find an example of how to use it here: https://github.com/apollostack/GitHunt-API/blob/master/api/subscriptions.js