【问题标题】:apollo "Subscription field must return Async Iterable. Received: undefined"apollo“订阅字段必须返回异步迭代。收到:未定义”
【发布时间】:2019-09-28 16:57:40
【问题描述】:

我有一个触发通道事件“countIncr”的突变,但我没有看到带有事件有效负载的活动相应订阅触发。

更新:我已经对这篇帖子进行了多次更新,现在我正在更改标题以更能代表我的位置。

我收到了 graphqlPlayground 错误

"Subscription field must return Async Iterable. Received: undefined"

TGRstack 复制我遇到了问题: https://github.com/TGRstack/tgr-apollo-subscription-example-microservice/

没有 TGRstack 的工作复制: https://github.com/Falieson/fullstack-apollo-subscription-example

前端: https://github.com/TGRstack/tgr-apollo-subscription-example-microservice/blob/master/counter-ui/src/app/routes/Home/HomePage.tsx

const COUNTER_SUBSCRIPTION = gql`
subscription onCountIncr {
  count
}
`

const Counter = () => (
  <Subscription
    subscription={COUNTER_SUBSCRIPTION}
  >
    {({ data, loading }) => {
      console.log({loading, data})
      return loading
        ? <h1>Loading ...</h1>
        : data.count
          ? <h2>Counter: {data.count}</h2>
          : <h1>Counter Subscription Not Available</h1>
    }}
  </Subscription>
)

BE 解析器:https://github.com/TGRstack/tgr-apollo-subscription-example-microservice/blob/master/counter-service/src/gql/Resolvers.ts

BE 架构:https://github.com/TGRstack/tgr-apollo-subscription-example-microservice/blob/master/counter-service/src/gql/Schema.ts

BE 控制器:https://github.com/TGRstack/tgr-apollo-subscription-example-microservice/blob/master/counter-service/src/gql/Counter.ts

const count = {
  resolve: data => {
    console.log('CounterSub>', {data})
    return data
  },
  subscribe: () => pubsub.asyncIterator(['countIncr'])
}

const CounterSubscriptions = {
  count
}
async function countIncr(root: any, args: any, context: any) {
  const count = Counter.increment()
  await pubsub.publish('countIncr', count )
  console.log('countIncr', '>>>', { count })
  return count
}

这是您完成 Readme.md 中的#getting started 指令后的服务日志

[FE] GET /favicon.ico 200 2.465 ms - 1551                   # WEBCLIENT LOADED
[BE] CounterSub> { data: undefined }                        # SUBSCRIPTION REQUEST
[BE] { data: [Object: null prototype] { count: null } }     # SUBSCRIPTION RESULT
[BE] POST / 200 21.254 ms - 24
[BE] 2019-05-10 11:37:20 [info]:     HELLO                  # APOLLO CLIENT CONNECTED AGAIN (why always 2?)
[BE] countIncr >>> { count: 1 }                             # MUTATION REQUEST
[BE] { data: [Object: null prototype] { countIncr: 1 } }    # MUTATION RESPONSE
[BE] POST / 200 13.159 ms - 25
[BE] countIncr >>> { count: 2 }                             # MUTATION REQUEST
[BE] { data: [Object: null prototype] { countIncr: 2 } }    # MUTATION RESPONSE
[BE] POST / 200 4.380 ms - 25

更新

如果您尝试克隆 repo,但在运行 nps 后它不起作用,因为nps setup 中缺少一个步骤。我已将更新推送到堆栈,改进了 nps setup

更新 2

根据最新提交更新有问题的代码和链接

更新 3

有人建议pubsub 应该是一个单一的导入。我已经更新了代码,但这会产生一个新错误:

Error: Apollo Server requires either an existing schema, modules or typeDefs

更新 4

许多试图寻找导入/导出错误的小改动(?)现在得到错误。我通过强化导入修复了这个错误(索引文件导出不正确时出现了一些问题)。

"message": "Subscription field must return Async Iterable. Received: undefined"

没有 TGRstack 的工作复制:https://github.com/Falieson/fullstack-apollo-subscription-example

更新 5

我解调/分解了一堆东西,以便更容易追踪正在发生的事情,但仍然得到相同的错误

【问题讨论】:

  • 这个答案here 解决了我的问题。

标签: javascript reactjs typescript graphql apollo


【解决方案1】:

我在 2 个地方解决了这个问题

  1. ApolloServer.installSubscriptionHandler() 临时替换 middleware.apolloSubscriptions() 。我按照本指南配置了订阅中间件:https://www.apollographql.com/docs/graphql-subscriptions/express,所以我猜测其中一个软件包的版本或指南本身会出现问题。

    ApolloServer.installSubscriptionHandlers(ws)

    const listener = ws.listen({port: config.PORT}, () => {
      middleware.apolloSubscriptions(ws)
      // middleware.apolloSubscriptions(ws)
  1. terminatingLink 和 getMainDefinition 对于客户端是必需的 https://github.com/TGRstack/tgr-apollo-subscription-example-microservice/commit/75b6165f2dc1d035a41f1129f7386a1e18c7ba53#diff-2c47ef33b8ed0e4c893cbc161bcf7814R37
  private _terminatingLink = split(
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query)
      return (
        kind === 'OperationDefinition' && operation === 'subscription'
      )
    },
    this._wsLink,
    this._httpLink,
  )

【讨论】:

    猜你喜欢
    • 2021-07-06
    • 2020-04-04
    • 1970-01-01
    • 2021-12-15
    • 1970-01-01
    • 2017-08-26
    • 2018-10-19
    • 2020-08-12
    • 1970-01-01
    相关资源
    最近更新 更多