RelayObservable: Unhandled Error TypeError: Cannot read property 'subscribe' of undefined in React and 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

我收到了回复，但现在 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())
});

Answer 2

我也遇到了网络问题。在 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。

RelayObservable: Unhandled Error TypeError: Cannot read property 'subscribe' of undefined in React and Relay

RelayObservable: Unhandled Error TypeError: Cannot read property 'subscribe' of undefined in React and Relay

reactjs

graphql

react-relay

express-graphql