尝试使用订阅者时"[Network] undefined" - URQL

Question

我正在尝试设置一个订阅者，以便在创建新的Message时记录一些输出。

当前使用Urql，后台使用ApolloServerExpress。

我从useSubscription方法收到一个错误，我正在记录到控制台:

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

我知道我的后端肯定是工作的，因为我可以订阅使用graphhiql游乐场就好了。就前端而言，我几乎完全遵循了Urql文档中的示例。

WS客户:

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

用户交流:

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

MessageList组件:

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);

Answer 1

我在使用urql订阅时得到相同的错误。在我的情况下，我能够做console.log(error.networkError);，它给出了比[Network] undefined更有用的错误信息。你可以在这里阅读更多关于urql错误的信息。

我从error.networkError得到的错误是:

Event {
"code": 4400,
"isTrusted": false,
"reason": "{"server_error_msg":"4400: Connection initialization failed: Missing 'Authorization' or 'Cookie' header in JWT authenticati",
}

我可以通过向订阅交换设置中添加身份验证来修复它。下面是我现在使用的代码:

const wsClient = createWSClient({
url: "wss://your-api-url/graphql",
connectionParams: async () => {
// Change this line to however you get your auth token
const token = await getTokenFromStorage();
return {
headers: {
Authorization: `Bearer ${token}`,
},
};
},
});

Answer 2

最后把graphql-ws换成了subscriptions-transport-ws。

修复我的问题。