Subscription field must return Async Iterable. Received: null

[exaucae]

Screenshot

Expected Behaviour
No unexpected 4500 socket internal error

I expected it to keep the connection when there there's no user interaction with the server

Actual Behaviour
When I leave the browser tab opened for at least 1h without interacting with the application, error 4500 is thrown. It results in the connection being closed with no retry because it's a fatal error

Debug Information

AFAICT, there's nothing returning null on the server-side subscription. I am probably missing the inner specifics of AsyncIterator?

Here are the relevant code snippets:

client:

// client.ts
const getWsLink = (token: string) =>
  new GraphQLWsLink(
    createClient({
      url: process.env.GRAPHQL_WS_URL,
      connectionParams: {
        authToken: token,
      },
      shouldRetry: (closeEvent: CloseEvent) => {
        // retries on client unexpected socket closing ( error 1006 )
        const UNEXPECTED_CHROMIUM_CLOSE_EVENT = 1006;
        return closeEvent.code === UNEXPECTED_CHROMIUM_CLOSE_EVENT;
      },
      retryAttempts: 10,
    })
  );

//subscription-client.ts

  useSubscription(DOPE_SUBSCRIPTION, {
    onData: ({ data }) => {
      if (data?.data?.dopeSubscription?.message !== undefined) {
        doSomethingDope();
      }
    },
  });

server

// server.ts

  const app = express();
  const httpServer = createServer(app);
  const wsServer = new WebSocketServer({
    server: httpServer,
    path: '/dope-subscription-path',
  });

  const wsContext = async (ctx) => {
    const token = ctx.connectionParams.authToken || '';
    const user = await getUser(token);
    return { user, dataSources };
  };


  const serverCleanup = useServer({ schema, context: wsContext }, wsServer);

  const plugins = [
    ApolloServerPluginDrainHttpServer({ httpServer }),
    {
    async serverWillStart() {
      return {
        async drainServer() {
          await serverCleanup.dispose();
        },
      };
    },
  ];

  const server = new ApolloServer({
    schema,
    dataSources: () => dataSources,
    context,
    plugins,
    introspection: true,
  });

  await server.start();

  server.applyMiddleware({ app, cors: true, path: '/' });

  await httpServer.listen(PORT);

// subsciption-resolver.ts
  @Subscription(() => DopeResultType, { topics: DOPE_TOPIC })
  async dopeSubscription(
    @Ctx() { dataSources, user }: GraphqlContext,
    @Root() { message , action }: Payload
  ): Promise<typeof DopeResultType> {
    try {
      if (!user) {
        return {
          message: undefined,
          action: undefined,
        };
       }
     // some dope processings


    return {
          message
          action,
        };
      }    
    } catch (err) {
      return err;
    }
  }

Further Information

Librairies used:

"ws": "^8.4.2",
"graphql-ws": "^5.11.2",
"type-graphql": "^1.1.1",
"graphql": "^15.5.1",
"@apollo/client": "^3.7.1",
"apollo-server-core": "^3.6.2",
"apollo-server-express": "3.6.2",