iterator.next is not a function after making a socket.send() call

when I am performing a socket.send() on a message, I am receiving this error: Received message: {"type":"error","id":5,"payload":{"name":"TypeError","message":"iterator.next is not a function"}}

Not sure why this is being displayed and how to fix it. Error is on this code:

socket.send(JSON.stringify(message))

Below is the whole code:

export default function () {
  const url =
    "wss://test.com/graphql";
  const query = `test ($scope: String = "DEFAULT", $test: Boolean = false) {
    update(scope: $scope: $test) {
      id
      status
        __typename
      }
      __typename
    }
  }
  `;
  const variables = {
    scope: "DEFAULT",
    topic: [
      "americanfootball.*.6ec99981-9ffe-4722",
    ],
  };
  const params = {
    headers: {
      Authorization:
        "testauth"
      "Sec-WebSocket-Protocol": "graphql-ws",
      Pragma: "no-cache",
    },
  };

  const message = {
    id: 15,
    payload: { query, variables },
  };

  const response = ws.connect(url, params, function (socket) {
    socket.on("open", function open() {
      console.log("WebSocket connection established.");

      // Send the GraphQL message
      socket.send(JSON.stringify(message));
    });

>Solution :

The error you are encountering, "iterator.next is not a function," suggests that there might be an issue with the WebSocket connection or message format. This error is typically associated with the use of an incorrect protocol or an issue with the server’s response.

Here are a few suggestions to troubleshoot and resolve the issue:

Check WebSocket Protocol:
Ensure that the WebSocket server is using the correct protocol. In your code, you’ve set the "Sec-WebSocket-Protocol": "graphql-ws" header. Verify that the server supports and expects the "graphql-ws" protocol. If the server expects a different protocol, adjust the header accordingly.

Correct Typo:
It seems there’s a typo in your GraphQL query. Replace test ($scope: String = "DEFAULT", $test: Boolean = false) with test($scope: String = "DEFAULT", $test: Boolean = false).

Handle Socket Errors:
Add an event listener for the "error" event to catch any errors that might occur during the WebSocket connection:

socket.on("error", function (error) {
  console.error("WebSocket error:", error);
});

This will help you catch any errors that might be occurring during the WebSocket connection.

Check Server Logs:
Inspect the logs or error messages from the WebSocket server. The server might be providing more information about the issue.

Update WebSocket Implementation:
Ensure that you are using a WebSocket library that is compatible with your server. If you are using a third-party library (such as ws), make sure it supports the features required by the server.

Here’s an example of how you might add error handling to your existing code:

const response = ws.connect(url, params, function (socket) {
  socket.on("open", function open() {
    console.log("WebSocket connection established.");

    // Send the GraphQL message
    socket.send(JSON.stringify(message));
  });

  socket.on("message", function incoming(data) {
    console.log("Received message:", data);
  });

  socket.on("error", function (error) {
    console.error("WebSocket error:", error);
  });
});

By adding error handling, you can gather more information about what might be causing the issue. If the problem persists, it may be helpful to check the server’s documentation or contact the server’s support for assistance.