javascript - 中继中的订阅错误（“订阅字段必须返回异步迭代。接收：未定义。”）

Question

激活订阅时，控制台中出现错误：

“订阅字段必须返回异步迭代。收到：未定义。”。

订阅按类型描述

type Subscription {
  HeroesNumber: Population
}

它返回所有记录的数组的长度：

{
  "data": {
    "HeroesNumber": {
      "number": 3
    }
  }
}

我以前没有使用过 websockets，想把它整理一下。如果有人帮助我做到这一点，我将不胜感激。我将提供部分代码，以及整个项目的链接。如果需要，您可以下载并运行它，并在运行时修复它。服务器使用graphql-relay、subscriptions-transport-ws、express-graphql库。

Environment.js：

import { Environment, Network, Observable, RecordSource, Store } from 'relay-runtime';
import { SubscriptionClient } from 'subscriptions-transport-ws';

const subscriptionClient = new SubscriptionClient('ws://localhost:8888/graphql', { reconnect: true });

const subscribe = (request, variables) => {
  const subscribeObservable = subscriptionClient.request({
    query: request.text,
    operationName: request.name,
    variables,
  });
  return Observable.from(subscribeObservable);
};

async function fetchRelay(params, variables, _cacheConfig) {
  const response = await fetch('http://localhost:5000/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: params.text,
      variables,
    }),
  });

  const json = await response.json();

  if (Array.isArray(json.errors)) {
    console.log(json.errors);
    throw new Error(
      `Error fetching GraphQL query '${params.name
      }' with variables '${JSON.stringify(variables)}': ${JSON.stringify(
        json.errors,
      )}`,
    );
  }

  return json;
}

export default new Environment({
  network: Network.create(fetchRelay, subscribe),
  store: new Store(new RecordSource(), { gcReleaseBufferSize: 10 })
});

订阅：

import { graphql, requestSubscription } from 'react-relay';
import environment from '../Environment';

const subscription = graphql`
  subscription PopSubscription {
    HeroesNumber {
      number
    }
  }
`;

function PopSubscription() {
  requestSubscription(
    environment,
    {
      subscription,
      onCompleted: () => {},
      onError: error => console.error(error),
    }
  );
}

export default PopSubscription;

如果我在这里列出所有组件，那将是太多的代码，但我会提供项目的链接。这是一个全栈应用程序，它使用没有数据库连接的“假服务器”。

项目链接： https ://github.com/narzantaria/fullstack-react-relay

感谢您的帮助和关注！

标签： javascriptreactjswebsocketgraphqlrelay