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",

[enisdenjo]

The error originates from the subscription resolver in your schema. It could be that the subscription resets, or the browser reconnects the WS connection and then the subscription resolver returns null instead of the iterator.

[exaucae]

For future reference, it was indeed resolver returning null. We weren't gracefully handling user token expiration with Firebase admin SDK.
A fix was to :

• return an expected error code Fooon token expiration in server
• catch Foo in browser and send fresh token