subscriptionsClient.subscribe is not a function - graphql

Question

At this instance i am just trying to run a dummy subscription using graphql-subscriptions, and later-on, integrate it in my code.
However, even with the minimal example.
I am following a scotch.io example, here is its git link
https://github.com/kimobrian/GraphQL-Express/tree/subscriptions
it is throwing error on subscription at graphiql
subscriptionsClient.subscribe is not a function
Note: I am not even trying it from a separate client. I just want a server that has schema including queries and mutations and subscription, and i want to be able to see the real-time magic of subscription when i run it in graphiql in different windows.
Following some suggestions on the net, i have even downgraded subscription-transport-ws version from 0.9 to 0.8.3
I have running queries and mutations but subscription throws above mentioned error in Graphiql
Server File
import express from 'express';
import {
graphqlExpress,
graphiqlExpress,
} from 'graphql-server-express';
import bodyParser from 'body-parser';
import cors from 'cors';
import { schema } from './src/schema';
import { execute, subscribe } from 'graphql';
import { createServer } from 'http';
import { SubscriptionServer } from 'subscriptions-transport-ws';
const PORT = 7900;
const server = express();
server.use('*', cors({ origin: 'http://localhost:3000' }));
server.use('/graphql', bodyParser.json(), graphqlExpress({
schema
}));
server.use('/graphiql', graphiqlExpress({
endpointURL: '/graphql',
subscriptionsEndpoint: `ws://localhost:${PORT}/subscriptions`
}));
// We wrap the express server so that we can attach the WebSocket for subscriptions
const ws = createServer(server);
ws.listen(PORT, () => {
console.log(`GraphQL Server is now running on http://localhost:${PORT}`);
// Set up the WebSocket for handling GraphQL subscriptions
new SubscriptionServer({
execute,
subscribe,
schema
}, {
server: ws,
path: '/subscriptions',
});
});
package.json
{
"name": "tutorial-server",
"version": "1.0.0",
"description": "A simple GraphQL server",
"main": "server.js",
"scripts": {
"start": "nodemon ./server.js --exec babel-node -e js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.24.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-0": "^6.22.0",
"nodemon": "^1.11.0"
},
"dependencies": {
"body-parser": "^1.17.1",
"cors": "^2.8.3",
"express": "^4.15.2",
"graphql": "^0.11.3",
"graphql-server-express": "^1.1.2",
"graphql-subscriptions": "^0.5.1",
"graphql-tools": "^1.2.3",
"subscriptions-transport-ws": "0.8.3"
}
}
Schema
import {
makeExecutableSchema
} from 'graphql-tools';
import { resolvers } from './resolvers';
const typeDefs = `
type Channel {
id: ID! # "!" denotes a required field
name: String
}
type Message {
id: ID!
text: String
}
# This type specifies the entry points into our API
type Query {
channels: [Channel] # "[]" means this is a list of channels
channel(id: ID!): Channel
}
# The mutation root type, used to define all mutations
type Mutation {
addChannel(name: String!): Channel
}
# The subscription root type, specifying what we can subscribe to
type Subscription {
channelAdded: Channel
}
`;
const schema = makeExecutableSchema({ typeDefs, resolvers });
export { schema };
Resolver
import { PubSub } from 'graphql-subscriptions';
const channels = [{
id: 1,
name: 'soccer',
}, {
id: 2,
name: 'baseball',
}];
let nextId = 3;
const CHANNEL_ADDED_TOPIC = 'newChannel';
const pubsub = new PubSub();
export const resolvers = {
Query: {
channels: () => {
return channels;
},
channel: (root, { id }) => {
return channels.find(channel => channel.id === id);
},
},
Mutation: {
addChannel: (root, args) => {
const newChannel = { id: String(nextId++), messages: [], name: args.name };
channels.push(newChannel);
pubsub.publish(CHANNEL_ADDED_TOPIC, { channelAdded: newChannel });
return newChannel;
}
},
Subscription: {
channelAdded: {
subscribe: () => pubsub.asyncIterator(CHANNEL_ADDED_TOPIC)
}
}
};
I expect that it should update in the subscription window when pubsub.publish is hit