websocket subscription server not working. unable to reach subscription server graphql-ws ws

Question

i follow the [same documentation code][1] for creating subscription server using websocket graphql, put it doesn’t work with graphql-ws and ws
the code worked when i removed the serverCleanup definition, and it also woks well for older subscription library "subscription-transport-ws"
my index.js

const { ApolloServer } = require('apollo-server-express')
const { ApolloServerPluginDrainHttpServer } = require('apollo-server-core')
const express = require('express')
const http = require('http')
const { makeExecutableSchema } = require('@graphql-tools/schema')
const { upperDirectiveTransformer } = require('./directives/uppercase')
const { WebSocketServer } = require ('ws');
const { useServer } = require('graphql-ws/lib/use/ws');
const { typeDefs } = require('./typeDefs')
const { resolvers } = require('./resolvers')
const jwt = require('jsonwebtoken');
const JWT_SECRET = 'f1BtnWgD3VKY';
const users = [
 {
    "id":1,
    "name":"Magdalena",
    "email":"[email protected]",
    "gender":"male",
    "mobile":"734-324-1043",
    "cumulativeGPA":92.1,
    "isGraduated":true,
    "friends":[
       {
          "name":"Magdalena",
          "email":"[email protected]",
          "gender":"male",
          "mobile":"734-324-1043",
          "cumulativeGPA":92.1
       },
       {
          "name":"Harman",
          "email":"[email protected]",
          "gender":"male",
          "mobile":"158-265-8979",
          "cumulativeGPA":87.9
       },
       {
          "name":"Oliver",
          "email":"[email protected]",
          "gender":"female",
          "mobile":"500-958-5193",
          "cumulativeGPA":67.9
       }
    ],
    "age":28,
    "image" : {"name":"ghklk.png", "height": 50 , "width":30},
    "idea": "auction",
    "grantedAmount": 12000
 },
 {
    "id":2,
    "name":"Lyndell",
    "email":"[email protected]",
    "gender":"male",
    "mobile":"165-705-3521",
    "cumulativeGPA":90.6,
    "isGraduated":false,
    "friends":[
       {
          "name":"Magdalena",
          "email":"[email protected]",
          "gender":"male",
          "mobile":"734-324-1043",
          "cumulativeGPA":92.1
       },
       {
          "name":"Harman",
          "email":"[email protected]",
          "gender":"male",
          "mobile":"158-265-8979",
          "cumulativeGPA":87.9
       },
       {
          "name":"Oliver",
          "email":"[email protected]",
          "gender":"female",
          "mobile":"500-958-5193",
          "cumulativeGPA":67.9
       }
    ],
    "age":23,
    "image" : {"name":"ghklk.png", "height": 50, "width":30},
    "idea": "e-collage",
    "grantedAmount": 0
 },
 ]

async function startApolloServer(typeDefs, resolvers) {
    const app = express()
    const httpServer = http.createServer(app)

    let schema = makeExecutableSchema({
        typeDefs,
        resolvers
    })

    schema = upperDirectiveTransformer(schema, 'upper')

    const wsServer = new WebSocketServer({
        server: httpServer, 
        path: '/graphql'
    })
    const serverCleanup = useServer({ schema }, wsServer);

    const server = new ApolloServer({
        schema,
        plugins: [
            ApolloServerPluginDrainHttpServer({ httpServer }),
            {
                async serverWillStart() {
                  return {
                    async drainServer() {
                        serverCleanup.dispose();
                    }
                  }
                }
            }
        ],
        context: ({ req }) => {
            const auth = req ? req.headers.authorization : null 
            try{
                const decodedToken = jwt.verify(auth.slice(4), JWT_SECRET)
                const user = users.find(user => user.id == decodedToken.id)
                return { user }
            }catch(err){
                return null
            }
        }
    })

    await server.start()
    server.applyMiddleware({ app })
    await new Promise(resolve => httpServer.listen({ port: 4000 }, resolve))
    console.log(`🚀 Server ready at https://localhost:4000${server.graphqlPath}`);
    return { server, app }
}

startApolloServer(typeDefs, resolvers)

my resolvers.js

const users = [
 {
    "id":1,
    "name":"Magdalena",
    "email":"[email protected]",
    "gender":"male",
    "mobile":"734-324-1043",
    "cumulativeGPA":92.1,
    "isGraduated":true,
    "friends":[
       {
          "name":"Magdalena",
          "email":"[email protected]",
          "gender":"male",
          "mobile":"734-324-1043",
          "cumulativeGPA":92.1
       },
       {
          "name":"Harman",
          "email":"[email protected]",
          "gender":"male",
          "mobile":"158-265-8979",
          "cumulativeGPA":87.9
       },
       {
          "name":"Oliver",
          "email":"[email protected]",
          "gender":"female",
          "mobile":"500-958-5193",
          "cumulativeGPA":67.9
       }
    ],
    "age":28,
    "image" : {"name":"ghklk.png", "height": 50 , "width":30},
    "idea": "auction",
    "grantedAmount": 12000
 },
 {
    "id":2,
    "name":"Lyndell",
    "email":"lgilbee[email protected]",
    "gender":"male",
    "mobile":"165-705-3521",
    "cumulativeGPA":90.6,
    "isGraduated":false,
    "friends":[
       {
          "name":"Magdalena",
          "email":"[email protected]",
          "gender":"male",
          "mobile":"734-324-1043",
          "cumulativeGPA":92.1
       },
       {
          "name":"Harman",
          "email":"[email protected]",
          "gender":"male",
          "mobile":"158-265-8979",
          "cumulativeGPA":87.9
       },
       {
          "name":"Oliver",
          "email":"[email protected]",
          "gender":"female",
          "mobile":"500-958-5193",
          "cumulativeGPA":67.9
       }
    ],
    "age":23,
    "image" : {"name":"ghklk.png", "height": 50, "width":30},
    "idea": "e-collage",
    "grantedAmount": 0
 }]
const { PubSub } = require('graphql-subscriptions')
const pubSub = new PubSub()
const resolvers = {
    Gender: {
      MALE: 'male',
      FEMALE: 'female',
    },
    Query: {
      getUserByID: (_, {id}) => users.find(user => user.id == id),
      users: () => users,
    },
    Mutation: {
      createUser: async (_, args) => {
        if (users.find(user => user.email === args.email)) {
          throw new Error('user already exist')
        }
        const user = { ...args, id: users.length + 1 };
        users = users.concat(user);
        pubSub.publish('USER_ADDED', { userAdded: user })
        return user
      }
    },
    Subscription: {
      userAdded: {
        subscribe: () => pubSub.asyncIterator(['USER_ADDED']),
      }
    }
};

module.exports = { resolvers };

typeDefs.js

const { gql } = require('apollo-server-express');

const typeDefs = gql`
    type User {
        id: ID!
        name: String!
        email: String!
        gender: Gender!
        mobile: String!
        cumulativeGPA:Float!
        isGraduated: Boolean
        friends: [Friend]!
        age: Int!
        image: Image
    }

    enum Gender {
        MALE
        FEMALE
    }

    type Friend{
        name: String!
        email: String!
        gender: Gender!
        mobile: String!
        cumulativeGPA:Float!
    }

    type Image{
        name: String!
        height: Int!
        width: Int!
    }

    type Query {
        users: [User]
        getUserByID(id: ID!): User
    }

    type Mutation {
        createUser(
            name: String!
            email: String!
            gender: Gender!
            mobile: String!
            cumulativeGPA:Float!
            isGraduated: Boolean
            friends: [FriendInput]!
            age: Int!
            image: ImageInput
        ): User
    }

    type Subscription {
        userAdded: User
    }

    input ImageInput{
        name: String!
        height: Int!
        width: Int!
    }

    input FriendInput{
        name: String!
        email: String!
        gender: Gender!
        mobile: String!
        cumulativeGPA:Float!
    }

`;

module.exports = { typeDefs };

ther is no client, just i need to try subscriptions from server-side on apollo-sandbox
[1]: https://www.apollographql.com/docs/apollo-server/data/subscriptions/

Dharman♦ 31.3k25 gold badges88 silver badges134 bronze badges · Accepted Answer · 2022-03-16 22:24:09Z

11

I encountered a similar problem and what worked for me was the following:

Go into the "Explorer Settings" (the cog icon) in the Apollo Studio sandbox.
Click "Edit"
Set your "Subscriptions" endpoint to "ws://localhost:4000/graphql"
Change your "Implementation" to "graphql-ws"
Save and try your subscription operation again

edited Mar 16, 2022 at 22:24

Dharman♦

31.3k25 gold badges88 silver badges134 bronze badges

answered Mar 16, 2022 at 22:18

Reiss

1112 bronze badges

0

dev trustdev trust 1 · Accepted Answer · 2023-11-24 12:58:42Z

0

{
"message": "Failed to construct ‘WebSocket’: An insecure WebSocket connection may not be initiated from a page loaded over HTTPS."
}

answered 20 mins ago

dev trust

1

New contributor

1

please, help me if possible.. my subcription is running on local… but on server I got such type of error message

– dev trust

18 mins ago

websocket subscription server not working. unable to reach subscription server graphql-ws ws