ngx-admin中Hasura GraphQL订阅功能无法正常工作

问题情况 #

• 配置Apollo连接Hasura实现GraphQL订阅功能时，功能完全失效且无任何报错信息
• 相同Node版本、依赖库版本的普通Angular项目（命名为Base Demo）中，订阅功能可正常运行
• 克隆纯净的ngx-admin项目，使用与Base Demo完全一致的GraphQL配置代码，订阅功能仍无法工作：既无结果展示，也无报错输出；浏览器控制台中WS连接状态与Base Demo完全一致

相关代码 #

GraphQLModule.ts #

// GraphQLModule.ts
import {NgModule} from '@angular/core';
import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions, InMemoryCache, split} from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';
import { getMainDefinition } from '@apollo/client/utilities';

const uri = 'http://localhost:8080/v1/graphql';
const wsUri = 'ws://localhost:8080/v1/graphql';

export function createApollo(httpLink: HttpLink, http: HttpClient): ApolloClientOptions<any> {

var token = "<token>";
   
  const authLink = httpLink.create({
    uri,
    headers: !token ? new HttpHeaders() : 
      new HttpHeaders()
        .set('Authorization', `Bearer ${token}`)
        .set('x-hasura-role', "manager"),
  });

  const wsLink = new GraphQLWsLink(createClient({
    url: wsUri,
    connectionParams: {
      headers: !token ? {} : 
      {
        Authorization: `Bearer ${token}`,
        'x-hasura-role': "user",
      }
    }
  }));

  // The split function takes three parameters:
  //
  // * A function that's called for each operation to execute
  // * The Link to use for an operation if the function returns a "truthy" value
  // * The Link to use for an operation if the function returns a "falsy" value
  const splitLink = split(
    ({ query }) => {
      const definition = getMainDefinition(query);
      return (
        definition.kind === 'OperationDefinition' &&
        definition.operation === 'subscription'
      );
    },
    wsLink,
    authLink,
  );
  
  return {
    cache: new InMemoryCache({
      addTypename: false,
    }),
    link: splitLink,
  };
}

@NgModule({
  exports: [ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink, HttpClient],
    },
  ],
})
export class GraphQLModule {}

subscription-page.component.ts #

// subscription-page.component.ts
import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { ApiService } from '../../../services/api.service';

@Component({
  selector: 'app-subscription-page',
  templateUrl: './subscription-page.component.html',
  styleUrls: ['./subscription-page.component.scss']
})
export class SubscriptionPageComponent implements OnInit {

  data: any;
  subscription?: Subscription;

  constructor(
    private api: ApiService,
  ) {}

  ngOnInit(): void {
    this.subscription = this.api.subscribe()
      .subscribe({
        next: (v) => this.data = v,
        error: (e) => console.error(e),
        complete: () => console.info('complete') 
    })
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }

}

环境信息 #

Node, npm: node v14.21.3 (npm v6.14.18)
OS: Ubuntu 18.04
Browser: Chrome, Firefox
Angular 13.3.12
Nebular 9.1.0-rc.8

预期结果 #

克隆ngx-admin仓库并配置Apollo后，订阅功能能像普通Angular项目一样正常运行。

内容的提问来源于stack exchange，提问作者gbos