graphqlapollosubscriberurql

"[Network] undefined" when trying to use subscriber - URQL


I am trying to set up a subscriber to log some output on the creation of a new Message.

Currently using Urql, with ApolloServerExpress on the backend.

I am receiving an error from the useSubscription method which I am logging to the console :

message: "[Network] undefined"
name: "CombinedError"

I know for sure my backend is working as I can subscribe using the Graphiql playground just fine. As far as front end goes, I have followed almost exactly as the example in the Urql docs.

WS Client:

const wsClient = createWSClient({
  url: "ws://localhost:4000/graphql",
});

Subscriber Exchange:

subscriptionExchange({
  forwardSubscription(operation) {
    return {
      subscribe: (sink) => {
        const dispose = wsClient.subscribe(operation, sink);
        return {
          unsubscribe: dispose,
        };
      },
    };
  },
}),

MessageList Component:

const newMessages = `
subscription Messages {
  newMessage {
    content
    status
    sender {
      id
      email
    }
    recipient {
      id
      email
    }
  }
}
`;

...

  const handleSub = (messages: any, newMessage: any) => {
    console.log("Messages: ", messages);
    console.log("newMessages: ", newMessage);
  };
  const [res] = useSubscription({ query: newMessages }, handleSub);

  console.log("Res: ", res);

Solution

  • Ended up chalking graphql-ws and switched over to subscriptions-transport-ws.

    Fixed my issues.