typescript-resolver plugin: subscription resolver type error

[armintan]

I'm trying to get the simple subscription server below to compile, but I'm getting the following error:

index.ts:37:9 - error TS2322: Type '(_parent: {}, _args: {}, _context: any, _info: GraphQLResolveInfo) => AsyncIterator<unknown, any, undefined>' is not assignable to type 'SubscriptionSubscribeFn<any, {}, any, {}>'.
Type 'AsyncIterator<unknown, any, undefined>' is not assignable to type 'AsyncIterable | Promise<AsyncIterable>'.
Type 'AsyncIterator<unknown, any, undefined>' is missing the following properties from type 'Promise<AsyncIterable>': then, catch, finally, [Symbol.toStringTag]

37 subscribe: (_parent, _args, _context, _info) => {
~~~~~~~~~

Found 1 error.

Here is the straightforward apollo server code:

// @ts-check
import { createServer } from 'http';
import Express from 'express';
import { execute, subscribe } from 'graphql';
import { ApolloServer, gql } from 'apollo-server-express';
import { PubSub } from 'graphql-subscriptions';
import { SubscriptionServer } from 'subscriptions-transport-ws';
import { makeExecutableSchema } from '@graphql-tools/schema';

import { Resolvers } from './generated/graphql';

(async () => {
  const pubsub = new PubSub();
  const app = Express();
  const httpServer = createServer(app);

  // Schema definition
  const typeDefs = gql`
    type Query {
      currentNumber: Int
    }
    type Subscription {
      numberIncremented: Int
    }
  `;

  // Resolver map
  const resolvers: Resolvers = {
    Query: {
      currentNumber: (_parent, _args, _context, _info) => {
        return currentNumber;
      },
    },
    Subscription: {
      numberIncremented: {
        subscribe: (_parent, _args, _context, _info) => {
          return pubsub.asyncIterator(['NUMBER_INCREMENTED']);
        },
      },
    },
  };

  // Create Schema
  // --------------------
  const schema = makeExecutableSchema({ typeDefs, resolvers });

  // Create Apollo Server
  // --------------------
  const server = new ApolloServer({
    schema,
    context: { pubsub },
  });
  await server.start();
  server.applyMiddleware({ app });

  // Create Subscription Server
  // --------------------------
  SubscriptionServer.create(
    {
      onOperation: (_message: any, params: any, _webSocket: any) => {
        // Manipulate and return the params, e.g.
        params.context.pubsub = pubsub;
        return params;
      },
      schema,
      execute,
      subscribe,
    },
    { server: httpServer, path: server.graphqlPath }
  );

  httpServer.listen(4000, () => {
    console.log(
      `🚀 Query endpoint ready at http://localhost:4000${server.graphqlPath}`
    );
    console.log(
      `🚀 Subscription endpoint ready at ws://localhost:4000{server.graphqlPath}`
    );
  });

  let currentNumber = 0;
  function incrementNumber() {
    currentNumber++;
    pubsub.publish('NUMBER_INCREMENTED', { numberIncremented: currentNumber });
    setTimeout(incrementNumber, 2000);
  }
  // Start incrementing
  incrementNumber();
})();

An here is the codegen.yml:

overwrite: true
schema: 'http://localhost:4000/graphql'
documents: null
generates:
  generated/graphql.ts:
    plugins:
      - 'typescript'
      - 'typescript-resolvers'

I could not find any examples, nor any hint in the documentation of how to solve this typescript problem.

Any hints, what I did wrong or how to make the code compile without errors?

[sammysaglam]

@armintan were you able to find a solution to this?

[armintan]

No, still waiting for getting an answer or suggestion, how to get it solved

[tubbo]

@armintan @sammysaglam this looks like it's a reported issue and is blocked by graphql-subscriptions :( #7197 apollographql/graphql-subscriptions#250

[ardatan]

The signature is correct. GraphQL accepts an AsyncIterable not AsyncIterator. You can return { [Symbol.asyncIterator]: () => asyncIteratorHere } which is basically an AsyncIterator

[tubbo]

@ardatan what exactly do you mean by this? I have this code:

import { SubscriptionResolvers } from '../../generated'
import { withFilter } from 'graphql-subscriptions'
import { Topic } from '../subscription'

const RoomSubscriptions: Pick<
  SubscriptionResolvers,
  'userKickedFromRoom' | 'roomChanged'
> = {
  userKickedFromRoom: {
    subscribe: withFilter(
      (_p, _a, { pubsub }) => pubsub.asyncIterator([Topic.KICK_ROOM]),
      ({ userKickedFromRoom }, { room, user }) =>
        userKickedFromRoom?.user._id === user &&
        userKickedFromRoom?.entity._id === room,
    ),
  },
  roomChanged: {
    subscribe: withFilter(
      (_p, _a, { pubsub }) => pubsub.asyncIterator([Topic.ROOM_CHANGE]),
      ({ roomChanged }, { room }) => roomChanged._id === room,
    ),
  },
}

export default RoomSubscriptions

I don't know where I can return [Symbol.asyncIterator]: () => pubsub.asyncIterator([Topic.ROOM_CHANGE]) because i don't have access to the PubSub at the root of the subscription.