在 URQL 客户端中添加订阅时出现 Web 套接字问题答案

【问题标题】：Web socket problem when adding subscriptions in URQL client在 URQL 客户端中添加订阅时出现 Web 套接字问题
【发布时间】：2021-09-24 05:36:12
【问题描述】：

我正在将 URQL 客户端与 Apollo 服务器一起使用，现在我正在尝试处理 URQL 客户端上的订阅，但我似乎无法使 Web 套接字工作。希望有人可以帮助我谢谢。我认为客户端有问题，而不是服务器和客户端之间的通信。

以下是我在客户端中添加的代码：

import { SubscriptionClient } from "subscriptions-transport-ws";

const subscriptionClient = new SubscriptionClient(
  "ws://localhost:4000/subscriptions",
  {
    reconnect: true,
  }
);

const CreateUrqlClient = (ssrExchange: any, ctx: any) => {
  let cookie = "";
  if (isServer()) {
    cookie = ctx?.req?.headers.cookie;
  }
  return {
    url: process.env.NEXT_PUBLIC_API_URL,
    fetchOptions: {
      credentials: "include" as const,
      headers: cookie
        ? {
            cookie,
          }
        : undefined,
    },
    exchanges: [
      dedupExchange,
      subscriptionExchange({
        forwardSubscription: (operation) =>
          subscriptionClient.request(operation),
      }),
      cacheExchange,
      errorExchange,
      ssrExchange,
      fetchExchange,
    ],
  };
};
export default CreateUrqlClient;

我遇到了以下错误（服务器错误错误：无法找到本机实现，或 WebSocket 的替代实现！）。因此我也尝试添加 ws（在浏览器上不起作用）和 WebSocket 本身（不确定如何正确使用），但我仍然无法使其工作。

【问题讨论】：

标签： typescript websocket graphql apollo-server urql

【解决方案1】：

试试

const subscriptionClient =process.browser ? new SubscriptionClient('ws://localhost:4000/subscriptions', { reconnect: true }) as any : null;

这让它对我有用。

【讨论】：