RelayObservable：未处理的错误 TypeError：无法读取 React 和 Relay 中未定义的属性“订阅”

Posted 2023-03-10

【中文标题】RelayObservable：未处理的错误 TypeError：无法读取 React 和 Relay 中未定义的属性“订阅”

【英文标题】：RelayObservable: Unhandled Error TypeError: Cannot read property 'subscribe' of undefined in React and Relay

【发布时间】：2020-04-06 00:02:32

【问题描述】：

我已按照如何使用 GraphQL React + Relay (https://relay.dev/docs/en/subscriptions) 的订阅教程进行操作，但仍然无法正常工作。

我在我的应用程序中使用 Relay Modern 并且已成功集成查询但无法使用 requestSubscription 功能。

任何帮助都会很棒。

我的 environment.js 文件：

function setupSubscription(
  config,
  variables,
  cacheConfig,
  observer,
) 
  const query = config.text
  const subscriptionClient = new SubscriptionClient('ws://192.168.1.19:8000/subscriptions', reconnect: true);
  const id = subscriptionClient.on(query, variables, (error, result) => 
    console.log(result,'result');
    observer.onNext(data: result)
  )

const network = Network.create(fetchQuery, setupSubscription)

const environment = new Environment(
  network,
  store
);

export default environment;

- 我的 Subscription.js 文件：

const subscription = graphql`
      subscription newVoteSubscription 
        leaderboardUpdate 
          id,
          game_id,
          event_id,
          colarr,
          rowarr
        
      
    `;
    function newVoteSubscription(callback) 
      const variables = ;
      return requestSubscription(environment, 
        subscription: subscription,
        variables: variables,
        onError: (error)=> 
          console.log(error, "error");
        ,
        onNext: (res) => 
          console.log(res,'onNext');
          // callback();
        ,
        updater: proxyStore => 
          console.log(proxyStore,'proxyStore');
        ,
        onCompleted: () => 
          console.log('test');
        ,
      );
    

    export default newVoteSubscription;

【参考方案1】：

我也遇到了网络问题。在 Relay 7 上使用 Observable 对我有用。这也处理错误情况和服务器关闭订阅。

const subscriptionClient = new SubscriptionClient('ws://192.168.1.19:8000/subscriptions', reconnect: true)

function setupSubscription(
  request,
  variables,
  cacheConfig,
) 
  const query = request.text;

  // Observable is imported from the relay-runtime package
  return Observable.create(sink => 
    const c = subscriptionClient.request( query, variables ).subscribe(sink);
    return c.unsubscribe;
  );

我不确定我为什么要使用接收器/取消订阅方法，但这对我有用。据我所知，relay 和subscriptions-transport-ws 使用的可观察类型不兼容。

我还建议您在setupSubscription 函数之外调用new SubscriptionClient()，否则您将为每个订阅请求打开一个新的WebSocket。

【讨论】：

我在外面调用了 new SubscriptionClient() 但返回如下错误：错误：无法找到本机实现，或 WebSocket 的替代实现！

哪个浏览器/操作系统？

Chrome 和 Windows 10

【参考方案2】：

我收到了响应，但现在observer.onNext 未定义。

我更新的代码 environment.js：

const setupSubscription = (config, variables, cacheConfig, observer) => 
  const query = config.text

  const subscriptionClient = new SubscriptionClient('ws://192.168.1.19:8000/subscriptions', reconnect: true)
  subscriptionClient.request( query, variables ).subscribe((result) => 
    observer.onNext(data: result)
  );

  return Observable.create(() =>     
    return subscriptionClient;
  );


const environment = new Environment(
  network: Network.create(fetchQuery, setupSubscription),
  store: new Store(new RecordSource())
);