React js - problem with proxy for web socket link in react - node.js

Question

I am setting up the proxy server using setupProxy for my react app using graphql as backend which is running on a different part, doing so The HTTP link proxy is working fine but WebSocket link proxy is giving me an error
For solving the problem I have tried to include options as ws: true, but it's not working.
The error is as follows:
SyntaxError: Failed to construct 'WebSocket': The URL '/ws' is invalid.
Error:
setupProxy.js
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy("/graphql", { target: "http://localhost:8001/graphql" }));
app.use(
proxy("/ws", {
target: "ws://localhost:8001",
ws: true,
})
);
};
index.js
import { WebSocketLink } from "apollo-link-ws";
import { createUploadLink } from "apollo-upload-client";
//Apollo Imports End
// Declaring constants for GraphQL
const httpLink = new createUploadLink({
uri: "/graphql"
});
const wsLink = new WebSocketLink({
uri: "/ws",
options: {
reconnect: true
}
});
I expected the call should be same as normal call but its throwing an error.

Answer 1

/ws is not a valid URI for a WebSocket class.
A websocket expect a full URL to connect, you can try it in your browser console:
In this case, Apollo is using the native web socket class behind the scenes, so if you can make this work, it will work in Apollo too.
Try using ws://localhost:8001 instead.

Answer 2

Just replace with this
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy("/graphql", { target: "http://localhost:8001/graphql" }));
app.use(proxy("ws://locahost:8001"));
};
OR
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy("/graphql", { target: "http://localhost:8001/graphql" }));
app.use(proxy('/ws', {
target: 'http://localhost:8001',
ws: true
})
);
};

Answer 3

Adding this in setupProxy.js file worked for me :
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = app => {
const wsProxy = createProxyMiddleware("/graphql", {
ws: true,
changeOrigin: true,
autoRewrite: true,
target: "http://localhost:8001",
});
app.use(wsProxy);
};
This is what I have in my apollo-client.ts file
const httpLink = new HttpLink({
uri: "/graphql",
credentials: "include",
});
const wsLink = new WebSocketLink({
uri: `ws://${window.location.host}/graphql`,
options: {
reconnect: true,
lazy: true,
connectionParams: {
headers: {
//add your headers here
},
},
},
});
const link = split(
// split based on operation type
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === "OperationDefinition" &&
definition.operation === "subscription"
);
},
wsLink,
httpLink,
);