尝试使用订户时出现“[网络] 未定义”- URQL
"[Network] undefined" when trying to use subscriber - URQL
我正在尝试设置订阅者以记录有关创建新 Message
的一些输出。
目前使用 Urql,后端使用 ApolloServerExpress。
我从正在登录到控制台的 useSubscription
方法收到错误:
message: "[Network] undefined"
name: "CombinedError"
我确信我的后端工作正常,因为我可以使用 Graphiql playground 进行订阅。
就前端而言,我几乎完全按照 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,
};
},
};
},
}),
消息列表组件:
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);
结束粉笔 graphql-ws
并切换到 subscriptions-transport-ws
。
解决了我的问题。
我在使用带有 urql 的订阅时遇到了同样的错误。在我的例子中,我能够执行 console.log(error.networkError);
,它给出了比 [Network] undefined
更有用的错误消息。
您可以在 urql here.
中阅读有关错误的更多信息
我从 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}`,
},
};
},
});
我正在尝试设置订阅者以记录有关创建新 Message
的一些输出。
目前使用 Urql,后端使用 ApolloServerExpress。
我从正在登录到控制台的 useSubscription
方法收到错误:
message: "[Network] undefined"
name: "CombinedError"
我确信我的后端工作正常,因为我可以使用 Graphiql playground 进行订阅。 就前端而言,我几乎完全按照 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,
};
},
};
},
}),
消息列表组件:
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);
结束粉笔 graphql-ws
并切换到 subscriptions-transport-ws
。
解决了我的问题。
我在使用带有 urql 的订阅时遇到了同样的错误。在我的例子中,我能够执行 console.log(error.networkError);
,它给出了比 [Network] undefined
更有用的错误消息。
您可以在 urql here.
我从 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}`,
},
};
},
});