I have a mutation that fires the channel event 'countIncr', but I don't see the active corresponding subscription fire with the event payload.

UPDATE: I've made several updates to this posting and now I'm changing the title to be more representative of where I am.

I'm getting a graphqlPlayground error

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

TGRstack reproduction i'm having trouble with: /

Working Reproduction without TGRstack:

Frontend: .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 Resolvers: .ts

BE Schema: .ts

BE Controller: .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
}

Here is the service log after you've run through the #getting started instructions in the Readme.md

[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

UPDATE

Incase you've tried to clone the repo and after running nps it didn't work its because there was a step missing in nps setup. I've pushed an update to the stack with the nps setup improved.

UPDATE 2

updated code and links in question per latest mit

UPDATE 3

Some people have suggested that pubsub should be a single import. I've updated the code but this creates a new error:

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

UPDATE 4

numerous minor changes trying to hunt down import/export bugs(?) now getting the error. I fixed this error by hardening imports (there was some issue w/ the index file not properly exporting).

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

Working Reproduction without TGRstack:

Update 5

I demodularized/deposed a bunch of things to make it easier to trace whats going on but still getting the same error

I have a mutation that fires the channel event 'countIncr', but I don't see the active corresponding subscription fire with the event payload.

UPDATE: I've made several updates to this posting and now I'm changing the title to be more representative of where I am.

I'm getting a graphqlPlayground error

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

TGRstack reproduction i'm having trouble with: https://github./TGRstack/tgr-apollo-subscription-example-microservice/

Working Reproduction without TGRstack: https://github./Falieson/fullstack-apollo-subscription-example

Frontend: https://github./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 Resolvers: https://github./TGRstack/tgr-apollo-subscription-example-microservice/blob/master/counter-service/src/gql/Resolvers.ts

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

BE Controller: https://github./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
}

Here is the service log after you've run through the #getting started instructions in the Readme.md

[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

UPDATE

Incase you've tried to clone the repo and after running nps it didn't work its because there was a step missing in nps setup. I've pushed an update to the stack with the nps setup improved.

UPDATE 2

updated code and links in question per latest mit

UPDATE 3

Some people have suggested that pubsub should be a single import. I've updated the code but this creates a new error:

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

UPDATE 4

numerous minor changes trying to hunt down import/export bugs(?) now getting the error. I fixed this error by hardening imports (there was some issue w/ the index file not properly exporting).

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

Working Reproduction without TGRstack: https://github./Falieson/fullstack-apollo-subscription-example

Update 5

I demodularized/deposed a bunch of things to make it easier to trace whats going on but still getting the same error

• javascript
• reactjs
• typescript
• graphql
• apollo

• This answer here solved my issue. – Shamxeed Commented Aug 25, 2021 at 14:41

1 Answer 1

I solved this issue in 2 places

1. ApolloServer.installSubscriptionHandler() TEMPORARILY replacing middleware.apolloSubscriptions() . I configure the subscriptions middleware following this guide: https://www.apollographql./docs/graphql-subscriptions/express so I'm going to guess there's something messed up w/ the version of one of those packages or the guide itself.

    ApolloServer.installSubscriptionHandlers(ws)

    const listener = ws.listen({port: config.PORT}, () => {
      middleware.apolloSubscriptions(ws)
      // middleware.apolloSubscriptions(ws)

2. terminatingLink and getMainDefinition are necessary for the client https://github./TGRstack/tgr-apollo-subscription-example-microservice/mit/75b6165f2dc1d035a41f1129f7386a1e18c7ba53#diff-2c47ef33b8ed0e4c893cbc161bcf7814R37

  private _terminatingLink = split(
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query)
      return (
        kind === 'OperationDefinition' && operation === 'subscription'
      )
    },
    this._wsLink,
    this._httpLink,
  )