GraphQL Subscriptions - subscriptionsClient.subscribe is not a function - node.js

Question

So, I'm trying create a basic GraphQL Subscription Server. Problem in request result in graphiql. It's - "subscriptionsClient.subscribe is not a function". I don't understand where's problem.
For GraphQL Subscription Server I have used: graphql-server-express,
subscriptions-transport-ws, graphql-subscriptions
So, it's the task for you, GraphQL masters.
Code:
index.js
const { createServer } = require('http')
const app = require('express')();
const bodyParser = require('body-parser')
const { graphqlExpress, graphiqlExpress } = require('graphql-server-express')
const { SubscriptionServer } = require('subscriptions-transport-ws')
const { subscribe, execute } = require('graphql');
const schema = require('./schema');
app.use(bodyParser.json());
app.use('/graphql', new graphqlExpress({
schema
}));
app.use('/graphiql', new graphiqlExpress({
endpointURL: '/graphql',
subscriptionsEndpoint: 'ws://localhost:4000/subscriptions'
}));
const server = createServer(app);
server.listen(4000, () => {
console.log("Server is listening on port 4000!");
subscriptionServer = SubscriptionServer.create(
{
schema,
execute,
subscribe,
onConnect: () => console.log("Client connected!")
}, {
server,
path: '/subscriptions'
}
);
});
schema.js
const {
GraphQLSchema,
GraphQLObjectType,
GraphQLNonNull,
GraphQLList,
GraphQLID,
GraphQLString
} = require('graphql');
const { PubSub, withFilter } = require('graphql-subscriptions');
const socket = new PubSub();
const store = [];
const NameType = new GraphQLObjectType({
name: "Name",
fields: {
id: { type: GraphQLID },
name: { type: GraphQLString }
}
});
const RootQuery = new GraphQLObjectType({
name: "RootQuery",
fields: {
names: {
type: new GraphQLList(NameType),
resolve: () => store
}
}
});
const RootMutation = new GraphQLObjectType({
name: "RootMutation",
fields: {
addName: {
type: NameType,
args: {
name: { type: new GraphQLNonNull(GraphQLString) }
},
resolve(_, { name }) {
let model = {
id: store.length,
name
}
socket.publish("names", model);
store.push(model);
return model;
}
}
}
});
const RootSubscription = new GraphQLObjectType({
name: "RootSubscription",
fields: {
names: {
type: NameType,
resolve() {
console.log("IS RUNNING");
},
subscribe: withFilter(() => pubsub.asyncIterator("names"), (payload, variables) => {
return payload.names.id === variables.relevantId;
})
}
}
});
module.exports = new GraphQLSchema({
query: RootQuery,
mutation: RootMutation,
subscription: RootSubscription
});

Answer 1

Ok, here's thing.
I've created a fully responsive GraphQL Subscriptions Server using Apollo-Server.
Just use apollo-server-express and apollo-server packages for this task. ApolloServer provides GraphQL Playground that is supports subscriptions. So it's easy to debug and use it on front-end.
Good Luck!

Answer 2

Here is the latest one. This is based on ApolloGraphql Documentation. This worked perfectly for me.
app.js
import mongoose from 'mongoose'
import cors from 'cors';
import dotEnv from 'dotenv'
import http from 'http';
import { ApolloServer, PubSub } from 'apollo-server-express';
import schema from './graphql/schema'
import express from 'express';
dotEnv.config();
const port = process.env.PORT || 3000;
const pubsub = new PubSub();
const app = express();
const server = new ApolloServer({
schema,
subscriptions: {
onConnect: () => console.log('🕸️ Client connected to websocket'),
onDisconnect: (webSocket, context) => {
console.log('Client disconnected from websocket')
},
},
});
server.applyMiddleware({ app })
const httpServer = http.createServer(app);
server.installSubscriptionHandlers(httpServer);
httpServer.listen(port, () => {
console.log(`🚀 Apollo Server Server ready at http://localhost:${port}${server.graphqlPath}`)
})
package.json
"dependencies": {
"apollo-server": "^2.25.1",
"apollo-server-express": "^2.25.1",
"babel-node": "^0.0.1-security",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"cross-fetch": "^3.1.4",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"graphql": "^15.5.0",
"graphql-subscriptions": "^1.2.1",
"graphql-tools": "^7.0.5",
"moment": "^2.29.1",
"mongoose": "^5.12.13",
"subscriptions-transport-ws": "^0.9.19"
},
"devDependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/node": "^7.14.2",
"#babel/preset-env": "^7.14.4",
"#babel/register": "^7.13.16",
"jest": "^27.0.4",
"nodemon": "^2.0.7",
"supertest": "^6.1.3"
}

Answer 3

import { w3cwebsocket } from 'websocket';
...
const myWSClient = createClient({
url: websockerUrl || "",
webSocketImpl: w3cwebsocket,
});
const wsLink = new GraphQLWsLink(myWSClient);