尝试使用订户时出现“[网络] 未定义”- URQL

Question

我正在尝试设置订阅者以记录有关创建新 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);

Answer 1

结束粉笔 graphql-ws 并切换到 subscriptions-transport-ws。

解决了我的问题。

Answer 2

我在使用带有 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}`,
      },
    };
  },
});

尝试使用订户时出现“[网络] 未定义”- URQL

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

graphql

apollo

subscriber

urql