init dashboard

service/app-hub/dashboard/src/app/graphql.provider.ts

@@ -0,0 +1,45 @@
+import { ApplicationConfig, inject } from '@angular/core';
+import { ApolloClientOptions, InMemoryCache, split } from '@apollo/client/core';
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
+import { getMainDefinition } from '@apollo/client/utilities';
+import { Apollo, APOLLO_OPTIONS } from 'apollo-angular';
+import { HttpLink } from 'apollo-angular/http';
+import { OperationDefinitionNode } from 'graphql';
+import { createClient } from 'graphql-ws';
+import { environment } from '../environments/environment';
+
+const uri = environment.graphQl.endpoint; // <-- add the URL of the GraphQL server here
+export function apolloOptionsFactory(): ApolloClientOptions<any> {
+  const httpLink = inject(HttpLink);
+
+  const http = httpLink.create({ uri });
+
+  const ws = new GraphQLWsLink(
+    createClient({
+      url: environment.graphQl.ws,
+    })
+  );
+
+  const link = split(
+    ({ query }) => {
+      const { kind, operation } = getMainDefinition(
+        query
+      ) as OperationDefinitionNode;
+      return kind === 'OperationDefinition' && operation === 'subscription';
+    },
+    ws,
+    http
+  );
+  return {
+    link,
+    cache: new InMemoryCache(),
+  };
+}
+
+export const graphqlProvider: ApplicationConfig['providers'] = [
+  Apollo,
+  {
+    provide: APOLLO_OPTIONS,
+    useFactory: apolloOptionsFactory,
+  },
+];