I have a Frontend app that is built in React and it is connected to a GraphQL backend using Apollo Client.
Queries and Mutations are working fine in all browsers, but I have an issue with the Subscriptions. On Google Chrome and Safari are working fine, but on Firefox I get always this two errors:
Firefox can’t establish a connection to the server at wss://my-backend.net/graphql-ws
GET wss://my-backend.net/graphql-ws - Error 400 Bad Request
And the wsLink in the Frontend looks like follows:
import { WebSocketLink } from '@apollo/client/link/ws';
const wsLink = new WebSocketLink({
uri: process.env.REACT_APP_WEBSOCKET_URL || '',
options: {
reconnect: true,
reconnectionAttempts: getReconnectAttempts(process.env.REACT_APP_WEBSOCKET_RECONNECTION_ATTEMPTS),
connectionParams: () => ({
Authorization: authStore.token,
'Ocp-Apim-Subscription-Key': process.env.REACT_APP_SUBSCRIPTION_TOKEN as string,
}),
},
});
Does anyone have any idea of what is happening here? Why is it working well on Chrome and not on Firefox?
Thank you all in advance.