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

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