After recenty upgrading Gatsby from v2 to v4, I am unable to get my socket client to connect.

In my Gatsby app, I have the following to connect to my staging socket server (which is working with my v2 version of gatsby)

const socketClient = io(window.apiEndpoint, {
  query: {
    clientId,
  },
});
console.log("socketClient:", socketClient.connected) // false

I have tried adding a listener for connection errors like so:

socketClient.on("connect_error", (err) => {
  console.log(err); // server error
});

But only get the error server error.

I know my server is working fine because it works with my previous version of the app.

Is there a way to get more details on the error?

I can also see in my network tab that there are a bunch of network requests like so:

Request URL: ws://localhost:58881/socket.io/?EIO=4&transport=websocket&sid=u3YuZeAifJYOICpNAAAE
Request Method: GET
Status Code: 101 Switching Protocols

and

Request URL: ws://localhost:8000/socket.io/?EIO=4&transport=websocket
Request Method: GET
Status Code: 101 Switching Protocols

Why do these point to localhost if my socket server is pointing to an external URL?

Any debugging tips to try and get more details on the error or understand why the socket client is polling ws://localhost... would be greatly appreciated.