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

Question

我已按照如何使用 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;

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

我不确定为什么我使用接收器/取消订阅方法，但这对我有用。据我记得中继使用的可观察类型并且subscriptions-transport-ws不兼容。

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

Answer 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())
});