Configuring Apollo Server using subscriptions-transport-ws?

Question

It looks like my server is configured according to Apollo docs at http://dev.apollodata.com/tools/apollo-server/setup.html . In the 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: “GraphQL Server is now running at http: // localhost: 8080 / graphql ” in 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:

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

What am I missing?

Answer 1

You need to create a dedicated websocket server. It will work on another port, and the code for its configuration is provided in the subscriptions-transport-ws package.

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

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

Answer 2

TL DR: You can use graphql-up to quickly get a GraphQL server with support for subscribing up and ready. Here's a more detailed guide on using this in conjunction with Apollo and the websocket subscriptions-transport-ws client.

Get GraphQL server with one click

Suppose you want to create a Twitter clone based on this GraphQL Schema in IDL syntax :

 type Tweet { id: ID! title: String! author: User! @relation(name: "Tweets") } type User { id: ID! name: String! tweets: [Tweet!]! @relation(name: "Tweets") } 

Click this button to get your own GraphQL API, and then open the Playground, where you can add some tweets, request all tweets, and also check your subscriptions.

Easy to use API

First create a user who will be the author for all upcoming tweets. Run this mutation on the playground:

 mutation createUser { createUser(name: "Tweety") { id # copy this id for future mutations! } } 

Here you request all the tweets and their authors stored on your GraphQL server:

 query allTweets { allTweets { id title createdAt author { id name } } } 

Web Card Subscription Support

Now subscribe to the new Tweety tweets. This is the syntax:

 subscription createdTweets { Message(filter: { mutation_in: [CREATED] node: { author: { name: "Tweety" } } }) { node { id text createdAt sentBy { id name } } } } 

Now create a new tab on the playground and create a new tweet:

 mutation createTweet { createTweet( title: "#GraphQL Subscriptions are awesome!" authorId: "<id-from-above>" ) { id } } 

You should see a new event appearing on another tab that you subscribed to earlier.

Answer 3

Here's a demo about using Apollo GraphQL, React, and Hapi: https://github.com/evolastech/todo-react . It is less overloaded than GitHunt-React and GitHunt-API

Answer 4

It looks like you are not actually making a websocket server. use SubscriptionServer. Keep in mind that it’s absolutely NOT true that you should have a dedicated websocket port (I also thought about it), as davidyaha says. I have both my regular requests and subtitles on the same port.

 import { createServer } from 'http'; import { SubscriptionServer } from 'subscriptions-transport-ws'; import { execute, subscribe } from 'graphql'; import { schema } from './my-schema'; // All your graphQLServer.use() etc setup goes here, MINUS the graphQLServer.listen(), // you'll do that with websocketServer: // Create WebSocket listener server const websocketServer = createServer(graphQLServer); // Bind it to port and start listening websocketServer.listen(3000, () => console.log( `Server is now running on http://localhost:3000` )); const subscriptionServer = SubscriptionServer.create( { schema, execute, subscribe, }, { server: websocketServer, path: '/subscriptions', }, );